Case Study
Beyond Habits
Fostering healthy habit building while raising funds for sustainable charities.
Charity profile
Beyond Habits is an app that helps build habits efficiently. The company is based out of Germany and also raises funds for charities by allowing the user to donate to a selected charity if a user fails to complete a challenge. This project was a redesign of the existing app, as well as adding key features based on the research conducted and the client's vision.
The Problem
Beyond Habits needed an update on their existing app. Not only was the UI out of date but the UX needed polishing as well. They wanted to develop something that was more playful, yet cool, simple, and minimalistic. The client reached out to us to design a platform that allows users to engage with challenges to form habits, as well as donate to sustainable charities.
The Solution
After conducting an evaluation of the existing product as well as a competitive analysis, the team and I designed an app that enhanced the UX and UI of the existing product. We created a product that fully captured the client's vision while maintaining industry best practices.
- Tools
- Figma
- Slack
- Zoom
- Loom
- Google Docs
- Process
- Discovery
- Ideation
- Design
- Dev Handoff
- Reflection
- My Role
- UX/UI Design lead
- Scrum Master
- Team of 5
- Timeline
- 12 weeks
Step 1 of 5
Discovery
First Meeting
To start the project, I scheduled a meeting with my team to familiarize with the existing product and to address the first phase of the project. During the meeting we reviewed project assets and discussed schedules, deliverable dates, work flow, tools, and first steps.
Together we conducted a heuristic evaluation of the existing app as well as a competitive analysis. This was where we identified design flaws within the existing product and began to brainstorm solutions.
Original App
The existing product was in German. We translated screens so we could understand each function before redesigning.
Welcome
Heuristic Evaluation and Competitive Analysis
The original app was called "Cycler" however the client renamed it to "Beyond Habits". The client felt that the current app was "solid but not stunning". The app itself was originally in German; for design purposes we ran the file through a translator to better understand the functions of each screen.
During the evaluation, the team and I found flaws in the UX and inconsistencies in the UI. We agreed that the current app was not very "playful", "cool", or "minimalistic". To combat this we engaged in a competitive analysis of similar products that would help us gain insight and inspiration to use in our designs.
Client Questionnaire
In order to define the key qualities required to satisfy the client and to develop great UX, the team and I developed a questionnaire. Here I was able to ask questions that led to the uncovering of how the client would like to see the app.
- What features do you like / don't like from competitors?
- What do you like and dislike about your current design?
- What are 3–4 user features you would like us to focus on?
By asking these questions I learned that the client wanted the designs to look gamey and playful like some of their competitors while remaining simple, professional, and stunning. I also learned that the challenge feature was the most important addition to the client.
Step 2 of 5
Ideation
User Stories
The client provided us with 6 user stories.
- As a user, I want to create an account and log in.
- As a user, I want to access my dashboard upon login and see the challenges I'm currently part of.
- As a user, I want to view possible challenges. I want to participate in a challenge.
- As a user, I want to view the charities I can donate to.
- As a user, I want to interact with the challenge I'm participating in. This includes completing the challenge and donating if I don't complete it.
- As a user, I want to access my profile.
User Flows
After examining the user stories, I initiated the development of user flow charts to give the team a visual of each story and how the user should flow through the app. I primarily worked on user flow 4 and assisted the team wherever it was needed to complete the project.
Creating these flows allowed me to see specific screens and the features that those screens would need. This was an important part of visualizing the designs and concepts of the app.
User flow 1: create an account and log in
Wireframes (Mid Fidelity)
To better visualize the screens and the user flows, we created mid fidelity wireframes. These wireframes served to showcase the layout of elements on each screen. I continued to work on user flow 4 and assisted with the wireframes of all other user flows. This was crucial to the design process. It allowed me to see how the user would interact with elements on each screen and to identify what would or would not work.
Step 3 of 5
Design
Inspiration
To align with the client's vision of a "stunning, cool, and gamey" app, I created a document containing inspiration from competitors and apps of similar style. The team and I took screenshots from various platforms and placed them into the document, we then discussed likes and dislikes of colors, fonts, styles, and layout within these apps. After conversing and discussing ideas, we agreed that we liked the UX and professional feel of the ShareTheMeal app and we liked the style and gamified nature of the Fabulous app. We often referenced these two products during our design phase.
Style Guide
To ensure a cohesive design approach within our team, we established a style guide document that acts as a central hub for design elements such as components, variants, text styles, font sizes, color hex codes, and unique screens used in various user flows. A key advantage of this style guide is its ability to edit a master component, automatically propagating those changes across all instances in our designs. This feature has significantly saved us time by eliminating the manual updating of individual instances.
Blue
Purple
Cyan
Ice
Silver
Ink
UI Iterations (round 1)
During this section, the team and I chose to create multiple iterations of the dashboard screen to show to the client. We wanted to do this to ensure that the colors and styles we made were within the client's vision. I worked on several dashboard screens that the team and I voted on to deliver the first round of iterations to the client.
In the image below, the client selected the middle screen to move forward with, however he had some suggestions and preferences with the design. He wanted the challenges to be more prominent within the screen as well as the charity cards to be more visually pleasing. After this was selected, we began to iterate on more versions of the dashboard to better accommodate the vision of the client.
UI Iterations (Final)
After several rounds of iterations, we were able to finalize the dashboard screen both meeting the client's vision and creating a design that was unique and met the needs of the user. These were the final designs that we delivered to the client; he chose the screen on the right.
Hi-Fi Wireframes
As we were iterating on the dashboard, we were also creating the high fidelity screens once we knew what kind of styles to move forward with. I continued to work with user flow 4 and assisted throughout the rest of the screens. The implementation of the style guide made this process smooth by allowing me to make changes to a master component rather than making changes to each screen manually. Below are the final screens that the team and I made; we went through several rounds of client delivery and screen iteration to ensure that the vision was met and that the product would be designed with attention to quality and detail.
Splash
Step 4 of 5
Developer Handoff
Annotations and Measurements
Once all screens were approved by the client, I began to close the project by creating a developer handoff document. This would allow developers and designers to easily read the designs and implement them accordingly. I used Figma's "measure" plugin to create accurate measurements of space between elements, padding, width and length. I then wrote annotations to depict what each element did and how the user would flow throughout the app.
Step 5 of 5
Reflection
Learnings
This project taught me many things; the most important thing however was how to be a leader. Starting the project was rocky with communicating with the team, especially those who lived in different time zones. After conducting the initial meeting and establishing a work flow, I was thoroughly impressed by how quickly and efficiently we came together.
My team was full of quality and dedicated designers and it was a pleasure to work with them. From them I learned communication skills, how to promote creativity, and how to think outside of the box. My favorite phase of the project was the UI Iterations where I was able to communicate with the client quite frequently to hone in on specific design choices that led to what we have finalized.
Moving Forward
Moving forward with this project I would like to implement a prototype and conduct user research to reveal design opportunities. I would like to implement further the social networking aspect of the app where you can share activity with friends and see their challenges.
Creating these designs was a pleasure and a great opportunity to improve my skillset.