Category: DM7920 – Design Communication

Preparing to Create a High Fidelity Prototype / Proof of Concept

This week, I’ve been producing a high-fidelity prototype to serve as a final proof of concept (POC) for my client, Sobersauce. The intention of the POC is to closely replicate my final design, include all earlier iterations and refinements, and to present an interface that stakeholders can provide final criticisms on (Cronenwett, 2016). If required, stakeholder could decide to commission a final round of usability testing on the POC as it is a high-fidelity prototype, and this would enable them to gain rich feedback on newly included aspects such as transitions and realistic user interactions (UXPin, 2021). However, if they choose not to do this, then the prototype would serve as a useful tool for a collaborating with the development team, who will code the website to appear exactly the same as the POC (Ibragimova, 2016).

I decided to create the POC in Adobe XD, as this is a software platform that I feel strong at using. I had also identify a couple of features that I had limited experience in using, so saw this project as an opportunity to improve on those skills. I also knew that the software would allow me to create three separate user flows, so I could detail different aspects and tasks that might be performed using the website – adding products to basket, using the search functionality, and completing the checkout process.

Before I could start creating any prototype using Adobe XD, I had to import all of the elements that I had previously agreed to use – this includes the colour palette, character styles, and graphical elements such as logos, and imagery. Only minor changes were made to the font sizes, to fall in line with the iOS recommendations which I have tried to adhere to. 

I was able to source a selection of product images from the server source website, which I could include in the prototype. I also found a large amount of generic beer-based imagery from the royalty-free website, Pexels. Using imagery from this website for prototyping is advantageous because there is no requirement provide attributions, meaning I would not need to accommodate for crediting photographers within the UI. 

Creating the Proof of Concept

Once ready, I began the task of interpreting my Medium-Fidelity mockup designs as a High-Fidelity POC via Adobe XD. Of course, had these mock ups been subjected to usability testing I would also need to factor in remedial work. However this was not needed on this occasion.

Comparing the two iterations of design, it’s possible to see how I have made use of Apple’s Human Interface Guidelines, which included an updated version of Apple’s iOS system UI. The benefit of doing this is that I can provide an accurate depiction for stakeholders of what the website would look like on iOS if it was released to the public immediately. Stakeholders can also see how the website would interact with elements of an example smartphone’s UI, such as the navigation bar (bottom of the screen) and the system bar (top of the screen); any clashing of colours or overlapping of the system UI over the website UI could appear jarring or confusing for the user.

Once I had created a basic layout, I could begin experimenting with more advanced features they had limited experience of. The two main features for this project were ‘repeat grids’ and ‘states’. My intention was to make use of repeat grades to create search results that were linked via their proximity and similarity (gestalt principles) – once I had created one line of results, I could drag the repeat grid down to create as many lines of results as I required. This was remarkably easy due to the software functionality, however the difficulty came when adjusting the unique elements of each listing such as the price and rating. I found the repeat grid often tried to copy the changes I made to the rest of the search results. Eventually I overcame this as I began to understand the nuanced controls of the software. 

The next interesting feature that I wanted to explore in more detail was states. I have used these before and found them quite simple to use, although I wanted to challenge myself and create something a bit more meaningful with them. Firstly, I created the filter and sort functions as checkboxes – the default state would be an unchecked box and the total state (which would appear when tapped) would be a checked box. I challenged myself further by using this functionality to create the illusion of a numbered field that would increase from ‘1’ to ‘2’ when a ‘+’ button was tapped. When the user interacts with this aspect of the prototype they will believe that pressing the button will increment the number, however in reality what is happening is the ‘1’ is becoming a ‘2’ in a similar way to how the unchecked box becomes a checked box. This is a simple workaround to produce an effect that actually appears more complex. 

Having created each of the required webpages in the ‘Design’ part of Adobe XD, the next step was to link them together in the ‘Prototyping’ part. Mostly, this was quick to do due to the lack of transitions required. Unlike mobile applications, websites (and their conventions) restrict the animations/transitions between webpages. Generally once the user has tapped on an interactive element, the website quickly updates and there is little transition of note. 

That being said, the lengthiest part of this phase was creating the checkout process flow. To provide the illusion of completing text fields, I had to duplicate each page multiple times, with and without the keyboard. As the use of a tap on a field the keyboard would appear, they would then tap the keyboard to simulate entering data, and then the prototype would move to the next field. This is the typical behaviour that uses for experience on iOS, and for this reason I have tried to mimic it to provide a lifelike experience.

Final Proof of Concept

Below you will find my final proof of concept, demonstrated using three YouTube videos. Each video completes one of the user flows within the proof of concept. I have also included an interactive Adobe XD link that could be used as part of future usability testing and for interactive demonstrations with stakeholders. The interactive links do not require any further software, other than a basic Internet browser.

Flow 1: Adding Products to the Basket

Interactive link: https://xd.adobe.com/view/70d410f6-75a4-4624-9c69-ee2b1a465149-2587/?fullscreen

Flow 2: Using the Search Functionality

Interactive link: https://xd.adobe.com/view/084e8dec-f615-4b58-a306-0ed3c5ca819c-5d1d/?fullscreen

Flow 3: Completing the Checkout Process

Interactive link: https://xd.adobe.com/view/0f3733b0-f0da-4608-87a8-10becdc3066c-5a64/?fullscreen

References

Cronenwett, D. (2016). Hands-On Mobile Prototyping for UX Designers Online Class. [online] LinkedIn. Available at: https://www.linkedin.com/learning/hands-on-mobile-prototyping-for-ux-designers?u=89462170 [Accessed 3 Apr. 2022].‌

Ibragimova, E. (2016). High-fidelity prototyping: What, When, Why and How? [online] Medium. Available at: https://blog.prototypr.io/high-fidelity-prototyping-what-when-why-and-how-f5bbde6a7fd4 [Accessed 2 Apr. 2022].‌

UXPin (2021). High-Fidelity Prototyping vs. Low-Filedity Prototypes: Which to Choose When? [online] Studio by UXPin. Available at: https://www.uxpin.com/studio/blog/high-fidelity-prototyping-low-fidelity-difference/ [Accessed 2 Apr. 2022].‌

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].‌

Earlier this week, I built a paper prototype of my design for the Sobersauce mobile experience. The paper prototype is essentially a rough, pencil-traced version of my recent wireframes, which can be adjusted quickly using a pencil and rubber. My intentions were to put this paper prototype in front of a prospective user to gauge their reaction (and hopefully inform further iterations of the design) – I could then make design changes and decisions quickly, recording the adjustments directly onto the prototype (Bowles and Box, 2011). The most accurate option for testing my designs would be to produce the final product first and then test it, however, this wouldn’t be time-efficient or economical, so a paper prototype serves as the next best thing at this stage (Brown, 2007).

Having previously read Carolyn Snyder’s book “Paper Prototyping,” I had already picked up a few tips on conducting usability tests, however for my own personal development I needed to practice planning the usability tests and keeping them within a reasonable timeframe. These two elements are key to attaining useful and concise feedback that can be analysed and inform later usability tests.

Usability Test

I decided to complete only one round of usability testing for this project. I understand that usually several rounds would be carried out in a real-world scenario, allowing for an iterative cycle of development and testing to occur. However, in the interest of progressing my project to the medium-fidelity/mock-ups stage, where I would like to spend some time learning, I have decided to demonstrate my usability testing abilities with one round of low-fidelity prototype testing, focused upon wayfinding.

The objective for this usability test was to address the user’s ability to locate a product and then add multiples of the product to their basket. This would be a useful test because the Sobersauce homepage had been redesigned and the product pages had become pop-out windows. The impact this design change might have on the user’s ability to wayfind would be important to understand and may require further remedial work should it lead to undesired outcomes. 

Below, I have embedded a Youtube video of the link usability test and a download link for the Plan and Report document.

Remedial Work

The usability test required the usability tester to complete two tasks – firstly, exploring the navigation elements of the website, then making use of the search functionality. Largely, the test participant was able to navigate without hindrance, but did explain when outcomes did not match their expectations.  Feedback was positive and the required remedial work is minor.

I was lucky to be testing this prototype with such an inquisitive test participant – I had not planned to review the ‘sort’ function, however as the participant was inquisitive about this and were able to give me some constructive feedback on it. In future I may not be so lucky, so I should make sure that I plan thorough usability tests that explore every function that I require them to. 

Regarding my personal performance, I had successfully managed to complete the usability test in a concise manner, producing a reasonable amount of notes and recording useful feedback. The scenario and task key the tester on-track, and I was careful to ask open questions to gain qualitative feedback.

The remedial work required is as follows:

• ‘Refine’ function – Different types of beer expected in ‘refine’ / ‘filter’ function e.g.: lager, light, pale, dark
• ‘Sort’ function – Expand sort functionality e.g.: (rank by rating) High -> Low, Low -> High
• Search functionality – provide a drop-down menu that completes as matching results are found

Next week I will make these adjustments as part of the medium fidelity/mock ups stage of the design process.

References

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.‌

Brown, D.M. (2007). Communicating Design : Developing Web Site Documentation for Design and Planning. Berkeley, CA: New Riders.‌

Snyder, C. (2003). Paper Prototyping : the Fast and Easy Way to Design and Refine User Interfaces. San Francisco: Morgan Kaufmann Publishers.‌

In line with the Learning Outcome: D, “Publicly demand and support the development of policies promoting health and well-being in relation to Sustainable Development Goal 3 – Good Health & Well-Being,” I have spent my time this week exploring how my role as a Design Communicator could help my client promote good health and wellbeing. 

My first area for exploration was the United Nations’ Sustainable Development Goals website. The website identifies target 3.5 as strengthening the prevention and treatment of substance abuse, including narcotic drug abuse and harmful use of alcohol. Point 3.5.2 elaborates to state that a measure of achieving this target is the monitoring of consumption of alcohol per capita.

According to the United Nations, alcohol consumption impacts the chance of ‘developing diseases, injuries and other health conditions’, and can also negatively impact the course of ongoing illnesses (United Nations, 2021). E-retailers such as Sober Sauce choose to encourage alcohol-free drink consumption by describing the health benefits of reducing alcohol intake, including rehydration, lower sugar intake, and no hangovers (Sobersauce, n.d.).

Consumption of alcohol per capita is increasing in some regions of the world while being stable in others. In the United Kingdom  alcohol consumption per capita via beer was in decline until around 2011, but has since steadily began to increase, making it the second most-consumed alcoholic beverage (Poznyak and Rekve, 2018). Meanwhile, consumption of wine and spirits in the UK has increased steadily since 1961.

In response to these trends, it may be appropriate to encourage alcohol free/low alcohol e-retailers to publicise the benefits of alcohol free products more prominently. However, this may be a matter for government intervention. Competing brands within the drinks industry, such as Heineken and Guinness, have began advertising the alcohol free versions of their drinks alongside the alcoholic counterparts.

As a designer undertaking a ‘Design Communication’ module at university, I feel the extent to which I can promote health and well-being through reduction of alcohol intake is to remove pain points and accessibility barriers that my client’s customers may experience. Some customers may be trying alcohol free drinks for the first time, and poor UX could cause them to become an ‘edge case user’, abandoning their shopping experience in frustration, to return to the alcoholic drinks within their comfort zone (Google, n.d.).

By keeping my client’s customers on the ‘happy path’ within the UX, and emphasising the health benefits of alcohol-free drinks, customers can be encouraged to participate in alcohol-free experiences and hopefully enjoy a healthier lifestyle.

References

Google (n.d.). Start the UX Design Process: Empathize, Define, and Ideate: Week 3 – Crafting User Stories and User Journey Maps. [online] Coursera. Available at: https://www.coursera.org/learn/start-ux-design-process/home/ [Accessed 22 Mar. 2022].‌

Sobersauce (n.d.). About Us. [online] Sobersauce. Available at: https://sobersauce.co.uk/pages/about-us-1 [Accessed 10 Feb. 2022].‌

Poznyak, V. and Rekve, D. (2018). Global Status Report on Alcohol and Health 2018. [online] www.who.int. Available at: https://www.who.int/publications/i/item/9789241565639.‌

United Nations (2021). SDG Indicator Metadata. [online] United Nations Statistics. Available at: https://unstats.un.org/sdgs/metadata/files/Metadata-03-05-02.pdf.‌

This week I began producing early sketches and wireframes for the project. This allowed me to think broadly about how the information architecture and the webpage layout could be adapted to meet my three objectives.

On each of the below slides I have recorded several iterations of my designs and have not omitted anything. A key mantra of my design decision making came from within a paragraph in User-centred Web Development by Jonathan Lazar, which reads:

“In general, users will not spend a lot of time trying to learn the interface of a web site. If previous knowledge is required, or if the interface is confusing, or if the user cannot find the necessary information or has to ask for outside assistance, he or she might just access another website, since there are virtually not costs involved in switching web sites” (Lazar, 2001)

This mantra, coupled with the knowledge from my Competitive Audit, highlighted that I should adhere to common layout and information architecture conventions established across similar websites, as this would be key to understanding users’ prior knowledge. The analytics in my Competitive Audit also established that the alcohol-free drinks market is especially competitive, so it would be true that users can switch to accessing another website if the Sobersauce interface was confusing.

I resolved to design my initial sketches by borrowing from the conventions of Sobersauce’s competitors. However, I restricted the conventional elements I borrowed to those that satisfied the Functionality, Reliability, and Usability layers on the Design Hierarchy of need, as this would be most efficient (Bradley, 2010).

At this stage, if this project were to be a live brief, I would ensure that the client is shown the sketches alongside their competitor’s websites, then allowed to offer their insights and ideas before I commit more time to the project. Beyond the sketching and wireframing stages the designs would take longer to produce and iterate upon, so it might not be efficient to include any late-arriving feedback.

Wireframing

Satisfied with my early sketches, my attention turned to producing wireframes. 

Wireframes are very similar to early sketches, however they are clearer and more refined, allowing for “focus on screen order, organisation, and function” (Hagen and Golombisky, 2017). Although not usually focused upon aesthetics, I decided that as my wireframes were scaled, I could experiment with applying the gestalt principles; this meant I could also consider how proximity and similarity could be used to group sections of the web page together. In the below example I have left too much gap between the ‘Trending Drinks’ header and the product listings below, causing the header text to appear lost. By reducing the white space / proximity between them, I could anchor the header to the content.

Wireframing – Second Iterations

A couple of changes were made in the second iteration of the wireframe. These were all on the ‘Shop for Beers’ screen. Based on my two personas/Ideal Customer Avatars, and some of the practices I observed in my competitive audit, I’ve now included customer product ratings and allergy labels. By including this information I’m satisfying John’s desire for seeing ratings from other craft-beer hobbyists, and building Jane’s confidence to purchase by displaying allergy-based information.

This information is also transferred onto the popout screen of the ‘Shop for Beers’ page. 

This page also benefited from some further user interface changes. Firstly I have placed across in the top left corner of the popout, making it clearer how to close the popout window. As a result I’ve been able to remove the ‘back’ option from the bottom of the window, replacing it with a ‘More Information’ link, which will take the user to a page where they can read more about the brand and product. This would satisfy John’s need to learn more about the product, while keeping Jane happy by not diluting key allergy information with less important details.

Finally, I’ve been able to add a share sheet icon next to the product rating. Depending on the mobile platform being used, for example iPhone or android phone, the platforms share sheet will appear enabling the user to share the product listing on social media. This is suitable for John’s persona, as he can share the product with friends as he intends on his empathy map.

I’m satisfied with the placement of these elements, so they should be carried across to the first paper prototypes. 

References

Bradley, S. (2010). Designing for a Hierarchy of Needs. [online] Smashing Magazine. Available at: https://www.smashingmagazine.com/2010/04/designing-for-a-hierarchy-of-needs/ [Accessed 5 Jul. 2021].‌

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.‌

Lazar, J. (2001). User-centered Web Development. Boston: Jones and Bartlett Publishers.‌

Having completed a competitive audit and an audit of the Sobersauce mobile experience and customer base, resulting in the production of some customer assumptions, this week I have focused on proposing and justifying my response. 

I began by outlining three clear objectives that will measure the success of a redesign of the Sobersource of mobile experience. 

Initially, I must add clear purpose and hierarchy to the webpages. The current information architecture of the website is too confusing, with long webpages that have little hierarchy. Many webpages serve a multitude of functions with no clear, singular call to action. As a result, the intended purpose of each webpage is unclear, as is the expected behaviour of the customer. 

Next, I must strengthen the brand presence and improve wayfinding across the website. I must find a balance between promoting Sobersauce’s unique brand presence, and improving accessibility for visually impaired users. Previous research into the brand has outlined some weaknesses in compliance with Web Content Accessibility Guidelines (WCAG), resulting in the website falling short of both WCAG AA and WCAG AAA standards. I aim to produce a user interface dad here’s to both sets standards and also showcases the corporate image of the brand. 

Finally I intend to streamline the shopping and checkout process. Currently the site structure appears to separate out products into different shopping experiences, which could confuse users. The user flow charts for the shopping experience also contain many repetitive steps with a high interaction cost. This increases the risk of users note reaching the checkout process, and could explain why the website suffers a high abandonment rate.

By focusing on these three objectives I believe that I can offer an improved mobile experience for the client, and justify my design decisions against the outcomes from my research of the clients current offering. Improving upon the websites current faults in these three areas should result in a lower abandonment rate and potentially increase the amount of customers returning to the website.

Time Planning and Design Theories

I will also be adhering to the traditional design process, as outlined in UXPin’s Ultimate Guide to Prototyping. This linear model accurately depicts the roadmap for a UX redesign, taking the design from rough and inexpensive sketches to record ideas and experiments, to more refined outcomes as we reach the prototyping stage (UXPin Inc, 2015). However, this model can ‘[vary] based on the project’s needs, resources, and limitations’ – within my project I am likely to produce a paper prototype that I can use for usability testing, before producing a digital mock up and then further hi fidelity prototype’s afterwards. My reasoning for doing this is that paper prototypes can be produced quickly and easily amended during testing. They also do not appear very refined, which encourages participants to criticise them honestly (Nodder, 2017). 

Site Structure

By analysing Sobersauce’s current site structure, I have identified some painpoints that could frustrate both of my Ideal Customer Avatars. 

A) The repetitive process of adding products to a basket

B) Findability – it is difficult to find products that meet the user’s needs

C) The checkout process is too long, requiring too much information on too many page

On the left hand side of the screen is Sober Sauce’s current site structure, and on the right hand side is a suggestion for how the current site structure could be compiled into a simplified solution. Minimising the amount of pages/screens the user encounters will help to lower the interactivity cost of the experience, while retaining all the product as a filterable and sortable ‘Shop Beers’ page, should make them easier to find.

Although this structure works in theory, it must be tested. Initially, this testing would come in the form of Content Directories, Sketches, and Wireframes. These processes will ensure that all information the user requires can sit within the proposed Information Architecture. 

Finally (and beyond the scope of this project), running some unmoderated usability testing could explore whether the Information Architecture is logical for the user. This form of testing would require the website to be uploaded to a software application, which usability testers could access en mass. Their interactions with the website would then be recorded, yielding a large amount of behaviour data for UX designers (including myself) to respond to (Whitenton, 2019). 

Design Hierarcy of Need / Prioritising

In order to meet my three objectives and to produce a strategy for redesigning the Sobersauce website, I have categorised issues and observations from my audits according to the Design Hierarchy of Need (Bradley, 2010). When creating sketches, wireframes, and prototypes, I will be addressing these features by working from the lower-most layer of the Design Hierarchy of Need, to the top. Due to time constraints, this project may have to prioritise features; for this reason I intend to address the functionality, reliability and usability features. It may be the case that proficiency-related features are to be considered in a later review of the website.  

Content Directories

Across both Content Directory slides, I have mapped all of the information on webpages/screens in the current Sobersauce site structure against my proposed new structure. The outcome of this process also serves as a handy guide for making sure that all content is included in early sketches and wireframes.

References

Bradley, S. (2010). Designing for a Hierarchy of Needs. [online] Smashing Magazine. Available at: https://www.smashingmagazine.com/2010/04/designing-for-a-hierarchy-of-needs/ [Accessed 5 Jul. 2021].‌

Design Council (2019). What Is the Framework for innovation? Design Council’s Evolved Double Diamond. [online] Design Council. Available at: https://www.designcouncil.org.uk/news-opinion/what-framework-innovation-design-councils-evolved-double-diamond [Accessed 30 Aug. 2021].‌

Nodder, C. (2017). Become a User Experience Designer Pt.2. – UX Design: 1 Overview. [online] LinkedIn. Available at: https://www.linkedin.com/learning/ux-design-1-overview-2/welcome?contextUrn=urn%3Ali%3AlyndaLearningPath%3A56dfbc9b92015a33b4908fdd&u=89462170 [Accessed 8 Jul. 2020].‌

UXPin Inc (2015). The Ultimate Guide to Prototyping. [online] UXPin. Available at: https://www.uxpin.com/studio/ebooks/guide-to-prototyping/ [Accessed 31 Jan. 2022].‌

Whitenton, K. (2019). Unmoderated User Tests: How and Why to Do Them. [online] Nielsen Norman Group. Available at: https://www.nngroup.com/articles/unmoderated-usability-testing/ [Accessed 12 Mar. 2022].‌

Based upon outcomes from my research, such as my competitors audit and my audit of the Sobersauce website, I have attained enough information to create some assumptions about Sobersauce’s customer base / target audience. This week, I’m presenting this information in a variety of ways including customer stories, empathy maps, and journey maps. My intention is to create two Ideal Customer Avatars / Protopersons / Personas, which will allow me to document the motivations and aspirations of the Sobersauce user base (Ferrer, n.d.).

Later, these customer assumptions will inform some of the design decisions involved with a redesign of the Sobersauce mobile experience.

Firstly, I have written a short Customer Story for each avatar that will help me to prioritise my design decisions and empathise with these particular users needs (Ferrer, n.d.). 

John is a craft beer enthusiast who would like to buy alcohol free beers that he can enjoy on evenings when he also has to drive. We also have Jane, who admits to living with a few food intolerances. For this reason, Jane would like to find a buy alcohol free beers so that she can join in with her friends are drinking. 

John and Jane present two unique scenarios, and to be successful, my redesign of the Sober Sauce mobile website, should appeal to both sets of needs.

Next I decided that each Ideal Customer Avatar would require an empathy map so that I can understand what they say, think, do, and feel in relation to purchasing alcohol free beers. This is a process that I learnt during earlier module (DM7921: Design Research), which is serves as a helpful reference point when deciding how new features and functions of prototypes may be received by the customer.

John loves his craft beers. He believes that they are hobby of his, and looks forward to attending craft breweries and trying the latest offerings. He will regularly review craft beers on websites and apps, browsing other reviews and sharing his own on social media. He doesn’t mind drinking alcohol frees, especially when he needs to be driving on the following day. However, he feels that alcohol-free craft beers are not as good as ‘the real thing’. John also has some reservations about ingredients in craft beers, as he thinks they give him stronger hangovers.

Once I had developed a thorough understanding of John and his preferences towards purchasing alcohol-free beers, I could focus on illustrating his purchase journey. 

A journey map like the one on screen depicts how the customer achieves a specific goal. In this scenario I can review all of the steps required to achieve that goal, such as buying alcohol free beer, and consider any pain points that may occur on the way. There is also space for me to note how I could improve upon those pain points. On screen I have used a template for a journey map, produced by Google. By using templates I can make sure that I am working to an industry-accepted standard, which is rigorous-enough for the requirements to redesigning the UX of a website. 

Another good reason for creating journey maps is that it can help me avoid designer bias… This is where the designer (me) designed the website for my needs rather than the needs of the intended audience (John and Jane). Every design-based decision should be considered from the point of view of the Ideal Customer Avatar, the customer story, empathy map, and customer journey map.  

So, looking at John’s customer journey map, I can see there are a few situations whereby he becomes irritated or frustrated. For example, he is irritated by the repetitive nature of adding products into his shortlist or basket. I’ve also noted that there is an opportunity to improve this by reducing the amount of screens that need to be navigated in this process.

Secondly, we have Jane. Jane is a social drinker and so enjoys her alcohol-free drinks as a social experience. She has an undisclosed intolerance to an ingredient frequently used in craft beer making. For this reason she is intent on reading information about drinks before she purchases them, and can become irritated when the information is not easy to find. She finds that a lack of drink variety due to her intolerance can be limiting (and perhaps avoidable if ingredients were labelled properly), and so gets bored of her drinks.

Jane’s customer journey map places a little more emphasis upon the availability of information on the Sober Sauce website. The information architecture makes dietary and allergen information difficult to find, especially considering that there is information about the product that Jane does not want to see. This is somewhat conflicting Johns preferences, as he would like to learn as much as possible about the products before he purchases them. This conflict presents an interesting challenge for me I will need to consider in the latest design phases of this project.

However, we can see that Jane becomes impatient and frustrated in the same way that Jon does, when they experience repetitive processes such as adding products to the basket and completing the required information in the checkout process. Finding these agreements/similarities allows me to be confident in prioritising the remedial work on these issues above others.

A downloadable version of the Journey Maps is available here:

References

Ferrer, M. (n.d.). Online Course – Introduction to UX Writing (Mario Ferrer). [online] Domestika. Available at: https://www.domestika.org/en/courses/798-introduction-to-ux-writing [Accessed 28 Feb. 2022].‌

Having completed my client and brand research and a competitive audit of direct and indirect competitors, this week I’ve been looking to apply this knowledge to my client’s mobile experience. Carrying out an audit of the client’s current offering was a tip I was given by a UX designer that I had recently interviewed. He explained that this was not only an important process that would allow me to apply my UX knowledge as constructively critical feedback (which could be presented in a pitch), but it would also be an early opportunity to learn the needs and preferences of both the client and their customers prior to any usability testing.

Sobersauce do not have their own app – instead, their mobile experience is a responsively resized version of their website that offers the same features, but with a compacted user interface that’s in portrait orientation.

During the audit I’ve applied my knowledge of UX principles that I’ve learnt while studying the MA Digital Media Practice programme, focusing primarily upon information architecture, hierarchy, interactivity, and accessibility. 

Auditing the User Interface

Site Structure and User Flow

Both the site structure and intended user flow for making a purchase were complex. A plethora of long web pages, which often separated products from being purchased in combination, may have caused users to become confused and abandon their baskets. Information architecture was poor and caused some pages to lack purpose or have too many functionalities. Although I didn’t have access to accurate analytics, visualising these structures and flows permitted me to make and justify assumptions about the website’s failings.

In ecommerce, the customer funnel is a common model, used to monitor and measure the flow of customers along several points of a purchase process (Isherwood, 2019). As I do not have access to specific analytics data for this project, I’m making reference to the customer funnel to demonstrate an understanding of its purpose. It is often used to illustrate how customers ‘drop off’ or abandon the purchase process at several points – often revealing one or two key areas that a UX designer may need to redesign to encourage more customers to complete their purchases. In my example I have noted how a convoluted shopping/checkout process could increase the abandonment rate, so this will become an area of focus for the project.

Accessibility and Compliancy

As part of this project I intend to strengthen my understanding of the Web content accessibility guidelines. I already understand that there are two levels of compliancy, “AA” and “AAA”, however until now I didn’t know any distinction between them. 

Judging by the criteria within this table, the Sobersauce website falls short of WCAG AA compliancy as significant colour contrast is occasionally not present, and the website structure and information architecture do not present information logically or clearly – indicated by my Site Structure diagram.

It is my intention within this module to produce a mobile experience for Sober Sauce that achieves WCAG AAA compliancy (or at least WCAG AA). This means that all content on webpages will choose a colour contrast ratio of 4.5:1, help will be provided using contextual pop-outs, and information will be presented logically, consistently and clearly. There will be no timers on website functions such as the checkout experience. 

Regarding colour contrast specifically, Sobersauce website almost achieves WCAG AA compliancy for colour contrast ratio, but falls down in two areas. These two areas are actually used for headings, so presents a significant accessibility issue for those users dealing with vision-based impairments. 

In some areas WCAG AAA is almost achieved, however text is too thin to create a strong enough colour contrast. However, we can also see that ‘large text’, which could be bold text, improves this. So at this early stage I would suggest that slightly enlarging text could be enough of a tweak to meet compliancy needs.

Summary

Completing an audit of the client’s mobile experience has been a worthwhile task. I better understand the shortfalls that the current offering has in terms of information architecture, hierarchy, interactivity, and accessibility. From this I have produced the below bullet points that summarise the issues, which I intend to revisit later when planning my proposed solution – potentially, I will prioritise them according to the Design Hierarchy of Need and address the most important ones within this project (Bradley, 2010).

• Webpages are often extremely long, cramming too much information 
• Unclear purpose of each page results in distractions for the user
• Webpages are potentially too white/bright, potentially fatiguing for the user, reducing browsing time
  • Branding is minimal in parts and has low colour contrast in places
  • Inconsistent formatting across pages appears disorganised and potentially disorientating
• Titles of pages do not always explain purpose of pages
• Interaction cost is higher that necessary in some places
  • No quick option to add selections to basket
  • Text fields used to specify amounts, +/- would require less textual input
  • Wayfinding is repetitive and sometimes illogical, requiring many taps and different pages
• Links to helpful webpages are only present in the footer, these are difficult to find and would take considerable time to access when using a screen reader
• Inconsistent tap-target sizes between buttons could cause interactivity issues

Below I have provided an Issuu link to my presentation, which features a full audit of the Sobersauce mobile experience. It features larger versions of the above images.

References

Bradley, S. (2010). Designing for a Hierarchy of Needs. [online] Smashing Magazine. Available at: https://www.smashingmagazine.com/2010/04/designing-for-a-hierarchy-of-needs/ [Accessed 5 Jul. 2021].‌

Isherwood, M. (2019). The Ecommerce Experience Funnel. [online] Medium. Available at: https://uxdesign.cc/the-ecommerce-experience-funnel-6e190aa2295 [Accessed 20 Feb. 2022].‌

This week I’ve completed a competitive audit of the low alcohol/alcohol-free e-commerce market by selecting few of my client’s competitors and alysing the similarities and patterns between their mobile experiences. One of the main reasons for analysing these websites is to learn more about the customer base, as I cannot access the website analytics for Sobersauce. I hoped that by completing this task I’d be able to produce a set of personas that can help to justify my design decisions. 

Why Complete a Competitive Audit?

I discovered competitive audits via a UX design course I was completing online, published by Google (Google, n.d.). It stated several benefits and drawbacks of competitive audits, the most relevant to my project being:

Benefits:
• Informs the design process by illuminating what should and shouldn’t be included in proof of concept
• Provides reliable evidence to justify design ideas and decisions, and offers a deeper understanding user expectations
• Saves time, money, and energy, especially if completed before the iterative design processes begin

Drawbacks:
• Can stifle creativity, causing the designer to copy what other designers are doing, rather than trying innovative ideas and methods
• Audit is biased by subjective opinions of existing designs and does not supply the same definitive data as analytics might do
• Competitor’s features may not fit the use case for Sobersauce

Competitive Audit Presentation

Below, I have included an Issuu link that can be accessed to browse my competitive audit presentation slides.

References

Google (n.d.). Start the UX Design Process: Empathize, Define, and Ideate: Week 5 – Competitive Audits. [online] Coursera. Available at: https://www.coursera.org/learn/start-ux-design-process/home/ [Accessed 23 Mar. 2022].‌

Nielsen, J. (2019). Jakob’s Law of Internet User Experience (Video). [online] Nielsen Norman Group. Available at: https://www.nngroup.com/videos/jakobs-law-internet-ux/.‌

In the past week I have identified a client for my project, carried out some initial client and brand research, and identified some methods for project planning and time management.

Introducing the Client

For this module I have decided that I will be creating a proof of concept that outlines some suggested changes to the mobile website design for an e-commerce company called Sobersauce. The project itself will be a simulated one, as I have little contact with the client themselves. Despite this, I feel that this client is ideal for the project as they are currently rebuilding their website – offering an opportunity for me to compare and contrast my design decisions with that of a design professional’s in three months time (when this module draws to a close). 

Who Are The Client?

Sobersauce are an e-commerce company who specialise in selling low-alcohol / alcohol-free drinks. It appears that they purchase their products from around the world and then distribute them in the UK. Their website permits customers to join tasting programmes, purchase mixed cases of drinks, build their own cases of low-alcohol beer, and organise subscriptions for regular deliveries. The company pride themselves on being able to provide drinks that are healthier to their alcoholic counterparts with compromising on taste or experience, and this feeds nicely into addressing Sustainable Development Goal 3, which refers to “[strengthening] the prevention and treatment of substance abuse” (Sobersauce, n.d.) (United Nations, n.d.). 

Mindmap

Before diving further into the module and researching Sober Sauce’s website more closely, I’ve decided to my map my thoughts and put a method of time management in place.

Below, I have included a screenshot of my initial mindmap, which outlines some of the opportunities/areas for focus within this project. I am particular enthusiastic to increase my knowledge of accessibility regulations and compliancy, particular pertaining to the Web Content Accessibility Guidelines, and to explore how the client’s branding can be reinforced while remaining conscious of accessibility considerations. 

So far on the MA Digital Media Practice course, my design projects have been limited to focusing on mobile application design, while the client has always been the University of Winchester. While this has permitted me to ‘cut my teeth’ on design theory and practice, I feel that now is the time to test myself further, beginning by turning my attention to website design and designing for a new client. 

I expect these changes to have a multitude of impacts, including designing to a different set of branding guidelines, catering for a different user base, and adhering to different set of design conventions. For example, much of wayfinding within mobile applications is carried out using a tab bar, however this is not the case for website design.

Time Planning

Further to this I have produced a Gantt chart that details a preliminary roadmap for this module. I fully expect the time parameters for each task to change, especially considering I am juggling two modules for this semester. If the GANTT chart requires updating I will be sure to include these updates in future blog post.

Client Branding

A short, preliminary examination of the mobile experience has given me an idea of Sobersauce’s brand identity. Primary, secondary, and tertiary colours are identifiable, as well as typefaces and graphics. Buttons often feature ‘call to actions’ (CTA) and are coloured red, as according to consumer psychology this causes consumers to “react faster and more forcefully” (Khan, 2018). This is likely because of the relationship red has with danger, which is embedded in human psychology.

A deeper understanding of the client’s brand could be found within their branding guidelines, which is likely made available to internal or contracted graphic designers / User interface designers only. As a result, I do not have access to these guidelines, but do have enough information to inform sketches and wireframes. It is likely that I will add adjustments to the client branding as the project moves forward, such as font sizes.

Analytics

Using Alexa analytics I’ve identified keywords from search traffic that could give me some insight into who Sobersauce’s customer base is. “Lucky saint beer” and “Lervig” (a Norwegian brewer) drive over 25% of site traffic (Alexa.com, 2019). Although I don’t intend to focus my project on SEO (Search Engine Optimisation), it is important to understand the key interests of Sobersource’s user base, such as branded products, and emphasise them to capture their attention.

I’ve also identified several related websites, which may be competitors, that I could analyse as part of an upcoming competitors audit. These websites may have a similar customer base, so could help me learn more about Sobersauce’s customers.

References

Alexa.com. (2019). Alexa – Competitive Analysis, Marketing Mix, and Website Traffic. [online] Available at: https://www.alexa.com/siteinfo.‌

Khan, H. (2018). Why All Sale Signs Are Red: the Science of Color in Retail. [online] Shopify. Available at: https://www.shopify.com/retail/store-signs-and-red-signs [Accessed 18 Jan. 2022].‌

Sobersauce (n.d.). About Us. [online] Sobersauce. Available at: https://sobersauce.co.uk/pages/about-us-1 [Accessed 10 Feb. 2022].

United Nations (n.d.). Sustainable Development Goals (SDG 3). [online] United Nations Western Europe. Available at: https://unric.org/en/sdg-3/ [Accessed 27 Jan. 2022].‌