Maka Health

The solution was an MVP mobile app of their beta desktop app featuring Maka Health’s main Web3 features such as MakaCoins, Maka Score, Maka Wallet and the Maka Marketplace.

MY APPROACH

Understand + Define (Maka Health Litepaper, Competitor Analysis/Research, Sketches)
Ideate + Collaborate (Sketches, Lo-fi Wireframes)
Prototype (Hi-fi Wireframes, Prototype)

The Problem

*Usually my approach is more empathetic to the user, user research based, and validated through testing, but due to the timeframe and deliverables needed, I pivoted to a more deliverable-based approach.

Maka Health provided us with the company litepaper, competitor analysis and customer data so that we could understand the purpose of the company, the scope of the project, and the features that we were to implement on the app.

The company already had a branding in place we could implement. We were given some rough sketches and a user flow which would help us figure out the what kind of layout and information would be on the screens. I was responsible for the Marketplace screens.

Understand + Define

Designing a Prototype for Investors:

Maka Health needed to find a way to implement their beta desktop app into an investor-ready mobile app with their Web3 features. The goal was to have a high-fidelity clickable walk-through of the iOS-based Web3 token/app, wallet, and product marketplace.

Ideation

After some feedback and feature discussions, I designed these lo-fi screens of the marketplace that addressed the user and client needs of implementing a search bar and a ‘Recommended’ section.

The sketches provided by the company of the 4 main screens.

From synthesizing the research and assessing the sketches, I crafted my version of sketches of a potential home and marketplace screen.

The challenge was that there was a lack of information architecture given so that made it difficult to design out screens without fully understanding what was going to live on those screens.

The New Solutions:

For all the information to live on one main screen I designed a solution in which a small navigation bar would be on the top of the screen.

For the ‘Wallet’ screen, I adjusted the previous design to create better visual hierarchy.

For the ‘Activate’ screen, due the amount of text required, I created a carousel of text cards so that the information was easier on the eyes to digest and not as dense.

My hi-fi solution:

High Fidelity Screens
Through more meetings and information provided, I was better able to formulate a design that would encompass all the necessary components of the marketplace screens.

My UI designs got passed and was ready to be prototyped. I was then tasked on figuring out a better design solution for one of the more complex screens, the Wallet screens.

Final High Fidelity Screens of the Marketplace + Wallet/Activate

The goal was to encompass all the information and text required on one main screen while still maintaining the product vision and visual appeal.

*A different designer created these lo-fi screens (bottom left) and I helped design them into hi-fi screens (bottom right) with this goal in mind.

Different designer’s lo-fi solution:

View the full working prototype here

*The Wallet/Activate screens were made in collaboration with another designer.

Design Style Guide

Reflections

Due to the nature of the startup, there were many challenging obstacles. I was designing specifically for investors rather than users and the stakeholders were still figuring out their information architecture. Thankfully, I had a team of designers to help navigate this problem with a different process and also help the stakeholders make decisions with UX practices in mind.

This project taught me to be an effective communicator and team player. It also gave me the opportunity to guide and educate the clients to understand UX best practices and push for the importance of these practices.