Enhancing the user experience for a lifestyle app

Collaborating with a startup in the wellness industry to transform a complex app into an intuitive and user-friendly experience

Brief

Decorative cover image for ZenLife case study

tools

  • Figma
  • Figjam
  • Google Suite
  • Adobe Creative Suite

methods

  • User testing
  • Heuristic Evaluation
  • Information Architecture Analysis
  • Wireframing

the brief

I teamed up with a startup in the wellness industry to transform ZenLife—a beta app that offers eastern wellness practices like yoga, meditation, and kung-fu—into an intuitive, user-friendly experience. With just 10 days on the clock, my goal was to cut through the clutter and make the app feel as inviting and clear as the mindful practices it celebrates.

the challenge

ZenLife had been built with passion, but the founders were so immersed in perfecting every detail that they lost sight of the user’s perspective. When I first explored the beta, I found myself wandering through confusing menus and complex features—if I could get lost, so would the users. It was clear: the app needed a major usability tweak, starting with a fresh information architecture and a clearer design approach.

our approach

I started with a “hands-on user testing session.” I treated my first interaction with ZenLife as a genuine exploration, mapping out features and screens without any preconceived notions. From there, I zeroed in on one of the most critical aspects: the information architecture.

information architecture refresh

I began by sketching the app’s initial sitemap, which felt cluttered and overwhelming.

Diagram showing ZenLife's previous sitemap, cluttered with many arrows outlining the structure and navigation flow.

After researching best practices and analysing similar apps, I restructured the sitemap into a more intuitive, user-friendly flow.

Diagram showing ZenLife's new sitemap, presenting a more streamlined, clear, and organised structure.

redesign

I iterated through a series of designs—moving from low-fidelity sketches to polished hi-fi screens—to breathe clarity and purpose into every key area of the app.

homepage

The homepage is the dashboard of ZenLife—it needs to provide a snapshot of your profile, calendar, and notifications at a glance. In the original design, news dominated the space while essential features were shoved into a secondary carousel. I flipped that around, giving key functions prime real estate and relegating news to its own dedicated page.

Three side-by-side screenshots of the ZenLife dashboard. The left image shows the original design with a cluttered layout dominated by a news feed. The middle image is a mid-fidelity redesign in grayscale that repositions the calendar and key features, while the right image is the final design—nearly identical to the mid-fidelity version but enhanced with a refined colour palette.

news

The news section now lives on a separate screen with a clear hierarchy: the latest article grabs your attention first, and once read, it fades out to keep the focus on what’s new.

Three side-by-side interface designs comparing iterations of the ZenLife app. The first screenshot shows the same homepage as in the previous image. The new design shows a simple an minimalist news feed, separate from the homepage.

wellness

Since wellness is the heart of ZenLife, I merged what were once separate “Videos” and “Wellness Services” into one cohesive Wellness section. It’s now organised into:

  • Live: showing current and upcoming livestreams.
  • Wellness Programs: complete with brief explanations to help users distinguish between different content types.
  • Your Library: a dedicated space for your own lessons.
  • Purchase More Classes: making it easy to expand your learning. I crafted a seamless, engaging flow for this section so that every wellness experience feels natural.
Two mobile screenshots of the ZenLife wellness interface. The first screenshot displays the top view with clearly defined sections for Live sessions, Wellness Programs, Your Library, and a 'Purchase More Classes' button. The second screenshot shows the same screen scrolled down to reveal additional wellness program cards below the initial viewport

I added a brief explanation of the various sections within the Wellness Programs. This will allow users to make informed choices based on the information provided within the app, without the need for external research that might divert their attention away from the app.

Three aligned mobile interface iterations of the Pranayama selection screen within Wellness Programs. The first one, labeled 'current design', features four cards for different pranayamas. The second one, labeled 'mid-fidelity', features a similar screen in grayscale, but under each heading for pranayama there is a placeholder for a brief description. The third one, labeled 'high fidelity', looks exactly like the second one but colours and images have been added.

menu & settings

Originally, ZenLife featured a “Menu” with a hamburger icon that lumped together settings and other items—confusing and counterintuitive. I rebranded this as “Settings” and tucked it neatly into the profile. This change not only declutters the navbar but also mirrors familiar patterns seen in apps like Instagram and TikTok, making it easier for users to find what they need.

Annotated screenshot of the 'profile' section in the app. The screen looks similar to Instagram's profile grid. There's an arrow at the bottom left pointing at the navbar: 'simpler navbar', one on the bottom right: 'room for upcoming features', and one on the top right, pointing at a settings icon 'intuitive placement for users. As seen on: Instagram, TikTok, Tumblr, BeReal'

I divided the settings page into sections, making it easier for the user to quickly scan the screen and find what they're looking for.

Three part screenshot of the settings page. The first screen, labeled 'current design', it's a list of many unorganised features. The second screen, labeled 'mid-fidelity', presents the same screen in black and white, but this time the settings are grouped under headings like 'account settings', 'help', and 'privacy and terms'. The third screen, labeled 'high- fidelity', looks the same as the second but it follows the app's colour palette and icons.

empty states

Blank screen can leave users feeling stranded, and in the version of ZenLife that I was first shown, there was a lot of them.

Three screenshots of the app, showing the inbox, the profile, and the community page. All three are blank without any content.

To address this, I designed thoughtful empty states with clear, friendly messages that guide users on what to do next.

Four screenshots of the app. The first one, labeled 'inbox', features a gray icon in the middle and the text 'you don't have any messages. Tap the + icon to start your first conversation'. The second one, labeled 'profile' features an icon with the text 'This profile doesn't have ant posts yet'. The third one, labeled 'community', features an icon with the text 'You don't follow any connections yet. Tap the + icon to find your first connection'. And the fourth screen, labeled 'notifications', features an icon with the text 'you don't have any notifications'

retrospective

Convincing the client to embrace these changes wasn’t easy, but data-backed user testing made it undeniable. This project reinforced that while deep expertise is essential, keeping the user front and center is what truly drives a great experience. A refreshed information architecture paired with iterative, user-focused design not only simplifies the app—it elevates it.