Finding Delight in British Goods
E-Commerce Website Redesign — British Delights
Overview
- Research how online shoppers navigate e-commerce sites.
- Ideate a solution that heightens the shopping experience for users with an interest in British goods.
- Create an interactive prototype that caters to navigating through browsing, filtering, and searching.
Skills Utilized
Competitive Analysis, User Interviews, Affinity Map, Personas, Storyboard, Site Map & User Flow, Card Sorting, Sketching, Wireframing, Prototyping, Presenting
Time Frame
2-Week Solo Redesign
- Discovery -
Site Overview
It seems there’s a bit of a trend when it comes to US businesses selling international good online. It’s a little shocking. Both on the surface and underneath, this niche of e-commerce website fail to do things all that well. This brings us to British Delights.
A quick summary of the business in question, British Delights is a brick-and-mortar shop in Westford, MA that sells an array of British goods to the American public. As you might see from their website’s sidebar above, they sell everything from tea to toiletries, and a fair amount of peculiar items in between. That being said, the business thrives on the food and beverage side of things, and therefore this will be the main area of focus during the project.
In a brief exploration of the website, it is clear that British Delights is causing it’s users some anguish. My condensed personal notes in regards to the home page are below.
- No search bar
- Disorganized navigation
- A confusing choice of primary navigation options
Competitive Analysis
Being tight on exemplary websites that compete in the same niche as British Delights, most of my exploration was outside the international goods market and looked at sites that tackled the large scale sale of different foods and goods.
- World of Snacks: Sells foods and drinks from different places around the world.
- Boxed: Sells popular items in bulk.
- World Market: Offers a broad range of household items.
- Vitacost: Health conscious food offerings.
The main take-away from researching these competitors was discovering the list of industry standards in the food-centered e-commerce space. Filtering and sorting are a key part to most sites and although the idea is the same there are different methods of execution. This was also a great warm up before diving into user interviews to learn about the consumer side of e-commerce.
User Interviews
I began user interviews by asking users general questions about shopping online. From knowledge gained whilst carrying out competitive analysis, a lot of these questions were geared towards discovering more about the how users choose to navigate while shopping online and their use of filtering and sorting tools on these kinds of sites. The content they were shopping for wasn’t so important, it was more about discovering their tendencies and preferences when it comes to searching and browsing for items online.
Fun fact: Amazon came up in all but one of my interviews!
After general questions, I presented users with the British Delights website and gave them the following scenario.
A friend has mentioned how good British chocolate is and that you should check it out. A web search has led you to the British Delights website.
This scenario was geared more towards the unfamiliar user but it also served it’s purpose with users who knew the content.
Funnily enough, most users would start by harshly critiquing the website’s layout and structure for the first few minutes, but as time went on users found themselves engrossed in browsing the site and it’s content. A little ironic considering the site’s slightly ambiguous navigation.
I compiled my findings in an Affinity Diagram shown below.
I also generated 3 summarizing points that I drew from my research in this graphic below.
Ideation
The process of ideation is something I always look forward to. Taking data that you’ve collected yourself, analyzing it through the minds of users, and then producing an array of conceptual ideas in an effort to solve a problem is very rewarding. It’s an incremental part of the design process and I throughly enjoy it.
I began this data compilation by forming personas from my user research.
Personas
Storyboard
From my research and persona construction I was able to formulate a problem statement, constructed from the point of view of my primary user Tina.
Problem Statement
As an American traveler returning from England, I want a site where I can easily purchase and discover British goods, so that I can enjoy my new favorite things while still living in the US.
Sketching
Next in the ideation phase…sketching!
At this point, one’s head is usually on the brink of explosion. Lots of stuff stored upstairs, so I find sketching is the best way to get it all out. Again, I found myself drawing from the competitive research phase of this project, grabbing elements that proved to be effective, while also keeping in mind words from users during the interviewing phase. 24 hours later I revisited my sketches with a fresh mind and took a red pen to them, making comments on what might work and what might not.
Some classmates also took a peek at the sketches. These peeks turned into somewhat of a rough user testing session. This was a great help to future iterations.
Card Sorting
Throughout the project so far there had been a lingering concern in my mind in regards to the content of my chosen website.
“America and Britain, two countries separated by a common language.”
So true. And especially true when it comes to food. The Brits have some strange words for their foods.
Besides the peculiar deserts, there are some more common foods with differing names in British culture, so when I learned about card sorting I was excited to see how it could help my project.
The existing sidebar navigation on British Delights’ website is so extensive I decided to take each of the categories displayed on the site and write them down on note cards. These would then be organized by the user in an open sort. Between different tests I decided to switch out American and British words for particular products, for example ‘Candy’ (US) and ‘Sweets’ (UK), and see if users tended to group them in the same way. Interestingly they did.
Once I got a good idea of what the parent groups might be from open sort results, I printed out images of the current products available on the British Delights website and went to a closed sort. This was a great refining process. The results gave me the product category breakdown I would use in my final design.
Site Map
After figuring out how the site’s content would be organized, I looked at the larger picture and constructed a site map to show the breakdown of the site at each level as well as how the user would navigate these levels.
I’m not a fan of formulating a solution statement directly after realizing the problem. It’s a dangerous way to make hasty assumptions. That’s why it is here at the end of the ideation phase.
Solution Statement
Allow users to search and navigate the site in an obvious and functional way, while adding excitement to the browsing experience through informative and intuitive features.
I look back at solution statements and realize they can all sound quite generic and obvious. Knowing a problem’s solution can sometimes be obvious, but executing it is a whole other story.
Design
Wireframes and Paper Prototyping
From the sketches I had drawn out and analyzed previously, I constructed a series of wireframes that I could adapt into a paper prototype and put through user testing to see if potential users would understand the flow and layout of the design.
User Testing
While testing the paper prototype, the most interesting observation how the user chose to browse. Like back in user interviews, I presented users with a simple task.
Use the site to find and buy a chocolate bar.
I wasn’t sure if this was the best of tasks to give to users. Quite a broad one. I’d expected testers to simply use the search bar and type in ‘chocolate bar’, but nearly all testers went right for the All Products tab in the primary navigation bar.
As the test progressed and users got to the results page where the filters lived, they found some of the refining options to be inapplicable and therefore confusing. This was another helpful observation that went into my final iteration.
Observations & Solutions
Digital Prototype
Creating a digital prototype proved to be an experience a little too enjoyable to the point where I lost countless hours of sleep and started dreaming about Sketch and InVision. Yep, actually happened.
I put together a medium fidelity set of wireframes in Sketch. Most of the core design pieces were established and cemented after the paper prototyping phase so from this point onwards I would only make minor tweaks to visual components of site layout. The most significant of these being to adapt elements to fit proportionally to a full screen experience.
I performed minimal testing on this grayscale medium-fidelity wireframe set and then proceeded to add real product images and a hint of color to take the prototype a tad further.
InVision Prototype
Link: https://invis.io/AZAMAJQMG
What’s Next
- Purchasing: I touched on the adding items to the cart in my design but exploring more into the purchasing process and how the site would treat returning customers would be an important next step.
- Distribution: Through a classmate I discovered British Delights actually distributes to other fine foods stores in the area. This could be an opportunity for the website to expand it’s outreach and attract more business.
