When checking out, the page assumes the user will check out as a guest. The checkout flow by default, does not force the user to login or create an account. When filling out the form fields, email is listed with an asterisk so the user will be aware that this information is mandatory to complete on the page.
Maka Health:
Helping a Startup by Designing a Prototype for Investors
By Jennifer Christensen
Maka Health is a startup company seeking to become a leader in the functional wellness healthcare community online.
.png)
Jump to a specific phase of my case study
Table of Contents
What Can Maka Health Do?
Users will fill out a functional wellness questionnaire. Based on the answers to the questionnaire, the app will recommend educational videos, products, and services related to health.
Users will be given a Maka Score - the more engaged they are in the app, the better their score will be. In the future, Maka Health also plans to release their own cryptocurrency called MakaCoin. Users will spend MakaCoin to buy other products in the marketplace area of the app. The more engaged users are, the more chances they have to earn MakaCoin.
My Role: UI/UX Designer
I worked alongside 3 other UI/UX designers.
I created:
-
UX Audit
-
Home Screen for mobile app/navigation bar
-
Style Guide
Timeframe and Constraints:
-
1 month contract position
-
Must keep the dark UI style and fonts consistent with the aspects of the product that already exist
Tools Used:
-
Figma
-
Slack and Zoom for communication
-
Pen and paper
What stage of development was the company at?
Main goal of this project:
-
Maka Health had a beta desktop site available internally (not public)
-
No mobile app existed yet
-
Maka Health’s public facing website serves as a landing page to allow potential users to join a waitlist that will notify them when the application is live: https://www.makahealth.com/
-
Create a clickable hi-fi prototype for mobile devices, with the intention of showing investors what Maka Health can do. The prototype will show a few features and main screens (red route screens).
-
Create a UX audit of the existing desktop beta app and website.
Main stakeholders I reported to:
-
Chief Executive Officer/founder of Maka Health
-
Chief Strategy Officer and Co-founder
Target users for this project:
Potential investors
Main Challenges
Since the company was in early stages, it was difficult to pin down exactly what features to work on, to show investors.
At times during communication with the client, specific details of features were discussed in a group setting for the first time at the company. Therefore there was a lot of back and forth communication, and staying organized was essential.
The mobile app did not exist yet, so we would be the first designers to set standards and create a style guide.
My design process would usually look something like this:
However, because the goal was to make a prototype for investors, I shifted to a deliverable-based process. I would create a sketch, wireframe, or hi-fi screen, and get feedback from company stakeholders and the design team to make iterations. No user testing was involved because there were no users yet.
UX Audit
My first goal was to understand the features of Maka Health and how they fit together into the platform.
When exploring the Maka Health website/public landing page, and the unreleased beta desktop app, I found some issues with accessibility and consistency, as well as a few other usability heuristics. For more information on the 10 main usability heuristics, visit this article from the Nielson Norman group:
https://www.nngroup.com/articles/ten-usability-heuristics/
I created a UX audit as a 40 minute video recording. I was only contracted for one month to work with Maka Health, so this video would be valuable to the client in the future.
Sketches: Understanding and Narrowing Down Features
The CEO and founder provided sketches that she created, for main screens that should be included in the final hi-fi prototype. The design team worked together to break up the work. I volunteered to create the home screen and navigation bar:
.png)
Home screen sketch from the Maka Health CEO
My home screen sketch
Why did I create my own sketch of the home screen?
I wanted to create a happy medium between the sketch the CEO provided, and ensuring common UX principles were followed. I also ensured that users could navigate to items that were found in the desktop app (and were left out of the conversation when we discussed items to be included in the mobile app). These items in the sketch are included in the hamburger menu.
What was most difficult about designing the home screen?
The home screen needed to be a central hub for showing the user what they can do inside the app. A lot of these design decisions would affect all other screens as well, since I was responsible for creating the navigation bar.
The next step was narrowing down the minimum features needed.
Wireframes: Gamifying the Experience with a Score and Badges
Before the wireframes were created, I needed to understand the purpose of the Maka Score and the dial image that the CEO sketched for the home screen. I had not included this in my own sketch, and I received new information that this feature would be integral to the app.
Questions I asked stakeholders about the Maka Score:
What is the Maka Score?
The Maka Score is broken out into four badge levels: bronze, silver, gold, and platinum. The score will be a number from 1-1000 and the higher your score, the more items you can access in the marketplace. For example, a practitioner might give away a free session in the marketplace, and only platinum (highest) badge level users would be able to access this. More consistent engagement in the app will correlate with a higher score.
Does the Maka Score need to be included on every screen?
No, it's ok if the Maka Score is only visible on the home screen.
First wireframe of the home screen, including the Maka Score and dial at the top
Some items that changed from sketching to wireframing:
-
Navigation bar - to be more consistent with the desktop app’s navigation, the main features of the product (booking practitioners, marketplace to buy items, and educational videos) were included in the final bottom navigation bar.
-
At this stage, additional functionality was communicated to the design team, from the CEO. More icons were needed at the top of the screen, such as a notifications and badges.
Dashboard "home" screen in the beta desktop app. The main navigation options are in the left side panel.
Wireframe of the navigation bar for mobile
Wireflow from left to right - Home, Hamburger menu, How it Works opened, How it Works off the home screen after being clicked
The stakeholders wanted the home screen's flow to include clicking "How it Works." If a user was new to the app, they would be able to view this information and the card will fall off the screen after viewing. Users could review the information again but it would be housed in a separate area of the app, so the home screen would not remain as cluttered.
Main Challenge After Creating Wireframes:
The CEO and design team all agreed that the top area of the screen seemed cluttered in the wireframes. But we still needed to find a place to put the additional components.
Hi-Fi: How Did I De-Clutter the Home Screen?
Removed the hamburger menu from the top bar: information that would have gone under this area will be housed under the profile/avatar icon instead
Since the bi-weekly trend is referring to the Maka Score, I put it directly under the score number in the dial
The Maka Health logo was removed from the home screen since it does not serve a purpose in the app, other than branding
Original wireframe of the home screen
Final Hi-Fi home screen - illustrations and icon images were provided by Maka Health
Is the Customer Always Right?
When working with clients, the goal is to ensure maximum usability and follow UX best practices, while also creating the client’s ideal vision.
Example: The stakeholders wanted to include a small (i) icon for information, next to the Maka Score dial. The user could click on this (i) to see more score information and better understand this feature.
I replied that this feature is usually seen on desktop, and not mobile apps.
Why?
The (i) would still need to be big enough to pass accessibility standards, and be tapped easily by human fingers. It would take up too much space.
I created a mockup of what it would look like, so the client could see the example. The stakeholders agreed - the (i) would not work for the mobile platform. We continued without it, and decided to put more information about the Maka score under the profile/avatar icon in the top right corner instead - that way users could still get the info.
.png)
Early Hi-Fi mockup with information (i) icon
After multiple iterations and back-and-forth communication with the stakeholders, the final home screen was born. Here are some of the iterations from start to finish:
Main Problem:
Home screen was cluttered - how do we fit everything the stakeholders want, on the screen?
Solutions:
-
Original ideas for the hi-fi home screen were too colorful and increased cognitive load
-
Arrow was removed from the Maka Score dial to decrease the amount of components
-
Some components were moved out of the bar at the top of the screen, since it was cluttered. Instead of a thick dark bar at the top, I added a lighter, transparent area for the top navigation that blends in better with the background
Final Home Screen Flow:
Illustrations and icon images provided by Maka Health
Reflections and Conclusion
Possible Next Steps for Maka Health:
Maka Health was satisfied with the results of this project and will be using this Figma prototype to show the product to investors.
I advised the client to validate their product by performing user testing with the prototype as well, to ensure that users do not encounter navigation issues and are able to understand the app.
Now that a style guide is created, and a UX audit has been provided, future designers can use these to build the rest of the app's features and revise previous designs in the beta desktop app.
What I Learned:
This was my first time designing a prototype specifically for investors, as opposed to the end user, so this framed my thinking while going through the process.
Since this was the first mobile prototype for Maka Health, some aspects of the design were items that the stakeholders at Maka Health had never thought about before, in detail. One main challenge was communicating with the stakeholders and encouraging them to make decisions about details and engage in design thinking. I asked a lot of questions and collected a lot of information. Once that was accomplished, and the design team had a better view of the ‘big picture’ and overall goals, it was much easier to design and iterate.
I also gained a stronger ability to marry UX best practices with the needs and wants of the client, and find a happy medium. Knowing how and when to back up my arguments with data, or by visually showing how a certain aspect of a design may not work in practice, is very helpful when communicating with clients.
Overall, this project showed me what it’s like to work with startups without a public, existing product yet. I had the opportunity to not only add value to the specific product, but to educate the client about UX concepts and best practices, which will help them grow their business in the future.