UX Case Study 1 | KR Visuals

Kasey Robinson

Invested in Me

UX Design Portfolio Case Study

Maryland Institute College of Design Project

TOP OF PAGE

Build a mobile app prototype that allows AND motivates anyone to track their overall health and wellness in five categories.

The Challenge

How might we develop a high fidelity prototype for a health and wellness app (mobile) that provides true value to its users.

The Solution

Design branded components for app

Develop concepts for user experience and user flows

Define a type style and color palette for the brand

Build a prototype

Usability testing

Happiness, Habits, Tasks, Diet, & Exercise.

This project was accomplished using - Sketch, Adobe XD, Adobe Illustrator & Adobe Photoshop

The Process

(In Order Left to Right)

Mid-Fidelity Wireframes

Hi-Fi Wireframes

Hi-Fi Prototype

Research + Brainstorming

Brainstorm

Screen Shot 2021-06-29 at 4.53.04 PM.png

I started by researching other health and wellness apps and noticed there was a lack of apps that allowed users to track more than just one element to health and wellness.

Screen Shot 2021-06-29 at 5.18.47 PM.png

Screen Shot 2021-06-29 at 5.32.42 PM.png

Brainstorming on Categories for Health & Wellness

Very Rough Sketch of App Login Screen

My method for brainstorming is photographed above. I love to work my thoughts out on paper.

Initially, I struggled with visualizing a design for the way the users tracked their progress. Then I remembered a popular app for investing in stocks, and decided to let their design inspire my app.

Proto Personas + User Flows

Personas

Barbara

Screen Shot 2021-05-25 at 10.19.42 PM.png

Learn More About This User

User Stories & Flows

Amanda

Screen Shot 2021-05-25 at 10.19.31 PM.png

Learn More About This User

User Stories & Flows

Julio

Screen Shot 2021-05-25 at 10.19.19 PM.png

Learn More About This User

User Stories & Flows

Creating hypothetical users was fairly easy for this project, as I initially intended for this app to serve any user from any background. The challenge all boiled down to their characteristics and their desires to make them an ideal user for my app.

This ultimately helped me determined what problems my app needs to solve.

You can find that information in the buttons directly above along with the user stories that I developed as fuel for my wireframes.

Wireframes

(Inspired by the stock investing mobile app, Robinhood)

"Happiness Stock" Wireframes

(Links to prototype at bottom of page)

Hi-Fi

Lo-Fi / Initial Sketch

Screen Shot 2021-06-29 at 7.28.30 PM.png

Started by organizing the two goals for this page

1) choose your happiness level

2) write a journal entry.

I added as much direction over every component to help the user stay informed for their next decision.

Mid-Fi

Screen Shot 2021-06-29 at 7.38.48 PM.png

I chose to keep a portion of the top of the Home Screen at the top to see your overall progress while making your decision.

I wanted the app to be colorful and friendly, so I made a lot of the buttons vibrant.

Mid-Fi Updated

Screen Shot 2021-06-29 at 7.42.33 PM.png

Based on feedback, I decided to take a step back on the color.

The face emoji's don't turn a color until the user clicks it.

This allows them to clearly see which option they have selected.

Screen Shot 2021-06-29 at 7.43.42 PM.png

I took away the ability to see their current stock value so the user can focus on what they're doing.

I also updated the back button to simplify the page.

The lock component is now green and text was simplified.

Home Screen Wireframes

(Links to prototype at bottom of page)

Hi-Fi

Lo-Fi / Initial Sketch

Screen Shot 2021-06-29 at 7.16.43 PM.png

For the initial sketch, I aimed for something as simple as possible so anyone could navigate this app without confusion.

Mid-Fi

Screen Shot 2021-06-29 at 7.53.59 PM.png

I used my initial brand color, purple for the text. I made the stocks borders green to represent growth.

I used a light green because I thought it had a cool glow to it.

Mid-Fi Updated

Screen Shot 2021-06-29 at 7.55.33 PM.png

Screen Shot 2021-06-29 at 8.01.27 PM.png

The colors on the text were updated to fit the brand identity.

The logo got updated due to the responses in my usability testing interviews.

I added the overall happiness level of the user directly next to their total investment so the user can see where they're at that day.

All green elements got darker to create better contrast while gaining a softer aesthetic.

When developing my wireframes I really focused on the feedback that was given to me from my instructor in this class and from the 5 people I had test my prototype. Being an artist first, and a designer second, I understand the value of refining work, and going over something multiple times to get the best result. Having different perspectives helped speed up this process. Attention to detail is one of my strong suits.

Usability Testing

Testing

I struggled the most with this step due to the lack of time in my schedule.

Ideally, I would have had users that met my target demographic test my app, but since I had very little to no time that week to go out and recruit people, I simply had my friends help me out. Unfortunately they are all roughly the same age, and all male.

I still came out of this stage with some critical info that helped me assess what needed to change within my wireframes.

Screen Shot 2021-06-30 at 9.14.34 AM.png

The first immediate change was turning my black heart logo into vibrant pink. Users complained that it made them feel like they were "bad" or not in a good mood. They requested a color that made them think and feel like they are "healthy."

Screen Shot 2021-06-30 at 9.18.16 AM.png

The other immediate modification I made based on feedback was reducing the amount of red used in my "skip" button. My instructor said it usually means there's an error, one user said it drew too much attention, and another user claimed it made them want to press the red button, which isn't what the goal is.

To keep the attention focused on the goal, I made the submit and skip button less busy.

Main Takeaways from Testing

1) My app is fairly easy to navigate. Direction + communication is clear.

2) Some terminology is messy. Could be cleaner.

3) I have all the key information users need to make sense of the app

4) The overall design could be improved. Colors, etc.

Brand Development

Branding

Design Principles

Logos +Type Style + Color Palette

App Components

Developing brand identity and keeping the components of the app within those design principles is one of my stronger abilities. I thoroughly enjoy defining and refining the design. The challenge that came with this app was defining the design principles that made sense for the brand. The other challenge was deciding when and where to use color, and when to keep things neutral.

As I continued refining the design, I realized that splashes of color were the most impactful. I want to make sure this app makes every user feel secure and confident using this app, and too much color could potentially turn off older demographics.

A lot of the design was inspired by Robinhood, a very user-friendly, yet professional, app to invest in stocks.

Prototyps

Happiness Investment History

This project challenged me to really manage my time as best as I could. I also learned how to use Adobe XD for the first time, which was fun yet challenging. I learned how to create an art board and develop design principles. I've always designed and created without those elements, and having art boards and components is very crucial to the process for building a prototype for any mobile or web app.

If I were to do anything differently, I would have dived deeper on my usability tests, trying to get more critical feedback from the users testing my prototype.

If I were to continue developing this app, I would develop each of the tutorials for each of the remaining stocks. I would also find new users to test my app, and find users that are from a range of demographics so I get the most feedback that I could possibly get.

Thank you for your time!