This week, I’ve been producing medium fidelity mockups / prototypes by iterating upon my initial wireframes and feedback from the usability testing with my paper prototype. The intention of this process was to produce a professional-appearing prototype that more accurately depicted the design of the mobile experience. Due to the quick and cheap nature of their creation, paper prototypes lack many basic elements that their medium fidelity counterparts offer, such as accurate user interface elements (imagery, graphics, colours, etc) as well as typefaces and font sizes (Bowles and Box, 2011). By producing a prototype at this medium-fidelity level, the results could be presented to key stakeholders to reduce any ambiguity surrounding the UI elements and encourage them to offer constructive criticism on the newly included. Of course, usability testing could also be carried out at this fidelity level too.
Paper Mockups
To begin, I started by colouring my previous wireframes, just as a quick and basic visualisation. The thought process involved in this process was more useful than the final outcome – as I was colouring, I made a mental note of where colour contrasts would be important, such as text fields and buttons, and how many different colours and shades may be required.
To save on time I coloured only three of the wireframes. I selectively chose these three as they contain many of the elements that would be in the final prototype: text fields, Calls to Action (buttons), images and graphics, and darkened areas.
Proposed Branding Changes
Next, I began to use Keynote to create a mockup that was akin to how websites look on mobile phones. Apple’s Keynote software had been previously recommended to me due to its ability to mimic the behaviour of interactive web applications, and worked brilliantly in my previous projects, so I opted to use it again (Bowles and Box, 2011). Apple supply a Keynote file and Human Interface Design Guidelines containing many of the graphical elements found on its mobile operating system, iOS, allowing designers to create visually accurate medium-fidelity prototypes (Apple, 2019).
One of the first steps involved in the design process was to establish any changes that might be required to the Sobsersauce branding, then decide whether these might be acceptable if this were a live brief. In line with one of my objectives, I intended to make the Sobersauce branding more prominent on the mobile website, so I borrowed their blue colour for the website’s background. I then chose a darkened version of the blue and paired it with the red colour that Sobersauce currently use for their buttons. The distribution for these colours would follow the 60-30-10 rule (Munro, 2019) – a rule taken from interior design that is frequently being adopted by UI designers for mobile applications to “create a sense of balance and allows the eye to move comfortably from one focal point to the next” (Adelugba, 2020).
“…you need to use 60% for your dominant hue, 30% for your secondary color, and 10% for an accent color” (Munro, 2019)
Changes to the branding guidelines were also needed regarding the typeface. To increase the brand presence, I decided that the “College” typeface could appear more frequently, rather than just within the logo, so I included it for all headings. Some adjustments were also needed to the font sizes across the website to provide hierarchy – I planned this using the Type Scale tool at www.type-scale.com.
I was aware that some alterations to these sizes may be needed when interpreting the medium fidelity prototype as a high fidelity version, and I would be prepared to revisit these adjustments again later.
Creating the Medium Fidelity Mockup
The following images and ISSUU presentation detail the iterative development of each webpage in the prototype. Some webpages are divided into upper and lower portions of the page, due to limitations in the phone screen size.
Mockups of each website took place across three stages:
Stage 1 – Building the prototype exactly as depicted in the paper prototype including any remedial work from usability testing. Some imagery and graphics included
Stage 2 – Experimenting with blue text to increase brand presence
Stage 3 – Experimenting with blue background and white text to increase brand presence (preferred final option)
Blue text on a white background produced a low colour contrast that was not complicit with WCAG AA standards. The reversed option (white text on blue background) was compliant however. In some areas, WCAG AAA was achieved.
Producing the “Shop Beers” page was particularly challenging due to the amount of different elements on the page. This became remarkably easier when I considered two of the gestalt design theories: proximity and similarity. This allowed me to separate most of the user interface elements into sections using proximity and similarity, relying on the users’ brains to perceive the patterns and understand the groupings (Hagen and Golombisky, 2017). For example, the products below the “Shop Beers” header are clearly search results as they appear visually very similar to each other and are presented in a grid formation. This is distinctly a separate section from the navigation bar and filter/sort functions, as there is more negative space (in terms of proximity) between the two sections.
I really enjoyed creating the pop out screens and believe that this is a unique feature of the website design. Two interesting features of this page are the darkened background and the red Call to Action button. When the popout appears from the ‘Show Beers’ screen, the background is darkened to focus the user’s attention on the product page. This is also particularly useful for users living with cognitive impairments who may struggle to focus on the new pop out when they can see a lot of the background elements.
Continuing Sobersauce’s branding guidelines, I’ve maintained the use of the colour red in primary buttons that are Call to Actions. Using red for a button is similar to colouring a ‘Sale’ sign as red in a shop window. Colour theory dictates that this is an eye-catching method that “causes consumers to react faster and more forcefully”, potentially accelerating them into a sale (Elliot, 2015). Alternative buttons are either coloured as a dark grey, contrasting the background blue, or tertiary buttons are presented as usual hyperlinks, underlined to differentiate them from body text.
As illustrated in the paper prototyping, tapping anywhere else on the darkened areas will bring the user back to the ‘Shop Beers’ page. However, this functionality is making an assumption that the user is aware of this behaviour pattern on mobile websites. To avoid any confusion I have also included a cross in the top left hand corner of the pop-up box. This cross is similar, and will behave similarly, to the cross in the top-left or top-right corners of applications on computers and mobile devices.
One piece of feedback that I gained during my first usability test was that the user would expect search results to be intelligent. In other words, as they typed the name of the product, they expected the website to begin producing results instantly then they could then click on the matching result when it appeared. Above, I’ve demonstrated what that would look like. It was actually fairly simple to create, as it is mostly an extension of the search bar. I’ve used a white bar as a background to indicate that an option has been selected/tapped. Slight differences in font such as italics are used to indicate user-entered text and informative text, whereas search results are presented as normal. I chose to use the variation in text to indicate these differences rather than colour as it would be more accessible to users living with vision impairments.
When producing the prototypes, there were some unexpected requirements that were necessary to create a noticeable colour contrast between different elements. Above, I chose to differentiate text fields from the background by making them a slightly darker shade of blue and surrounding them with a white outline. By using two methods to differentiate the text fields from their background I have tried to create enough colour contrast to satisfy the web content accessibility guidelines to AAA compliancy levels.
Please click on the below ISSUU presentation to see how each webpage was iterated upon to produce the final medium-fidelity prototype.
References
Adelugba, A. (2020). How the 60-30-10 Rule Saved the Day. [online] Medium. Available at: https://uxdesign.cc/how-the-60-30-10-rule-saved-the-day-934e1ee3fdd8 [Accessed 12 Apr. 2022].
Apple (2019). Human Interface Guidelines. [online] Apple.com. Available at: https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/ [Accessed 6 Jul. 2021].
Bowles, C. and Box, J. (2011). Undercover User Experience : Learn How to Do Great UX Work with Tiny budgets, No time, and Limited Support. Berkeley, CA: New Riders.
Elliot, A.J. (2015). Color and Psychological functioning: a Review of Theoretical and Empirical Work. Frontiers in Psychology, [online] 6(368). Available at: https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4383146/.
Hagen, R. and Golombisky, K. (2017). White Space Is Not Your Enemy : a beginner’s Guide to Communicating Visually through graphic, Web & Multimedia Design. Boca Raton, FL: CRC Press, Taylor & Francis Group.
Munro, L. (2019). UI Color Palettes & Color Schemes. [online] Adobe XD Ideas. Available at: https://xd.adobe.com/ideas/principles/web-design/ux-of-color-palettes/ [Accessed 11 Apr. 2022].