Hanley Whelpton

After the communication section was done, it was then time for me to move onto research. We had done a lot of research for this project, however some changes made didn’t always have perfect usability reasoning, and so, they needed to be backed up by research in order to be fundamentally reasonable.

Guest Checkout Effectiveness

One thing VW are fond of is their lack of guest checkout. Graham saw it as taking away from the experience and doesn’t allow them to properly track analytics. However, from research initially it was clear that a guest checkout is the most valued way forward – with 72% of empty baskets being due to ‘endless’ checkout processes. It was therefore up to me to prove that a guest checkout was effective, and kept within the wants of VW.

For this, I used a tests regarding whether the user would be able to remember information regarding their purchase whilst they go through the process of signing up. This was a different test, however helped me understand whether users (under the assumption that they are not all wine connesseurs):

A. looked for guest checkouts using a heat map

B. could recall information after the process of sign up (this was because research proves that 52% of people will abandon a cart after they cannot remember or visualise what was actually in it.

Position of Voucher Code

The voucher code was another small but important detail that could make or break a user experience. The team wasn’t sure whether it should be within payment or within summary, and so using heat mapping, I found the speed and the then assumptions of where it should be from 5 different users in a very simple AB test. I used a heat map within Figma to do this, and found where the users mouse hovered the most.

These were just two of the few tests I conducted during the time of design!

Helping the Design Team

Whilst I didn’t directly work on design and cannot take credit for their (incredible) work, through my research and testing, myself and Robert knew the most about the little tweaks in designs that would be needed. For this to be of any use, we went through and made slight changes, before we could get the final versions from the group for a heuristic evaluation.

For example, here, the ‘become a member’ was added by myself to utilise the opportunity for virgin wines to gain information from guest checkout. This could then help analytically and aid the reasoning for a guest checkout. As well as that, slight things such as a fade to show there is more in cart were added, as well as some copy size changes to aid usability, and a few other comments.

These changes were all made through the help of research done in a full heuristic evaluation – found in the below section!

Heuristic Evaluation of Our Redesign

In order to aid the design team further and help with any details or usability issues they or the user may be facing, I did a full heuristic evaluation of the (at the time) current redesigns.

From this I gathered a few key usability changes, including compatibility between desktop and mobile, some placement issues, and user flow problems.

After creating the slide-deck for the team so they could focus on design work, and aiding in the creation of a script, this heuristic markup as well as further research and aid in small development details on the design were my final interactions with the Virgin Wines project before the big presentation!

My next part of the project was to create the slides for the communication of what we had created. At this point, we had a user flow, low fidelity wireframes and a lot of research to back up points we had wanted to include, but I was unsure of exactly what it was we had to make the points about, so it was mainly (to begin with) my job to set up the slides, and make a visual code for the whole thing. I wanted to begin with something good that draws in attention, and so I hoped to script the virgin in a visual animation in order to present the work, as well as building a strong research deck to back up our choices.

Max worked on the research deck, gathering information, and so I began with the visual aspects. Using the virgin logo, I edited together an animation on After Effects. (The logo unfortunately changed half way through so I never got to use this animation LOL).

With this as the beginning of the communication slides, presenting an animated exploration of our changes from the very first moment of the presentation, I hope the viewers see our insights as useful.

It was mentioned that Graham doesn’t necessarily care for research based design choices, but it was really valued by our team, and we believed throughout the process that anything that was done should be backed up by research. This helped me divide up the presentation, beginning with the bread crumbing of what we would be going through, as well as creating small smart animations to show our work off in a better light, communicated through a well designed presentation. I used virgins red colour and witty tone, using circles to co-ordinate the shape seen throughout the virgin site and logo.

I presented research in this moving way to help understanding of the efforts undergone to prove certain design choices. This then allowed me to move onto showing the design choices in the same style, ending With a conclusion.

Along the way I wrote notes of a script to aid the team In writing a thorough version, and made sure the presentation flowed smoothly. As we already had a strong design team creating the fidelity mock ups and prototypes, I was the one working on the slideshow, and I was really happy with how it came out, as well as how the rest of the team liked it.

Research Section

In the research section, we wanted to show the key findings from each of our points. These needed to be done in a way that then could be simplified further to find the even more key points of the key points!

These were done using icons that could be drawn through, and cards to mimic the concept of the card sorting actives we conducted. The presentation needed to feel atmospheric – and this was done throughout.

Design Section

I wanted to showcase the teams work off to the best of my ability, and we were all of the understanding that showing key sections or details wouldn’t prove the extent of research backed design decisions and detailing we put into the pieces, and so with the help of Max, I used mockup’s on Figma to create videos of the products, so that those who designed them (and know the details best) could talk about them in the presentation. We didn’t want to include too much text within the slides, so kept it to a minimal where we could – just as we had done through the research section.

This could then be rounded off really well with the conclusion which would draw together all of the key design criteria and confirm how we used them and faced those issues.

Side Quest – The Virgin Wines App!

A smaller parter of the brief was to create an app that would link tot he platform somehow, and through very basic tests it became clear that there is no need for a virgin wines app, as all of their sales come from the site, and a user will be significantly less likely to purchase from an app they have to download (adding time onto their checkout). We decided to create an app that went hand in hand with he Events that Virgin Wines do – and due to timing and the fact that it wasn’t necessarily a NEED for the project, we left it until last.

As I had extra time, I took on some wire framing and a final mockup to present in the presentation, which I based off of the research from other sectors of the website.

Briefing

To begin this project, we got into groups, and based on our skills throughout the past projects, Mara had asked myself, Max, Rob, and Harry to be in a group with her as we could all contribute well and work together to create something really good.

After the initial brief given by Graham, the creative director of virgin wines, we had to begin thinking of questions to ask him, which we had done throughout the process on a Miro board set up to throw random questions into where we could then pull out the most appropriate ones to ask.

We learnt a lot of different things about the company, and took some key notes which were then later transferred to another board. Everyone took separate notes but had the opportunity to place them together which was really useful.

We then used Trello to set up a few different tasks for people. Here, my first one was to set up all the possible Miro boards that I thought we would need, and then add some along the way if needs be. I set up one for Heuristics, Initial ideas or the initial board we used to work on, a competitor analysis board, and one for interviews when we got around to it.

Heuristic Evaluations

To start the project, we did heuristic markups of the three pages we were going to look into. Checkout, live events, and about us. All of the group did this in their own sections, outlining the positives and negatives. Then, in groups we divided up the workload for our heuristic analysis. Myself and Harry tackled checkout, where I did an in depth ‘deep dive,’ of the mobile version and he did the website, with the others doing their own for the different processes.

Heuristic Evaluation Outcomes

Afterwards, we drew together all of the notes that had been made in regards to the heuristic evaluation, placing them all together so that we could group them and categorise their solutions. Most notes overlapped in multiple areas, but in some places they were just singular issues. We made a refined infinity map, focussing on the problems that were being faced in certain areas. Myself and Harry had more of a focus on checkout, and so we laid those our together before moving on to highlighting pain points. It was really useful to do this all as a group, because even though we all did a heuristic markup of the pages, we each only did a deep dive into the heuristic analysis of one section.

The final part of this was to gather them all together, and think of the solutions – or what we need to do in order to come up with a solution. For our focus, these included notes such as: ‘The design of the page is busy, dated, and messy. Do visual research on other sites to see what we could do better.’

Competitor Research

Afterwards, I began looking into the other virgin wine companies and their brand systems, having found out that the three things they had to follow were noted as the ‘language, red colouring, and virgin logo.’ having ‘80% freedom, 20% limits.’ This is important because whilst one company within virgin may do something really well, another might not, and so I thought to check within their own systems to see where we can find some hints using another heuristic evaluation of a few of their most popular sites whilst the other members of the group did competitor research into the specific areas.

I looked into Virgin Atlantic, the Virgin website, and Virgin Experiences to gain insight on this, and then found pages similar to what we are looking into, before doing a quick heuristic markup, and putting the most valuable information to one side.

Research Takeaways