(User Research and Interaction Design) — Design
The next step of our challenge was to select, from the many points we had, what we would work on for the re-design. Prioritization was a difficult part, and we as a team took some time to agree on the overall scope.
It was clear that a lot of overlapping existed between the Gymphobe and Novice personas, they both needed a better onboarding process, and more guidance within the app. So, we took those items as our main priorities.
We reviewed our “How might we?” done before the interviews and compared with the ones we had after the interviews, and we selected three of them to focus on.
With our priorities defined, we started to create a visual mood board, to get inspirations on what to bring to our app design. For this part, we also kept the focus on the Gymphobes and the Novice users.
Feel points we wanted to bring from a visual perspective:
- Body positive imagery;
- Broad and range people imagery (not gym/exercise fanatics);
- Clean design;
- Tips for newcomers, without gym language jargons.
All set, we split the work between us considering the main journeys:
- Login & Onboarding (Ellen)
- Landing page, plans & calendar (Rebecca)
- Workout execution (Mikey)
- Workout progress & User profile (Kivia)
Prototype
For my part of the journey, the workout progress and user profile, I started drafting paper wireframes, trying to include the key takeaways from our previous exercise.
For the progress tracking:
- It should be clean enough, so the user can understand the numbers and metrics they will see there;
- It should include an overall progress, but also a possibility of detailing each workout;
- The main metrics should be: workout minutes, active days, sets completed, and new workouts trained.
All this was discovered on the research part, and incorporated also taking into consideration the other steps of the user journey.
To turn them into a high fidelity prototype, we as a group created first our UI kit, with the elements and components we would need to use.
Usability testing and final results
With the screens created, the the prototype flow defined, each of us conducted at least two usability testing each (before the in class testing with our colleagues). We prepared the tasks to be performed by the users and the follow-up questions.
The feedback received was evaluated in group, and we decided to implement the most critical ones before our presentation to the class (because of the short timeframe, we would not be able to implement all of them).
The result of the screens for the progress tracking and profile after the feedback of usability testing:
Personally, the process of designing our prototypes on Figma was the most difficult part of the entire process. I have seen Figma few times before, and used it for very small things, but it was the first time I used it to design an entire application, so simple tasks that an experienced user would take few minutes, I spent some hours.
The testing phase of our application, was for me the most rewarding one, seeing the whole app working, being “used”, and be able to collect feedback for it, was an important and enjoyable task.
We finalized the project with our presentation, highlighting the main points of our re-design and our key learnings (Listed on the appendix section).
Previous: Research