Virgin Experience Days: UI Design

I worked with Virgin Experience Days for 3 months to help them improve their eCommerce experience and improve conversion rates.

ROLE:

UI Design, Interaction Design

PROJECT SCOPE & TOOLS:

3 months: Pen & paper, Figma, Sessioncam

Analytics

During the course of 3 months, I worked directly with the creative lead and conversion rate optimisation specialist with the goal of improving usability and conversion rates throughout the eCommerce wbesite.

Before focusing on UI Design, I used qualitative research methods including heatmaps and analytical data to learn more about the problem in hand. One example of this was the mobile menu. Through a platform called Sessioncam, I could watch recordings of users using the existing menu on the live website. I was able to identify pain points and constraints which helped me design a solution a more suitable solution.

Wireframing

Once I had identified pain points and how the solution could be improved, I ideated on a number of different solutions quickly by sketching them out. This allowed me to quickly discuss potential designs with the creative lead and make iterations. I then used Figma to to produce some digital wireframes that went into more detail.

Userflows

For some sections of the website, such as the basket and checkout process, I designed a user flow diagram as this helped me to visualise the path that the user had to currently take to perform an action such as buying an experience. I could then find points in that process where things could be simplified and improved.

High Fidelity

Virgin Experience Days used a vector based design tool called Figma as this allowed us to work collobaratively and eaisly share assets. Once a feature had been carefully planned, I then produced a number of pixel perfect high fidelity designs.

Prototypes

On occasions, I felt that it was important that prototypes were built to demonstrate to the team how a user would use the feature. I built these prototypes quickly with either Figma or Invision and demonstrated in person.

Unfortunately, I did not have the buy-in to be able to perform user research with these prototypes. Instead, I was able to work with the CRO to create A/B tests. As the website had a relatively high amount of traffic, I received feedback from these tests relatively quickly and then iterated on the designs.

Handoff

The hand-off of designs from design to development was completed by the creative lead and this was done by sharing the Figma artboards. Therefore, it was very important that all of the designs were pixel perfect, ensuring that Development would be able to build out the designs accurately.

Front-end Development

Occassionally, there were opportunities to build out the designs that I had crafted myself. I would create a codepen and use HTML, CSS and Javascript to build a prototype that could be easily shared with the team.

Reflection

The Virgin Experience days website consists of complicated user flows and is used by users for a number of different purposes including buying an experience, redeeming a voucher, exchanging a voucher for another experience and contacting support. The role gave me an opportunity to work with a large brand with a large amount of business, technical and user goals.

Next Steps

I believe that there is an opportunity to conduct more qualitative user research including contextual enquiries and user testing. Currently, the business has a great understanding of how customers are using the website. However, qualitative research will give the brand more of an opportunity to consider why they are acting in such a way.