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."
Tedious 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."
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."
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)
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
Second iteration
More contrast, but not apparent
Final Design
Imagery draws attention
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.