My first UX project: an e-commerce website with a social twist
1. The challenge
I was tasked with designing a new e-commerce website for a hypothetical homeware store who were seeking to develop their web presence while maintaining their reputable brand image.
The store, Splendid Housewares, serve small businesses and customers in the local area and prioritise face-to-face interactions with their customers. They can accommodate store collections for their local customer base and would like for this to be reflected on the site.
2. Discovery
2.1 User Research
The first step of the discovery stage of the process was to conduct a number of user interviews. During these face-to-face interviews I was hoping to better the understand the thought process of people who shop for homeware products online, in particular their context, the process they follow and any particular pain points they have that I could seek to address in my design.
My findings:
Context: Shoppers go online to buy specific products for their home or for a special occasion (dinner party, Christmas etc.).
Unlike people who shop online for clothes, for example, homeware shoppers often have a clear idea in mind of the product they need and rarely casually browse for items for their home.
Process: They Look for inspiration for the product they want (social media, catalogue, search engine etc) then go direct to the site to buy the item or search for cheapest place to buy the product using Google’s shopping feature.
Pain points: I used affinity mapping to identify two recurring pain points for online homeware shoppers: product information and delivery.
Users often struggle to imagine how the product will look in their home, in particular when it comes to the size of the item and how it will look in their home.
“Item was unexpectedly too big for our home when it was delivered.”
Delivery is often not communicated clearly enough and packaging often inadequate.
“Finding a delivery time slot can be hardest part of the process.”
Primary Persona
My primary persona was Valentina who shares many of the frustrations of the users I interviewed, namely a busy lifestyle that makes collecting deliveries a struggle and an uncertainty when it comes to buying products for her home.
Key insights:
- Can doubt her purchases and wants to feel confident in her choices
- She wants to get easy to come by information in order to make a good purchasing decision on a budget
- Supports local businesses
2.2 Competitor research
The next stage of the design process was competitor research, I analysed a number of direct and indirect competitors to identify a number of key features for my e-commerce website. The feature comparison of smaller, local competitors and larger stores gave me an idea of the key features our users would expect from a homeware store.
Opportunity
After identifying our site’s ‘must-have’ features I wanted to look at what the competition weren’t doing so well — what space of the market could Splendid Housewares seize? My analysis identified 3 areas:
Social
All sites lack a community feel which is key to our brand
Product page
Only a few of the competitors show multiple images
Collection
Only one of the sites offer a collect option, could we do the same?
You can see from the matrix below that none of the smaller, local houseware stores have product pages with multiple images. As one of the key user pain points identified in the user research is the lack of product information I decided to develop this feature to tackle this problem.
2.3 Information Architecture
Information architecture and taxonomy were the next step of the process. With such a varied product assortment, ensuring the user is able to easily and intuitively navigate the site is vitally important.
My closed card sort showed that the majority of the store’s products fell under the Kitchen category, to tackle this I conducted another closed card with kitchen subcategories. The end result was a more coherent, cleaner site map (left) that meant the users could intuitively navigate the site.
3. Define
3.1 Core persona, scenario and frustrations
After the discovery phase it was time to hone in on the core persona, pain points and scenario I was to focus on in the next phase of the project (develop).
3.2 Storyboard
I was then able to map my persona’s scenario into a storyboard where I can clearly communicate where the Splendid Houseware brand and e- commerce site could help our target persona with her particular issue, in this case finding glass and dinnerware for an upcoming dinner party in her new flat.
4. Develop
I then moved on to develop phase where I would begin sketching ideas for solutions to solve our user’s pain points around lack of product information for homeware products.
4.1 Design studio
I began the develop phase by running a design studio, rapid, time-boxed ideation with a team to produce a range of varying ideas to tackle the problem.
I introduced the issue we were addressing to the team:
“How can we help people make better purchase decisions by helping them imagine how the product will look in their home before they buy it.”
After a range of different ideas, varying from AR to user generated images, we combined the best elements of the various ideas and formulated a final solution.
The Solution: Give our users from the local community the chance to upload images of our products in their homes directly through Instagram.
This will give our users who are considering buying the same product the chance to imagine how it will look in their home.
4.2 Paper prototype
To communicate and test this solution with the target audience I created a paper prototype of the site’s key screens (below). You can see from the middle image how our site’s product page will look with an image upload button for users to upload an image of the store’s product in their home and an image carousel for users to view these images and feel inspired. I also wanted to test the collect from store feature as this was the solution to our user’s other key pain point.
Testing the paper prototype gave me a number of key insights that I was able to take in to the next stage of prototyping:
Visual confirmation when date of collection is selected is required.
‘Go to pay’ and ‘basket’ confused users and delayed the checkout process.
4.3 Digital Prototype
Taking user feedback from the paper prototype in to consideration I then iterated on the website screens using Sketch. You can see from the image on the right above that visual confirmation of the collection has been added which should make the check out process smoother.
It was also key to test these screens with users and using a prototyping tool called InVision I was able watch users navigate through the site and complete tasks relating to the user scenario. From there I could identify bottlenecks or areas of confusion and take these in to the next round of iteration.
4.4 Proposed next steps for this project
A/B Test ‘Buy Now’ button: users were not fully convinced of the current Buy Now button on the product page
Map out upload image user flow: think about how user would upload images of products from Instagram
Rework Checkout flow: change ‘buy now’ to ‘proceed to checkout’ and add status bar and include email follow up
