November 10, 2026Product case study12 min

One experience, from first class to weekly routine.

I designed and built ME Life’s new public website and membership portal as one connected product—carrying the same brand promise through discovery, signup, membership, workouts, and the operating tools behind them.

Visit ME Life

The live ME Life homepage. The visual system uses open space, coastal color, and real context to make outdoor fitness feel approachable rather than performative.

Product

Customer journey, membership model, business rules, and operational flow.

Brand

Positioning, visual direction, language, hierarchy, and perceived value.

Experience

Public website, trial funnel, responsive UI, account, and member journeys.

Platform

Authenticated portal, payments, recurring places, staff tools, and releases.

The public site and the portal solve different moments in the same relationship. The website helps someone decide whether ME Life feels right. The portal has to make the decision useful every week after that.

That distinction shaped the project. I did not want a polished marketing site that handed the customer into a generic account area with different language, priorities, and visual behavior. I treated the entire path as one product: understand the offer, find a class, try it, choose a membership, establish a weekly place, and know what happens next.

The work crossed product strategy, brand, writing, interaction design, frontend and backend engineering, membership logic, payments, staff operations, and cloud delivery. The useful part was not doing those disciplines separately. It was keeping them pointed at the same customer promise.

A member should not have to understand ME Life’s systems. The systems should remember the member’s routine, make the next step obvious, and leave room for a human relationship with the coach.

A brand has to behave, not just look consistent

ME Life is built around coached movement outdoors, close to the water, with a level of personal attention that is easy to lose in conventional fitness marketing. The website needed to feel like that experience before a visitor attended a class: open, calm, confident, local, and human.

I used a restrained coastal palette, generous spacing, direct photography, and typography with enough scale to create clarity without becoming loud. The language avoids transformation theater and pressure. It talks about a regular place in the week, expert guidance, fresh air, and movement that fits real life.

On mobile, the hierarchy stays intact. The promise, the primary action, and the setting arrive in that order. The design is not a desktop composition squeezed into a phone; it is the same idea rebuilt for a smaller decision space.

ME Life outdoor fitness program page with a large waterfront class photograph — Live site: program pages combine the emotional reason to join with the practical information needed to act.

Mobile ME Life homepage with the outdoor fitness message and call to action — The live homepage at 390 pixels wide.

Answer the real questions in the order they occur.

A fitness website has to do more than describe programs. A prospective member wants to know what the class is, where it happens, when it fits, whether it is for someone like them, and how to try it without getting trapped in a sales process.

I organized the public site around those decisions. Program pages explain the experience. The schedule exposes the actual weekly pattern by location and format. The free-class flow starts with the class—not a generic lead form—and carries the selection into the next step.

The site is designed to be fast, indexable, and resilient on its own. Ordinary browsing does not depend on the authenticated portal, while shared schedule and pricing contracts prevent the two surfaces from telling different stories.

ME Life weekly class schedule filtered by location — The live schedule turns programs into a legible weekly pattern, with location and day filters close to the decision.

Membership should create a routine, not another task.

ME Life memberships revolve around a regular weekly place. Once a member chooses the workouts that fit their plan, those places become part of the relationship. The member should not have to rebook the same routine every week.

That business rule became the center of the portal. Home shows the membership and what is coming up. Workouts separate the member’s reserved routine from other available sessions. Changing a weekly place is a deliberate action with clear capacity feedback, rather than a hidden side effect of canceling one class.

The interface also preserves access to the human part of the service: the member’s coach, messages, wellbeing information, account details, agreements, and membership controls belong in the same place.

The live sign-in page continues the public brand while making the account action unmistakable.

Mobile ME Life member portal sign-in page — Live site: sign-in remains calm and usable on a phone, including password and social account paths.

ME Life member home preview showing the next workout and membership context — Sample-data preview: the member home leads with the weekly routine and the next useful action. No member records are shown.

ME Life mobile workouts preview showing reserved weekly sessions — Sample-data preview: reserved places remain visible in the workout list.

ME Life weekly workout selector showing a selected recurring class — Sample-data preview: the weekly-place editor makes plan limits, days, locations, and the save action explicit.

The interface is only as honest as the system behind it.

A promise such as “your weekly place is reserved” creates operational consequences. Capacity, membership limits, schedule changes, attendance, pauses, cancellations, and billing state have to agree. If those systems drift, the cleanest UI in the world becomes misleading.

I built the portal around explicit states and shared rules. Member actions and staff actions meet in the same underlying model. Staff can work with classes, memberships, billing exceptions, policy records, attendance, content, and member support without maintaining a second shadow system.

The public website stays separate from private member data. Authentication, payment, and personal records live behind the portal boundary. The portfolio images on this page use public pages or clearly labeled sample data; they contain no real member information, private configuration, or credentials.

Product decisions that carried into engineering

One source of truth. Schedule, offer, and membership state should not be retyped across disconnected surfaces.
Precise states. Reserved, available, requested, paused, and canceled must mean different things in both the interface and the business rules.
Recovery is part of the journey. Payment and provider problems need clear retry paths without losing the member’s progress.
Privacy is structural. Public content, authenticated member data, and staff operations have different boundaries by design.
Mobile is the default moment. A member checking the next class or changing a routine is likely doing it between other parts of life.

Product ownership is the work between the disciplines.

ME Life is a useful example of how I work because the result could not be produced by optimizing one layer. The brand had to clarify the value. The website had to turn that value into a decision. The membership model had to turn the decision into a routine. The portal and staff tools had to keep that routine true.

My contribution was to hold those layers together: product strategy, brand, content, UX, UI, technical architecture, implementation, operational rules, security boundaries, and release discipline. That range matters most when a company is creating something new and the handoffs between specialties are still part of the product risk.

The public website and portal sign-in are live. The authenticated screens shown here are local sample-data previews used to demonstrate the member experience without exposing customer information.

Discuss a product