Invested in Me
UX Design Portfolio Case Study
Maryland Institute College of Design Project
Build a mobile app prototype that allows AND motivates anyone to track their overall health and wellness in five categories.
How might we develop a high fidelity prototype for a health and wellness app (mobile) that provides true value to its users.
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.
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.
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.
Started by organizing the two goals for this page
1) choose your happiness level
I added as much direction over every component to help the user stay informed for their next decision.
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.
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.
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.
For the initial sketch, I aimed for something as simple as possible so anyone could navigate this app without confusion.
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.
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.
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.
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."
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.
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.
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.
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.