From Wireframes to Hi-fi Prototype
Hey you can click this!
Week 8–10
Wireframes
After week 7, we started on the meat of the design project. We had the user flows figured out, meaning that we now knew what to make in order to test out our solution. Looking into the site map, also identified what screens and information was needed to realize the prototype.
It would have been great to have said that we followed the linear process of starting with a paper prototype and then scaling it up step by step from low fidelity to high fidelity interactive prototype, in actuality our workflow was more mixed as we jumped in with a digital wireframe.
Due to the time constraints of the project, the remote nature of our team as well as the impact of COVID-19 for group work, we did not have the luxury of sketching out our design first. Having said that it needs to be stated that sketching out a design is a great tool to test a ton of ideas without much commitment. With using digital tools, designers can and often do end up becoming detail oriented, potentially wasting a great deal of time when it turns out the direction of the design was incorrect.
Nonetheless, we forged on. Using Figma, the team and I created wireframes of each screen that the user would go through the user tasks. Because we had the user flows figured out, we created frames(Artboards) titled with the action that outlined what that page was in the flow.
To expedite the wireframe design, I created components such as buttons, text fields and image boxes so that less time was spent designing elements, and more time was focused on the layout of information and interaction. This was also a good way to get started with UI design, but I get to that later on.
Visual Identity
At the same time as the wireframes, we also started to create a collage of visual examples in order to assist in the design of the visual language for Polar Partner. Here we looked at other workout/fitness applications along with chatbot and messaging apps on the market and placed them on an axis of Hard/Soft and Dark/Light. By doing so, we have categorized the visual examples for us to reference back when we start visual design. The visual example board is a more lightweight and direct method compared to creating a moodboard, however it could lead to the design mimicking the reference too closely.
We also looked at Polar’s website along with Polar Flow’s UI to see how Polar is utilizing its branding and whether there were design patterns we could utilize within our prototype to ensure it stays true to the Polar branding. While visual design and branding is not part of the design brief, it cannot be understated that visual design can impact heavily on user experience.
Hi-Fidelity
Once we were done with the Visual exploration and wireframes, I started on scaling up the fidelity, taking notes of Polar’s branding and UI as well as current UI trends. Remember the components I built for wireframing? They came into play in a big way, as I created Components out of them. (If you are more familiar with Sketch, they are called symbols) Because of the way digital design is nowadays, designers tend to reuse the same components across screens. In this sense, what I am utilizing is Brad Frost’s Atomic Design Principles. In summary, screens are built out of groups of components like how atoms form molecules form organisms. If you are interested in UI design be sure to read more about this on his website:
https://bradfrost.com/blog/post/atomic-web-design/
Due to this modular approach in design, the end result is not only consistent throughout the prototype, but also a UI kit is created at the same time. Coupling that with a universal typography and color selection, the end result is almost a design system that can be utilized later on in following Polar Projects.
Here is a screenshot of my Figma Hi-Fi mockups:
Prototyping
Once the hi-fidelity design was completed, I used Figma built in prototyping tool to link the screens that were designed into a clickable prototype. This was important as it allows for us to simulate the end product to test with potential users. The closer the prototype is to a finished product, both functionally and visually, the more meaningful the feedback will be for future work. While storyboards and low fidelity prototypes are easy to create and test, they should be used as general concept validation as the gap between the tester’s understanding of the end result may differ greatly with the actual end product.
Another added benefit of using Figma to create the prototype is that it also integrates into the Maze testing platform we previously planned to use.
Evaluation Plan
Our final step of the project involves evaluating our prototype in order to validate our solution.
We created a test plan by first stating out the objective of the plan:
- Test the overall quality regarding the navigation and flow of the design.(Usability)
- Test how easy it is for the user to get the data they need. (Ease of use)
- Test if the partner is providing enough useful information for the user to reach their training goals (Informative)
- Test the Value Proposition the user finds in Polar Partner.
(Usefulness) - Observe any areas of hesitation, confusion, difficulty, etc. (Clarity)
Each objective has a goal attached to it as it helped us understand more clearly what the objective meant in the overall testing results.
All participants were to be recruited through personal networks of friends and family as well as co-workers And since Polar Partner was meant for frequent trainers that would use smart technology in the future, we also needed to vet our testers to fit a certain demographic:
Number of Participants: 4–6
Age Demographic: 20–49 Years of Age
Type of Trainer: Frequent Runners
The reasoning behind the type of trainer is due to the fact that our prototype and user flow was related to runner’s specifically. By recruiting runners to test the prototype, we can quickly and precisely understand whether they, a part of the target audience, would find such a product useful.
We then wrote scenarios that would allow the testers to go through Polar Partner and experience what it would be like to be guided by AI for training and recovery.
Scenario 1
Your name is Jake and you are a frequent runner who is using Polar Partner for a while. You want to improve your run, particularly your pace, but you are not sure how to do so. How would you find this information to improve?
Scenario 2
You have now learned how to improve your run, however, you don’t know what you should train now. How would you start your training?
Scenario 3
You have followed polar partner’s advice and ran 5km. Now that you are done with the run, find out and complete the polar partner’s recommended recovery plan.
Scenario 4
Now you have completed the Polar Partner’s recovery routine. Find out what other information Polar Partner can give you.
Because of Maze’s amazing setup and function, we were able to easily create our remote testing session, fitting our scenarios in and allowing testers to read and complete the tasks.
Finally we also plan to interview the participants after the testing in order to gather qualitative data on their experience. These questions will focus on the impressions of Polar Partner, the ease of use, as well as user experience and aesthetics.
That’s all for now and in a few days time, we’ll get to see the results of the test. Hopefully our testers will like Polar Partner just as much as we do!
See you next week!
