RISE into the day!
RISE into the day!
RISE into the day!
RitYOUal App, your one stop spot for your custom daily routine. No distractions, no option paralysis, just expert guides holding your hand as you RISE into the day!
Welcome to the study case of my time at Rise Ritual, where my part as an UI Designer was dedicated to create a cohesive and functional design, that helps the user to navigate easily through the app.
RitYOUal App, your one stop spot for your custom daily routine. No distractions, no option paralysis, just expert guides holding your hand as you RISE into the day!
Welcome to the study case of my time at Rise Ritual, where my part as an UI Designer was dedicated to create a cohesive and functional design, that helps the user to navigate easily through the app.
For full Portfolio-Experience please check out the Desktop Version
Description
Rise Ritual, a Wellness and Health — App to build holistic and healthy routines was in need of an UI-Designer to prepare screens for Developer and run through usability tests
Rise Ritual, a Wellness and Health — App to build holistic and healthy routines was in need of an UI-Designer to prepare screens for Developer and run through usability tests
Collaborators
Cleo Harding (Founder), Gaspar Bonari (Developer)
Cleo Harding (Founder), Gaspar Bonari (Developer)
Solution
Style Guide, Usability Tests, Handoff Guide for Developer
Style Guide, Usability Tests, Handoff Guide for Developer
Tools Used
Figma, Photoshop, Zoom, Slack, Loom Video
Figma, Photoshop, Zoom, Slack, Loom Video
Role
Role
UI Desinger
UI Desinger
Dates
Oct 2023-Dec2023
Oct 2023-Dec2023
Research Methods
Usability Tests
Design Critiques
Target Users
Open minded Users
Users interested in building healthy habits
Young Users
Spiritual Users
Bring Vision of Rise Ritual closer to life by preparing file for further process
Create a Design System that helps to work efficient and cohesive
Running Usability Tests to create user centric designs
Style Guide
Conclusions:
• Quickly realized that the file needed a more functional style guide.
• Incorporating additional styles, components, and libraries that seamlessly work within Figma, allowing for easy implementation of small changes with just a few clicks.
• Achieving cohesiveness through a functional style guide.
• Meticulously scanned all the screens, ensuring that all types of fonts, colors, and elements were saved as styles and components in the Figma library.
Tasks Usability Test
Rise through registration process and continue with Membership Plan
Rise through registration process and continue with Membership Plan
Registration
Registration
01
01
Discover the "Today's Message" on Home Screen
Discover the "Today's Message" on Home Screen
Today's Message
Today's Message
02
02
Edit password in personal profile and discover options when password is forgotten
Edit password in personal profile and discover options when password is forgotten
Password
Password
03
03
Independent discovery on basics such as Log-In/Log-Out
Independent discovery on basics such as Log-In/Log-Out
Basics
Basics
04
04
Results Usability Test
95%
95%
misclick rate
for Today's Message discovery
misclick rate
for Today's Message discovery
2/6
2/6
testers were able to complete the whole usability test
testers were able to complete the whole usability test
105.9s
105.9s
average duration to log-in and out of the app
average duration to log-in and out of the app
High-Fidelity Adjustments
• While reviewing the screens, I identified some open questions regarding the usability of the screens I was given.
• Designers can only assume where the user might get stuck, especially if they’ve been involved with a design for too long, potentially losing an overview of everything.
• Since I had recently interacted with the screens in this stage of the project, I was able to mark parts of the screens that needed a redo.
• Additionally with the results of the usability tests, I was able to make the needed changes within the UI.
Handoff-Guide
While working on the user interface, we discussed the next steps for the app, such as bringing Rise Ritual to life with a developer.
As an Ironhack alumni, I reached out on the #jobs_global thread to developers through Slack, and Cleo immediately received a response from Gaspar, who was participating in the part-time Dev-Bootcamp at Ironhack.
While working on the user interface, we discussed the next steps for the app, such as bringing Rise Ritual to life with a developer. As an Ironhack alumni, I reached out on the #jobs_global thread to developers through Slack, and Cleo immediately received a response from Gaspar, who was participating in the part-time Dev-Bootcamp at Ironhack.
Preparing the Screens
• Cleaned up the layers, named and ungrouped unnecessary elements, created frames instead, and transformed unequal sizes and numbers to equal ones
• I connected all the screens with their fonts, elements, and colors using the saved styles and components.
Dev-Mode Figma
Since Figma recently released the Dev-Mode, the prototype and styles were immensely beneficial in this process. Gaspar was able to navigate through the prototype, view the comments, and utilize the saved library to develop the app. Only a few live calls and messages on Slack were needed for clarification.
Branding & App Store Slides
The core of the branding was rooted in the founder's vision; my role involved taking the reins and refining the extensive array of colors and correcting typos, transforming it from a cluttered canvas into a streamlined and polished representation. After some design critiques that Cleo conducted, I streamlined the fonts and colors.
In addition to that, I was asked to design some slides for the App Store.
Aa
Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt
Uu Vv Ww Xx Yy Zz
1 2 3 4 5 6 7 8 9
Archivo Font
Rise Ritual Blue
25008D
Timberwolf Beige
E2DED7
Azure
E2EEEE
Daily Wellness
simplified
Move
mind
The Rise Ritual App is your one stop spot for your custom daily routine.
Breath
misc.
No distractions, no option paralysis, just expert guides holding your hand as you RISE into the day.
Astro Updates
tailored to current constellations
Daily Wellness
simplified
Move
mind
The Rise Ritual App is your one stop spot for your custom daily routine.
Breath
misc.
No distractions, no option paralysis, just expert guides holding your hand as you RISE into the day.
Astro Updates
tailored to current constellations
Meet RitYOUal App
Embark on the transformative journey of the RitYOUal App, where purposeful design meets holistic wellness. Join us as we rise together into a new era of well-being!
Meet RitYOUal App
Embark on the transformative journey of the RitYOUal App, where purposeful design meets holistic wellness. Join us as we rise together into a new era of well-being!
RISE into the day!
Within the prototype, you can observe that the user is rising to the sky during the registration process. I was tasked with designing the background for these screens, and I created a seamless image using Adobe Photoshop for this purpose.
Routine Builder and Disc Library
In addition to the routine builder, where users have access to routines prepared by Cleo and packed with data, there is also a Disc Library where exercises are categorized and stored. These can be unlocked over time and through a specific process.
Legal Pages and Basics
Necessary legal and personal profile pages have been added, along with screens for cases where the user forgets their password, wants to create a new profile, or delete their existing profile.
Today's Message
The dynamic astrological message on the home screen, which adapts to real-time data from the founder regarding astrological changes, has been revamped with a more captivating and user-friendly design.
RISE into the day!
Within the prototype, you can observe that the user is rising to the sky during the registration process. I was tasked with designing the background for these screens, and I created a seamless image using Adobe Photoshop for this purpose.
Routine Builder and Disc Library
In addition to the routine builder, where users have access to routines prepared by Cleo and packed with data, there is also a Disc Library where exercises are categorized and stored. These can be unlocked over time and through a specific process.
Legal Pages and Basics
Necessary legal and personal profile pages have been added, along with screens for cases where the user forgets their password, wants to create a new profile, or delete their existing profile.
Today's Message
The dynamic astrological message on the home screen, which adapts to real-time data from the founder regarding astrological changes, has been revamped with a more captivating and user-friendly design.
Next Steps
Next Steps
• Extending the Routine Builder with more routines and adding screens for the routines that are currently still in progress.
• A walk-through of the app with pop-ups to help the user understand how the app works.
•Finding founders to build a definite team for the app.
• Extending the registration process with more intro screens that collect data from the user and their preferences for their daily routines.
Learnings
Learnings
I really appreciated this experience since it was my first time working closely with a developer.
In addition to that, I learned how to find a balance between independent thinking and working, incorporating my own thoughts and perspectives into the process while still considering the wishes and feedback from the founder. Also, always putting the user at the center of the design and communicating clearly and precisely within the team — especially in a remote setting.
<—Previous
Next —>
<—Previous
Previous
Next —>