STC

Online Store

Role

UX Designer :
User Research, Virtual Site Visits,
Low Fidelity Wireframes, Testing, Prototyping

Goal

Create a platform to allow customers to purchase from the store online

Timeline

1 Month (April 2020)

Reflection Summary

Constraints caused by Covid-19, prevented some UX processes but allowed other solutions as a work around.

On Reflection (in 2024) :
This was my first design project I had done after changing career from accountancy and provided a key learning experience around users insights and the importance of well-planned information architecture. Although there are UI issues (to be expected with no UI knowledge at all at this point).

Looking at what I would change now, I would obviously finish to high-fidelity designs and I would re-write this case study after completion of high-fidelity to tell more of a story.

Competitor Research

I conducted a competitor analysis to assess direct and indirect competitors. I then completed a feature comparison of some of the leaders in the market.
‍
I compared the features in the market leaders to understand what was essential for STC. This provided me with insights where they could stand out in a crowded marketplace.

After reviewing the online competitors, I then moved over to start my contextual inquiry on 6 London based party shops but unfortunately due to the Covid-19 outbreak, this proved impossible.
‍
After trying to work around the social distancing, the closest I could get was to undertake virtual site visits using reviews from customers, company videos, and other information I could find about the companies. This provided some key research findings of behaviours, but I would have liked to be able to visit them and perform an actual inquiry.

Qualitative Research

STC supplied a target demographic and from this, I Interviewed people who fit it to get an idea or their goals, likes, pain points, and just generally things around their purchasing habits in party shops. Although the Covid-19 did make this more difficult I managed to interview 8 people over Zoom, with each interview lasting circa 25 minutes.

An amalgamation of key points from the interviews created our persona “Jennifer”.

Across all three demographics, the users preferred to watch music on laptops or computers instead of their phones. When we get to the Ideation phase, we would look back on this and decide that we would focus on a computer-first design.

Open & Closed Sort

Due to the fact that the majority of the stores inspected were poorly organized I organized card sort from the 75 items of stock to see how users would categorize them. These items were quite varied and even I was not sure exactly how to categorize them. 13 users were given a Miro board and asked to arrange the 75 items (yellow post-its) into categories (blue post-its) and told that an item could only go into one category.

This provided 5 clear categories that were persistent across the 13 users: Occasions, Table-top, Decorations, Balloonery, Fancy Dress. And although I was not 100% sure that balloonery was a word, google quickly confirmed that other party shops were using it also.

After I had the 5 categories, I conducted a second round of card sorting with the heading above and found them to be consistent in their sorting. From this, I decided that the categories were intuitive enough that a new user to the site could accurately find what they were looking for on the first try.

Sitemap

I used the 5 categories grouped by the users and used subcategories to ensure everything could be found easily.

Initial Wireframes

It was important to decide how the user would navigate through the site. Going through Jennifer’s perspective and buying two different items of stock and then continuing to checkout.

I then translated this into wireframes and included the additional pages for the checkout process. (pages 10–14).

Testing

I tested on 4 people. I chose to test on the sketched wireframes as it was an efficient way to test my initial concept. I used these wireframes to create a clickable paper prototype in Invision. From this, there were some very clear alterations that needed addressing..
‍
Problem: The meganav subheadings were not clear enough. There was some confusion if some of the heading were clickable.
‍
Solution: This was due to the sketch. Another point noticed was that the progress indicator on checkout pages got missed.
‍
Problem: Users were not used to seeing the checkout progress on the side of the page.
‍
Solution: Progress indicator moved to top of screen.
‍
I made the changes and converted to a low-fi digital mockup on Sketch.

Usability Testing

Along with the previous 4 users that tested the sketched iteration, I then proceeded to test 9 more users. This was across the next 5 iterations of the design and the tests were across a 3 day period.
‍
I conducted 3 tests in person and then the remaining were over zoom.
‍
Each user had the same scenario. "Please imagine you are helping a friend plan their wedding. You need to order two separate items and get them delivered to their address."

After the third set of changes, I increased the fidelity slightly to include images and replace the lorem ipsum and placeholder text.

Mid-Fidelity Walkthrough

The final deliverable was a mid-fidelity website which I have included below.

Difficulties

Constraints around the Covid-19 outbreak hindered some areas of the process. I adapted and found ways to bypass the problems that occurred.
‍
A full contextual inquiry could have provided some useful insights. The virtual inspections provided enough information to get started on the competitor analysis.

Next Steps

Going further I would like to increase the fidelity of the site. I would like to work on colour and branding.

Software used: Sketch, Adobe Suite, Miro, Keynote

Reflection

As this was the first e-commerce project that I had worked on, I learned a lot about how users think. It was interesting to see how many different ways users grouped items during the open card sorts. I learned a lot about the different aspects of information architecture.

On Reflection (in 2024) :
This was my first design project I had done after changing career from accountancy and provided a key learning experience around users insights and the importance of well-planned information architecture. Although there are UI issues (to be expected with no UI knowledge at all at this point).

Looking at what I would change now, I would obviously finish to high-fidelity designs and I would re-write this case study after completion of high-fidelity to tell more of a story.