E-commerce Concept Project (2 weeks)

Overview

We have a task to set up an e-commerce website for our fictional party supply store “All That Glitters”. It is a small local shop based in Shoreditch since 1998, and their goal is to expand their business through e-commerce while also emphasising on their local appeal.

We have been given two weeks to complete the task with a low-fi wireframe design including the home page, product page and also the check-out page.

I have been given three personas for this project and “Dean” is the one I had chosen for this project for he has the closest traits as our users.

Challenges

So “Dean” has been invited to a fancy dress party tomorrow and he needs a fancy dress costume as soon as possible…

What would he do? 
Where would he go? 
How would he do it? 
How can we make “All that glitters” his go-to site for fancy dress

Process

Competitors Analysis

We looked at our competitors and analysed what the standard features are. By doing so, we found out that most of the sites offer similar features on their websites such as login, delivery services, reviews, etc. However, while big sites have a wider variety, smaller websites for a local shop like our client’s tend to offer more unique products.

User Interview/research

To further understand our users. I have conducted several users interviews with people who have a similar background to our persona.

From the interviews, I have concluded with the following findings:

  • Most people use the internet to research on idea & inspiration.
  • Local Shop has picked up in store services for their online sale are popular among users.
  • Don’t like page having too many “deals messages” & Ads Banner.
  • Despite being a secondary competitor, Amazon has become more “local” over the years with their same-day delivery services, and people trust the reviews on the left for the item. That gives the user a lot of confidence.
  • Most users don’t like or have trouble with returning the items.
  • Precise and fast online shopping experience. (i.e. payment & shipping services)

Structuring the sitemap — Information Architecture

From the project brief we were given, there is an inventory with a list of products carried by the shop.

To enhance the shopping experience, I have invited my users to carry out a “card sorting” activity to let me understand how I can arrange the information on the site in a way which of the user can relate and create a better sitemap.

Making it happen

So this is what Dean’s user journey would look like:

Paper Prototype

To have a closer look at how our user would have navigated with our site. I’d show them a paper prototype and interviewed them while they interact with it.

From here, we also did a user flow to engineer the structure of my site further.

Wire Framing

The concept of my design is to the emphasis on the “localness” of my client’s shop while providing a simple and excellent shopping experience for my client. They can browse the site by inspirations, local events or ordinary categories. Upon a purchase was made, users can pick up their orders at a time as they wish at the store or have their orders delivered by courier. The return process will be simple; you can always send them back via courier or drop it back at the store for a refund.

With all these information, I have made my first wireframe and tested it ours with multiple users.

Usability test

After conducting my usability test, I have gathered my users’ feedback and have the following findings:

  • Some people prefer using the search bar instead of the tab.
  • They would like to know the delivery options first before payment.
  • Prefer clicking on an image.
  • Do not like too many social media button.
  • Like to simple check out process.
  • Don’t like registering and like having the option not to disclose.

The Mid-fi clickable prototype

I have then moved on and created a mid-fi clickable prototype as shown in the link below.

Results

I have invited back the users to test on the latest version of the site, and they love it. They like the changes in the shopping cart and check out experience which is simple and with step by step guidance. They feel that the simple approach suits a small local shop profile and the local events feature on the home page had positively contributed to the brand as a local party supply shop.

What’s next

  • More user test
  • Fine Tune “theme” feature
  • Can check out be simpler?
  • More details about the returning procedure.
  • Improve on contact us services. ( i.e. provide options to have online consultation for B2B scenario )