Week 7: Prototyping & Usability

Wireframing

I started sketching my wireframes in full with only a few digital versions on Balsamiq. Although I’d roughly sketched what I thought each screen would look like, I didn’t have the confidence to show these to people to gain their opinions or test my ideas. I then began creating my high-fidelity wireframes in Figma and these constantly evolved the more I designed.

In creating the high-fidelity wireframes, I was better able to visualise the user journey and build an understanding of how my designs might evolve into a user-friendly experience. Again, I had little confidence in showing my unfinished designs to people throughout but have learnt that this is essential to grasp how others perceive and interact with the app. When testing my designs, I found it helpful to complete the usability testing plan outlined in the lecture material. This helped me realise the goal of individual tests, how they’d be conducted and what measures of success I might consider.

Prototype

After getting started with creating an interactive prototype, I really enjoyed the process even though it was challenging at times. I touched on animation when trying to simulate a button press or selection and I feel that developing my skills in this area would be beneficial going forward. Some of my classmates have created animations to use in their prototypes and I’m in awe of what they’ve created. I don’t have the time to explore this fully right now, but it’s certainly something I’ll revisit in future modules.

My experience of learning Figma has been quite a steep learning curve and when I began adding interactive elements, I quickly discovered the additional complexities involved. Having watched a variety of tutorials on YouTube and LinkedIn Learning, I noticed the new, granular level of detail by which I was inspecting my designs as I readied them for interactivity. I learnt more about creating components and how variable components can be used to create animated interactive elements. I also explored the basics of auto-layout and how it can improve efficiency on larger projects, as well as its use in responsive design. The tutorials were immensely useful and I was able to quickly apply the techniques demonstrated to my prototype as I learnt them.

Usability Testing

Usability testing was a slight mystery to me in that I found it difficult to know when to test my ideas and designs with people. I felt rather self-conscious and unsure about presenting my rough sketches and even my high-fidelity wireframes. At this point, I was also exploring the possibilities of interactive prototypes in Figma which was completely new to me.

Upon reflection, I’ve found that I need to bite the bullet and test my designs sooner. Although it may feel a little unnerving to begin with (Hertzum 2020), I’ve realised the importance of testing early and frequently to aid in the continual development of a product. Similarly, when seeking feedback about my designs, I need to be more specific in my request which may require some planning prior to meeting with my classmates or a client (Lisefski 2019). I found myself simply asking for people’s general thoughts and this didn’t generate useful feedback.

Although my tests were generally successful on this occasion, I can imagine times when this may not be the case and the potential impact of realising failures at the last minute. I need to gain experience in communicating my ideas and presenting my unfinished designs to gain feedback earlier on.

---

Challenge Activity

1. Write two tasks you could use to test the usability of your own product

• You’re in Bedford, England. Plan a trip to Aberdeen.

• You’re going to visit your family in Aberdeen. You have a tight schedule and want to get there as quickly as possible, then return two days later for less than £130 overall.

2. Create a three-page wireframe prototype that will facilitate testing your tasks

3. Identify at least three design patterns that may apply to your UX Prototype project and explain why you chose them

Carousel - This would be useful in two parts of my proposed designs. I plan on having a place for users to store details about the luggage they own. This would include a picture of the item, along with details about each, and could be nicely presented on a carousel. Similarly, on the entertainment screen where users can see suggested media downloads from their subscription services, a carousel would be useful for scrolling through the suggested items.

Page headers - Headers will be used at the top of each screen to indicate the user’s current location in the flow, as well as to describe the page contents.

Accordions - Once a user has generated their packing list, multiple categories will be shown depending on the user’s selections when creating the list. In order to minimise certain categories, for example, if all the items in a category had been packed, the user would be able to minimise the category, meaning only the category heading would be visible. Similarly, in the journey timeline, if the user had selected multiple dates of travel, they’d be able to select the heading that displays the date, which would minimise all associated events for that date.

Select multiple - When creating a packing list, users will be able to select multiple categories to indicate what they’ll be doing and, thus, need to pack for. Users will also be able to select multiple checkboxes in their subsequent packing list.

Progress indicator - The timeline feature shows a linear list of each journey element. It uses a thick line to connect the icons associated with each element. For example, a user may get a bus then a train, and the timeline would see a thick vertical line going from the bus icon to the train icon.

---

References

HERTZUM, Morten. 2020. Usability Testing: A Practitioner’s Guide to Evaluating the User Experience. San Rafael, UNITED STATES: Morgan & Claypool Publishers. Available at: http://ebookcentral.proquest.com/lib/falmouth-ebooks/detail.action?docID=6138240 [accessed 26 Apr 2022].

LISEFSKI, Benek. 2019. ‘How to Give and Receive Great Design Feedback’. Medium [online]. Available at: https://uxdesign.cc/how-to-give-and-receive-great-design-feedback-ca5e37eea4b9 [accessed 26 Apr 2022].

UNSPLASH. 2018. Photo by Freestocks on Unsplash. Available at: https://unsplash.com/photos/40k6ZqbsXuo [accessed 26 Apr 2022].