UI/UX Project: Wellness App — Building things!
I’m currently working on a project for the National Wellness Institute and just completed the second phase of what I’m building for my UI/UX bootcamp at Ironhack’s Miami campus.
In my last article, I discussed specifically getting started with this project — first, I needed to pick a topic (I chose Fitness). I then performed user research to find out what my users want out of a fitness app. Check out my article “UI/UX Project: Wellness App — Survey Time!” to learn more about how I determined what features to develop and test with my audience as I develop my app to meet the following requirements:
- Provide a way for users to track their progress
- Push the users to commit to a healthier lifestyle
- Design the UI to reflect a fresh, updated image
Following organizing my user research and interview data, I began sketching out hand drawn low-fidelity previews of what the app could look like. [Side note: I got index cards with a dot grid on them and they are so awesome!]
Here’s my low-fidelity work, which I uploaded to POP, the Marvel App for prototyping on paper. Here’s the preview:
Information Architecture:
While sketching, I also thought about the information architecture and performed some card sorting activities to aide in organizing my information. Information architecture (IA) focuses on organizing, structuring, and labeling content in an effective way. The goal is to help users find information and complete tasks. Always include IA as part of your development processes because if you don’t have this step done, you won’t know what pages you need to build!
Next up, I took the information architecture above and mapped it out into a user flow:
Mid-Fidelity Wireframes:
By this point, I was ready to work on my wireframes. I built a mid-fidelity prototype in Sketch and linked everything together in Invision.
Heuristic Analysis:
Once my prototype was built, I went through an analysis procedure to ensure it adhered to the Ten Usability Heuristics, a formula for successful UX created by Jakob Nielsen.
Tip: A great tool that helps you analyze sites and apps for this activity is this browser extension created by UXCheck.co!
Usability Testing:
It’s important to always be testing your design — every step of the way! This is the perfect opportunity to see if what you built makes sense and meets user expectations. To do this, don’t just hand someone you know your app and let them independently test it. Find someone you don’t know to test the app — strangers are more likely to give you honest feedback. Build a script to follow, including an introduction, the framework for the task to be completed, and what you want the person to do while they test the app.
My method was to sit in Funky Buddha with a “wingman” who was clearly more extroverted than I am. This person went around gathering testers for me, and I bought them all beers along the way. I ended up with awesome feedback and organized it into buckets — what the user tested, what they said, and how I would fix it.
Revisions to Mid-Fidelity Prototype:
What good is user feedback if you don’t implement it? I ended up revising some things in my wireframes. For example, I removed some title background colors that didn’t help users determine what my page was about — they were distracted by the stark contrasting colors. I also revamped my onboarding process to add in some interactions for where the user could tap to select things, since one of my users clicked through my prototype quickly and it was obvious that the meaning of the pages was not registering well with him.
Final Mid-Fidelity Prototype:
My prototype can be previewed with this invision link.
At this point I’m confident that my mid-fidelity prototype is ready for my next learning module with Ironhack — Visual Design (which I am so, so excited to learn about). I really enjoyed putting this project together up until this point, so it’ll be really fun to get moving on what I want it to look like next. I’ll be writing about that experience in a future article, so stay tuned!
