The tour map is where the user navigates their tour where they select a wine and see potential locations.

Through exploring the gestural interaction on the map and reviewing the personas, swiping up to see the wine list presented one main challenge: you could not see the map at the same time.

Thus you couldn’t quickly switch between wines to try and see locations where to sample them.

Hence I adopted the horizontal scroll group for the wine cards instead as it keeps the map visible and my hypothesis is that this is more reassuring for the personas who might be considering trying 1-3 wines for an evening.

The wine card during the tour creation flow provides information to the user such as sampling locations.

My hypothesis is that it is useful and reassuring to see a potential sampling location, however I had to ask, what would happen if there are several potential locations? How might we best present this to the user?

I decided it was more important to know that there are X number of locations nearby, and let them dive in for more details about the locations, if they want to.

I played about with the information hierarchy on the wine card, reviewing wine cards from online stores to check patterns and potential mental models.

There was a lot of variety in information hierarchy online.

Through my own examples I identified it was important to give the user the most important action first: adding to tour button, followed by the wine name and its details, including social proof via reviews and sampling locations.

I also needed to make clickable areas clear and let the user know what and where they’d be going. As an unexpected result can be frustrating.

Moving forward, I worked on the test script to help give structure and consistency to the testing sessions

I used background questions to set the mood for the participants before the tasks to help them assume their roles. The open-ended questions were designed to explore initial impressions of the value proposition and served as training for thinking aloud for the subsequent two scenario tasks.

Taking part in other usability tests, I feel that my own are less specific and involved, but weaving the persona into the narrative of the script early prepared the participant for the role and task

Testing finished, I embarked on analysing the videos recorded. This led me to create an affinity map to see the links between my observations. Through a rainbow spreadsheet I further explored my observations, links and next steps.

During analysis I made notes for user’s thoughts, feelings and actions, as well as any errors encountered. Through this initial collection of observations patterns were emerging.

One obstacle became clearer: Participants wanted to navigate the wine card differently.

Using the spreadsheet provided me with more clarity and it streamlined the data in another way that enabled me to make decisions and think of ideas.

Now comes the time to report my findings and make suggestions about what to fix or improve via the test report.

• Tasks occupy the mid range with a mean of 5.2 and 5.3 for task 1 and 2 for SEQ.
• 5/6 participants succesfully completed both tasks 1 and 2
• 1 participant partially completed task 1 and failed task 2, though rated the tasks as mid-range for SEQ

I added my notes to a Github project so I could prioritise and approach my next steps more holistically. This helped me to consider how I was prioritising, so along with the severity rating I considered:

• Primary or secondary actions
• Number of participants stumped
• Quick win to fix?

Using my perspective as a QA tester was really helpful. In my experience I have faced many issues and I have had to consider variables such as persona, device type and the technicalities of the problems.

Though still in design, not implementation, I used my history to guide the decisions that satisfy the user, the business and the technical teams to improve the design.

I selected these areas to focus on because they affected the core tasks most, would be relatively quick to implement and noted by most participants.

With a new version of the prototype based on the usability testing, I started to focus on the visual design and created a design language. Here you’ll find a snippet of this.

For the colour palette I decided on purple and an orange:

The purple brings elegance and is reminiscent of grapes.

The orange brings a touch of playfulness to lessen potential ‘snobbery’ associated with purple. It is similiar to new ‘Orange’ wine styles, roses and other red wines.

WineTastr is not just another stuffy wine club, nor does it encourage excessive drinking, so the two colours balance each other.

Cards relating to wines and tours use real imagery, with people, bottles of wine and full glasses.

Aim for inclusive design so ensure a wide range of people - anyone can enjoy wine!

Recommended tour cards use horizontal scroll as choice limited to 6 cards to ease user selection.

Wine cards (select) use a 2 column grid and scroll vertically as is established pattern, common in online stores.

With a new layer of visual design, I wanted to check my thinking and latest iteration of WineTastr with others, so I sought out collaboration with other designers to participate in a series of reciprocal design critiques.

7 fellow designers came forward with their suggestions, opinions and support.

I extracted out their comments and placed them onto github for sorting.

I needed to establish:

I considered their comments and separated them into

In addition to changing the balance of wine card as noted in the main case study, I began to work on the feedback and think of solutions to the issues identified and make changes to the design. Here are a few examples.

Acknowledging the confusion caused by the search UI, I opted to simplify this into 2 buttons for search and browse.

I clarified this with the designer and sought additional input to check whether this was confusing for others.

The initial designer noted it confused her for a moment, but soon recovered and understood the context of the page. Other people did not indicate confusion.

With this new information, I could feel more confident in the initial wording ‘Review Wines’. I believe the overall context of the page is clear.

As part of reflecting on their comments, I wanted to acknowledge their positive feedback and assess what was working well, where was the design succeeding?

It was really good to hear that these small touches where noticed and appreciated, increasing my confidence in what users would be experiencing.

This page appeared to work well for designers of differing knowledge and appetite for wine.

After implementing changes, I created a new refined version of the prototype.