UXDI Project 2 — Interactive prototype of an ecommerce website

Bhawna Gulati
Aug 28, 2017 · 6 min read

Our second project in the UXDI program at GA led us to creating our first mid-fidelity interactive prototype of an e-commerce website for a local housewares store (Splendid Housewares).

In order to develop this clickable prototype as the final deliverable of this two-week project, we used a number of UX tools & techniques such as competitor analysis, information architecture and site maps, site navigation, experience maps & user journeys, design studio, sketching & wireframing (in Omnigraffle), form design, and finally user testing of the clickable prototype created in Invision.

The Client:

Splendid Housewares has been Aldgate’s neighbourhood housewares store since 1964, and offer a highly curated inventory. Their business model is based on customer service, reasonable pricing, and keeping it local. Through a new e-commerce website, they want to showcase their products, while maintaining their brand image.

Research:

User Interviews: In order to understand the user perspectives and pain-points around online shopping for houseware, I conducted user interviews with three individuals who were frequent online shoppers from smaller stores.

My first user, Efrem, had recently moved houses and had shopped quite a bit from local stores, in addition to getting some items from the larger chains such as Ikea & John Lewis. He shared that while he was ok getting the items of regular use from these larger stores, he would typically look for unique and inspiring items from the smaller boutique shops. He was driven by recommendations and great product photos, and was put-off by sites that required him to create an account (or asked for lots of user info.).

My second user, Priya, also shopped from the smaller local shops mostly for items that were for her own pleasure (like a beautiful teapot). She described herself as a touchy-feely shopper who would like to be able to see the product as close to reality (videos or 360-degree views were great) before she actually made the purchase. She was put-off by too much advertising and un-sought customer service, and did not want to feel pushed into making a purchase.

And my third user, Smriti, was a more practical shopper who would mostly start her online shopping by doing a google search for stores that offered the item, reading reviews and making her decision based largely on price and user reviews. Being able to track the delivery of her items was a major requirement, as she did not want to be left waiting for updates from the stores. She also valued being able to contact the store for any questions that she may have, but rarely had to use the service.

Given these findings, I was able to narrow down my target user base to match closely with Andrew — one of the personas that we were given along with the project brief.

Target Persona

Competitor Analysis: Now that I had zeroed in on my key persona, and validated my users’ pain-points and needs, I sought to look at the competitive landscape for my client. I also went back to my users to see who they saw as competitors to Splendid Housewares. A few names that repeatedly came up were huge giants such as Ikea, John Lewis and Amazon, as well small stores such as Monologue and Labour & Wait.

I then conducted secondary research regarding the websites of these stores, as well as conducted site visits to the Labour & Wait and Monologue stores in Shoreditch to understand how their in-store shopping experience had translated (or not) into their e-shops. This was extremely insightful, and some of the key things I learnt were:

  • The larger stores had a very deep and wide site map, and products were located in a number of sub-categories. Conversely, the smaller stores had a flat site map, with very few categories.
  • The product information pages were laid out differently — the large stores focused more on product specs and features, whereas the small shops focused on minimal specs and more on product photos and descriptions that were more about the experience of using that item than on features.

Information Architecture:

Having a clearer understanding of the user needs and competitive landscape, I then progressed towards deciding the information architecture of the website I was looking to design.

Card-sorting exercise

This was done by getting 4 users to do an open card-sort for me, which helped me come up with the primary navigation of the site. I then got 2 users to validate the same by doing a closed card-sort, and made some final tweaks given their feedback.

I then developed this site map for my website:

Sketching & Wireframing:

Before progressing to the sketching of wireframes, and then the digital versions, I selected a specific user journey for Andrew which I was going to focus on and test with in the prototype.

Goal: Andrew wants to place an advance order for additional plates & glasses for a dinner party he is hosting on Saturday.

I created an experience map to reflect this journey, and used it to then create preliminary sketches of the website pages.

Experience Map for Andrew’s user journey

We also conducted a design studio to get ideas from my classmates on how they would approach Andrew’s user journey and what key elements on the website would enhance the overall experience for him. This was an extremely useful exercise as I got some great ideas from my fellow designers, some of which I incorporated in my wireframes.

Design Studio

Prototype & User Testing:

I first created a paper prototype with the sketches I had drawn, and tested it with a couple of users before digitising them into a wireflow on Omnigraffle.

Initial sketches

The wireframes were created as low-fidelity, and over multiple rounds of user testing, developed and refined into mid-fidelity.

Low-fidelity wireframes

Some of the key findings from the user testing were:

  • The user flow itself to achieve Andrew’s goal was smooth and robust.
  • The side-navigation within each primary navigation tab was found extremely useful by most users.
  • The Home Page was changed significantly — the users expected to see popular products or offers as they landed on the site, and while the ‘About the store’ as the most prominent section didn’t bother them, it was seen as unnecessary.
  • The checkout process underwent multiple iterations as the initial feedback was that it seemed a bit too long and could be smoothed out.
  • Some basic feedback on certain UI elements was also incorporated in the mid-fidelity prototype.

As such, some of the screens were refined and changed to:

Mid-fidelity wireframes
Mid-fidelity wireframes

The interactive mid-fidelity prototype (created using Invision) can be found here.

As next steps, I would look to do a few more rounds of user testing to arrive at a high-fidelity version of the website, while continuing to incorporate a few more elements / features that are in line with the client’s brand image and values (such as a customer service chat feature, or a more refined products page).

)
Bhawna Gulati

Written by

UX Designer | Observer | Nutella lover. www.bhawnagulati.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade