Zenbase

UX/UI Design

Mobile Design

Zenbase

UX/UI Design

Mobile Design

Zenbase

UX/UI Design

Mobile Design

Designing a new timer feature for a meditation app
Designing a new timer feature for a meditation app
Designing a new timer feature for a meditation app

Details

About

About

About

I designed a timer feature for Zenbase, an app that combines mental wellness with cryptocurrency rewards. The goal was to provide users with a quick and customizable meditation option. I created an intuitive interface that allows users to personalize their meditation practice. The timer feature enhances Zenbase's offerings, giving users more flexibility and control over their meditation sessions.

I designed a timer feature for Zenbase, an app that combines mental wellness with cryptocurrency rewards. The goal was to provide users with a quick and customizable meditation option. I created an intuitive interface that allows users to personalize their meditation practice. The timer feature enhances Zenbase's offerings, giving users more flexibility and control over their meditation sessions.

I designed a timer feature for Zenbase, an app that combines mental wellness with cryptocurrency rewards. The goal was to provide users with a quick and customizable meditation option. I created an intuitive interface that allows users to personalize their meditation practice. The timer feature enhances Zenbase's offerings, giving users more flexibility and control over their meditation sessions.

Functions

Functions

UX Design

UX Design

UX Design

Interaction Design

Interaction Design

Interaction Design

Prototyping

Prototyping

Prototyping

Role

Role

Product Designer

Product Designer

Product Designer

Timeline

Timeline

2 weeks end-to-end (2023)

2 weeks end-to-end (2023)

2 weeks end-to-end (2023)

Details

Vision

Custom meditation should be intuitive, personal, and easy.

Vision

Custom meditation should be intuitive, personal, and easy.

Vision

Custom meditation should be intuitive, personal, and easy.

Goals

Help users

have control over custom meditation sessions for every lifestyle.

Help Zenbase

increase referrals and activation by making the experience shareable and incentivizing users with crypto rewards.

Help growth

incorporate invitations as part of the user flow, creating multiple channels for referrals and bringing in more traffic to the app.

Goals

Help users

have control over custom meditation sessions for every lifestyle.

Help Zenbase

increase referrals and activation by making the experience shareable and incentivizing users with crypto rewards.

Help growth

incorporate invitations as part of the user flow, creating multiple channels for referrals and bringing in more traffic to the app.

Goals

Help users

have control over custom meditation sessions for every lifestyle.

Help Zenbase

increase referrals and activation by making the experience shareable and incentivizing users with crypto rewards.

Help growth

incorporate invitations as part of the user flow, creating multiple channels for referrals and bringing in more traffic to the app.

Current user experience
Current user experience

Currently, Zenbase’s beta includes a homepage that serves as an “Explore” dashboard.


Currently, Zenbase’s beta includes a homepage that serves as an “Explore” dashboard.

Currently, Zenbase’s beta includes a homepage that serves as an “Explore” dashboard.

There is an overload of browsing options. This is not an optimal way for users to easily and quickly start meditating

There is an overload of browsing options. This is not an optimal way for users to easily and quickly start meditating

There is an overload of browsing options. This is not an optimal way for users to easily and quickly start meditating

There are multiple channels (playlists and filters) to meditate within a desired time frame, but the timed options are limited and the time intervals are random.

There are multiple channels (playlists and filters) to meditate within a desired time frame, but the timed options are limited and the time intervals are random.

There are multiple channels (playlists and filters) to meditate within a desired time frame, but the timed options are limited and the time intervals are random.

My hypothesis
My hypothesis

Too many options can be counterproductive for our users' goals. I proposed we design a centralized location for a basic timer to provide users with more flexibility and control over their session.

Too many options can be counterproductive for our users' goals. I proposed we design a centralized location for a basic timer to provide users with more flexibility and control over their session.

Too many options can be counterproductive for our users' goals. I proposed we design a centralized location for a basic timer to provide users with more flexibility and control over their session.

I hypothesized that putting a new timer button on the homepage was the best option, because it would be the quickest option as it's one of the first things users will see.

I hypothesized that putting a new timer button on the homepage was the best option, because it would be the quickest option as it's one of the first things users will see.

I hypothesized that putting a new timer button on the homepage was the best option, because it would be the quickest option as it's one of the first things users will see.

Before

Filter by time was a 2-step process


First Iteration

Timer button on homepage

(top right)

Final Design

New architecture → 'Shortcuts'

User tasks to be done

User tasks to be done

Locate

Users should be able to easily and quickly find the timer.

Users should be able to easily and quickly find the timer.

Customize

Users should be able to customize their settings for their meditation needs and preferences.

Users should be able to customize their settings for their meditation needs and preferences.

Invite

Users should be able to invite their friends to join in on their sessions as an option to increase their rewards.

Users should be able to invite their friends to join in on their sessions as an option to increase their rewards.

Brainstorm
Brainstorm

Before jumping into Figma, I sketched possible starting points. I ran with my hypothesis that the timer should be located somewhere on the homepage and be a centralized location vs browsing and filtering options that were offered at the time.


Before jumping into Figma, I sketched possible starting points. I ran with my hypothesis that the timer should be located somewhere on the homepage and be a centralized location vs browsing and filtering options that were offered at the time.

Before jumping into Figma, I sketched possible starting points. I ran with my hypothesis that the timer should be located somewhere on the homepage and be a centralized location vs browsing and filtering options that were offered at the time.

I also played around with the nav bar. I wanted to see if symbolism and signifiers could potentially be easier for users to locate.

I also played around with the nav bar. I wanted to see if symbolism and signifiers could potentially be easier for users to locate.

I also played around with the nav bar. I wanted to see if symbolism and signifiers could potentially be easier for users to locate.

Iconography
Iconography

Running with the signifier idea, I illustrated more potential icons that clearly represent the task.




Running with the signifier idea, I illustrated more potential icons that clearly represent the task.

Running with the signifier idea, I illustrated more potential icons that clearly represent the task.

We ultimately scrapped this idea, because making changes to the nav bar would delay our timeline and require a lot of reworking for our devs.

We ultimately scrapped this idea, because making changes to the nav bar would delay our timeline and require a lot of reworking for our devs.

We ultimately scrapped this idea, because making changes to the nav bar would delay our timeline and require a lot of reworking for our devs.

Considered architecture
Considered architecture
Framework
Framework

After researching and comparing different timer apps on the market, I designed this initial framework that offered a familiar interface that provides users with a simple yet diverse customization workflow.



After researching and comparing different timer apps on the market, I designed this initial framework that offered a familiar interface that provides users with a simple yet diverse customization workflow.

After researching and comparing different timer apps on the market, I designed this initial framework that offered a familiar interface that provides users with a simple yet diverse customization workflow.

Additional features that I wanted to include were the option to access past timer settings and meditation logging to create proactive tasks for habitual users.


Additional features that I wanted to include were the option to access past timer settings and meditation logging to create proactive tasks for habitual users.

Additional features that I wanted to include were the option to access past timer settings and meditation logging to create proactive tasks for habitual users.

Initial user flow
Initial user flow

Lean UX Validation

Lean UX Validation

Lean UX Validation

Since Zenbase is an early-stage startup and we have a short timeline to launch this feature, I decided a lean approach is best. This approach helps us understand our users' values more deeply, because we are getting precise feedback on each step and every roadblock.

Since Zenbase is an early-stage startup and we have a short timeline to launch this feature, I decided a lean approach is best. This approach helps us understand our users' values more deeply, because we are getting precise feedback on each step and every roadblock.

Since Zenbase is an early-stage startup and we have a short timeline to launch this feature, I decided a lean approach is best. This approach helps us understand our users' values more deeply, because we are getting precise feedback on each step and every roadblock.

Low risk

Testing at every step saves time revising designs.

Testing at every step saves time revising designs.

Multiple iterations

More iterations early on provides multiple validation points for a refined final product.

More iterations early on provides multiple validation points for a refined final product.

Multiple experiments

We can validate our list of UX hypotheses through multiple experiments, or usability tests.

We can validate our list of UX hypotheses through multiple experiments, or usability tests.

UXR Findings

UXR Findings

UXR Findings

My research consisted of a series of usability tests with 4 participants who worked in web3 and currently participate in meditation or some other kind of mental wellness practice. I asked them to start a silent meditation timer and observed their interactions with the prototypes.



My research consisted of a series of usability tests with 4 participants who worked in web3 and currently participate in meditation or some other kind of mental wellness practice. I asked them to start a silent meditation timer and observed their interactions with the prototypes.

My research consisted of a series of usability tests with 4 participants who worked in web3 and currently participate in meditation or some other kind of mental wellness practice. I asked them to start a silent meditation timer and observed their interactions with the prototypes.

Unclear tasks

"It was unclear that "+ New Session" was for a timed silent meditation and not a guided meditation or other."

"It was unclear that "+ New Session" was for a timed silent meditation and not a guided meditation or other."

Tedious settings

"I don't see myself using this that much, because it seems like a lot of work to input all the settings."

"I don't see myself using this that much, because it seems like a lot of work to input all the settings."

Spatial accessibility

"It's hard to change my timer settings, because my fingers are too big."

"It's hard to change my timer settings, because my fingers are too big."

Progress updates

"I'd like to know how much longer I have in my session without needing to open my eyes to look at the screen and interrupt my meditation."

"I'd like to know how much longer I have in my session without needing to open my eyes to look at the screen and interrupt my meditation."

Feedback → Improvements

Feedback → Improvements

Feedback → Improvements

In response to comments and insights, I revised my MVP to tackle prevalent issues and obstacles that participants expressed and encountered.

In response to comments and insights, I revised my MVP to tackle prevalent issues and obstacles that participants expressed and encountered.

In response to comments and insights, I revised my MVP to tackle prevalent issues and obstacles that participants expressed and encountered.

Helpful steps
Helpful steps

The ambiguity of "+New Session" called for additional descriptors that guide users to their desired destination.

The ambiguity of "+New Session" called for additional descriptors that guide users to their desired destination.

The ambiguity of "+New Session" called for additional descriptors that guide users to their desired destination.

I added a new screen that clearly represents the current action being taken.

I added a new screen that clearly represents the current action being taken.

I added a new screen that clearly represents the current action being taken.

Zenbase founders had plans to rollout more features in their V.2.0, so I hypothesized that this page will increasingly become helpful for users once the app offered more quick action features.

Zenbase founders had plans to rollout more features in their V.2.0, so I hypothesized that this page will increasingly become helpful for users once the app offered more quick action features.

Zenbase founders had plans to rollout more features in their V.2.0, so I hypothesized that this page will increasingly become helpful for users once the app offered more quick action features.

First iteration (iPhone 13)

Second iteration (iPhone 13 mini)


Second iteration

(iPhone 13 mini)


Optimizing real estate
Optimizing real estate

Zenbase's structure is very much like Apple Music, so I hypothesized a familiar interface would be easier to use in the second iteration.

Zenbase's structure is very much like Apple Music, so I hypothesized a familiar interface would be easier to use in the second iteration.

Zenbase's structure is very much like Apple Music, so I hypothesized a familiar interface would be easier to use in the second iteration.

In collaboration with another designer, we re-established visual hierarchy and adjusted spatial accessibility for a more digestible experience.

In collaboration with another designer, we re-established visual hierarchy and adjusted spatial accessibility for a more digestible experience.

In collaboration with another designer, we re-established visual hierarchy and adjusted spatial accessibility for a more digestible experience.

('Saved Timers' and 'Meditation Log' were removed from these screens as they were deemed unnecessary or will be put in another location on the app.)

('Saved Timers' and 'Meditation Log' were removed from these screens as they were deemed unnecessary or will be put in another location on the app.)

Progress updates
Progress updates

All iterations have interval or bell countdown once the timer is started, but it was not an obvious element that users noticed.

All iterations have interval or bell countdown once the timer is started, but it was not an obvious element that users noticed.

All iterations have interval or bell countdown once the timer is started, but it was not an obvious element that users noticed.

Ambient background was a fun idea I proposed, but unfortunately required too much extra dev work and didn't make it to final design.

Ambient background was a fun idea I proposed, but unfortunately required too much extra dev work and didn't make it to final design.

Ambient background was a fun idea I proposed, but unfortunately required too much extra dev work and didn't make it to final design.

Since previous screens have bell images in their visual hierarchy, we re-used the same method for the final design.

Since previous screens have bell images in their visual hierarchy, we re-used the same method for the final design.

Since previous screens have bell images in their visual hierarchy, we re-used the same method for the final design.

First iteration

Bells remaining de-prioritized


First iteration

Bells remaining de-prioritized

Second iteration

More contrast, but not apparent

Final Design

Imagery draws attention

Architectural changes
Architectural changes

My original hypothesis of centralizing the timer on the homepage was well received in theory. The first prototype lacked stylistic significance, which confused users.

My original hypothesis of centralizing the timer on the homepage was well received in theory. The first prototype lacked stylistic significance, which confused users.

My original hypothesis of centralizing the timer on the homepage was well received in theory. The first prototype lacked stylistic significance, which confused users.

During this sprint, the design team wanted to rollout an architectural change, "Shortcuts" to diversify the homepage and give users a more dynamic browsing experience. This new centralized location was clear and didn't require extra steps or copy.

During this sprint, the design team wanted to rollout an architectural change, "Shortcuts" to diversify the homepage and give users a more dynamic browsing experience. This new centralized location was clear and didn't require extra steps or copy.

During this sprint, the design team wanted to rollout an architectural change, "Shortcuts" to diversify the homepage and give users a more dynamic browsing experience. This new centralized location was clear and didn't require extra steps or copy.

Final Polish

Final Polish

Following a 14-day trial and improvement period, the design team prioritized the integration of share functions. To achieve greater engagement and motivate users, reward enhancements were introduced for inviting peers.

Following a 14-day trial and improvement period, the design team prioritized the integration of share functions. To achieve greater engagement and motivate users, reward enhancements were introduced for inviting peers.

Following a 14-day trial and improvement period, the design team prioritized the integration of share functions. To achieve greater engagement and motivate users, reward enhancements were introduced for inviting peers.

Sharing with friends
Sharing with friends

The team designed a simple 2-step process for inviting peers to join sessions. A simple text is generated for sharing.

The team designed a simple 2-step process for inviting peers to join sessions. A simple text is generated for sharing.

The team designed a simple 2-step process for inviting peers to join sessions. A simple text is generated for sharing.

Users are given the option to invite active users or encourage inactive users to engage in meditation. This invite function will be available for all features on the app.

Users are given the option to invite active users or encourage inactive users to engage in meditation. This invite function will be available for all features on the app.

Users are given the option to invite active users or encourage inactive users to engage in meditation. This invite function will be available for all features on the app.

Results
Results
Results

The final design shows the hypothesized centralized location in its new permanent location, "Shortcuts", when users are on the homepage.

The final design shows the hypothesized centralized location in its new permanent location, "Shortcuts", when users are on the homepage.

The final design shows the hypothesized centralized location in its new permanent location, "Shortcuts", when users are on the homepage.

The timer has an intuitive and frictionless workflow for quick and easy setup.

The timer has an intuitive and frictionless workflow for quick and easy setup.

The timer has an intuitive and frictionless workflow for quick and easy setup.

Users are prompted to invite friends when they start meditating, providing a new channel for referrals while increasing rewards and new user activation or engagement.

Users are prompted to invite friends when they start meditating, providing a new channel for referrals while increasing rewards and new user activation or engagement.

Users are prompted to invite friends when they start meditating, providing a new channel for referrals while increasing rewards and new user activation or engagement.

Learnings

Focus on core user task

Don't overcomplicate the flow with more options. This can cause confusion or drop offs in engagement.

Don't overcomplicate the flow with more options. This can cause confusion or drop offs in engagement.

Use repetition to guide users

Instead of creating new ways to interact, reuse current patterns so that the flow is intuitive and familiar.

Instead of creating new ways to interact, reuse current patterns so that the flow is intuitive and familiar.

You've made it to the 🦶🏼!

Thanks for stopping by! If you've made it down here, I hope you found something interesting so far. I'm always open to new projects and connecting.

Currently open to new opportunities.

Get to know me a little.

Created with matcha 🍵 and built with Framer

Tia-Marie Vo © 2023.

You've made it to the 🦶🏼!

Thanks for stopping by! If you've made it down here, I hope you found something interesting so far. I'm always open to new projects and connecting.

Currently open to new opportunities.

Get to know me a little.

Created with matcha 🍵 and built with Framer

Tia-Marie Vo © 2023.

You've made it to the 🦶🏼!

Thanks for stopping by! If you've made it down here, I hope you found something interesting so far. I'm always open to new projects and connecting.

Currently open to new opportunities.

Get to know me a little.

Created with matcha 🍵 and built with Framer

Tia-Marie Vo © 2023.