Site map, user journeys and wireframes
Our agency had won work to build a new e-commerce website for Splendid Housewares, a small high street housewares store. I had been asked to deliver the first batch of deliverables, a site map, user journeys, wireframes and a low fidelity prototype.
Following a double diamond approach (Discover, Define, Develop, Deliver), I used a number of UX techniques on this project in order to design a solution and produce the project deliverables. I started by reviewing the data we had been given by our client.
Evaluating existing personas
Splendid Housewares had provided three personas with strong unifying themes that included both a desire to support small businesses and a preference for real-world, offline experiences.
At the same time the personas were all young, busy professionals that struggled to find balance in their lives, shared frustrations around delivery speed and communication when shopping online, and sought efficiency and speed in both purchasing and information gathering.
These two sets of characteristics provided a tension when we consider that in the online space it is typically the larger e-commerce businesses that are best positioned to navigate the online pain-points of these personas.
Conducting user research
The user research was designed to help me understand the problem space and provide initial project direction though as the work progressed I returned to this work to help validate design choices.
Interviews: Having screened for users who expressed a preference for shopping at local stores, I discovered that in all cases their last homewares purchase was online. In every case there was a reason why it had been more convenient or cheaper to visit a large online retailer to achieve their goal — despite often visiting and conducting product research at a local store.
Card Sorts: The card-sort process kicked off with a review of the client inventory of which there was around 80 products provided. Given the large number of commodity items, it soon became clear that the client’s brief had possibly overstated their brand positioning. I also discovered that my client was in fact a kitchen shop.
The aim of the card sorting was to understand how users categorised these 80 products with the bigger goal of arriving at and then validating a site structure and information architecture (I/A). From this I would derive a site map and navigation schema.
Conducting competitive research
Research was undertaken to identify both direct and indirect competitors and then evaluate their strengths and weaknesses relative to the client. It became clear very quickly that there was a parity in feature-set across most of the online destinations, with brand, product range and value proposition acting as the main differentiator.
The key insight from the research was the existence of an established taxonomy across comparable kitchenware products online. I had already undertaken user research (card sorts) to arrive at a categorisation, but I would revisit and re-validate my decision-making especially where categories had required tie-breaking from equal user selection.
Creating a sitemap
The I/A and site-mapping was undertaken in parallel to the user research phase — in the early stages I worked at sketch fidelity before moving into Omnigraffle as the closed sorts begun. The final sitemap was the culmination of a number of iterations in Omnigraffle.
Selecting a primary persona & scenario to explore
For the primary persona I selected Charlotte who shared consistent goals, concerns and lifestyle factors with our interviewees. The following scenario was selected:
A young professional is planning to host a dinner party on Saturday, and wants to place an order in advance for additional plates and glasses for the guests.
To better reflect the themes that surfaced in the user interviews the scenario was expanded to include the fact that Charlotte had researched offline previously and knows what she wants, as well as that she required in-store pickup at a time she can slot into her busy schedule.
Storyboarding an outcome statement
I chose to use storyboarding as the way to communicate my outcome statement — depicting Charlotte’s scenario in a visual and emotive way but sticking to the outcome statement formula of Situation, Problem, Solution and Outcome.
Running a design studio
Design studio is a collaborative methodology I used for rapidly generating ideas — in this case we (myself and two colleagues) explored how Charlotte could achieve her goal.
The flow design
Coming out of the design studio I had a number of potential approaches to the scenario — though at this point they were disjointed and unstructured. The next stage involved solidifying and linking ideas together first at a page-level, then at a more granular click-level.
Prototyping involves developing low fidelity models that we can quickly and cheaply get into the hands of our users and use to test our design solution. For this project I worked initially with paper before moving to a higher fidelity digital prototype using Sketch/InVision.
I provided my users with a scenario and asking them to perform tasks that mirrored those our primary persona was undertaking.
Paper prototype: I used a simple modular approach for the paper prototype, creating a template with a site header and footer only, then placing cut-outs into the centre to simulate interaction and navigation as users completed the tasks. This was done at a very low fidelity with website elements roughed out on white paper with a sharpie. As user tests were concluded I could respond to feedback quickly by generating new elements in seconds.
Significant changes were made quickly on paper — a top-nav drop-down gave greater visibility and allowed better access to sub categories, and a similar approach was taken to top search results (giving users quick access to the most relevant results but also allowing them to click through to the full results as necessary). The payment flow also saw multiple iterations at this stage.
Digital prototype: I used Sketch to digitise the paper prototype and create block fidelity wires and then uploaded screens to InVision where basic interactions were applied. Block fidelity was chosen as it makes it possible to start working on the prominence of interface elements by altering the shade of grey (prominent items being darkened) without distracting the user with the introduction of colour.
The testing continued through a further four phases. By this stage I was mostly making minor tweaks as opposed to major iterations. In response to user feedback, messaging was re-worked on the search page and a page filter was added to toggle between ‘everything’’ and only those products that were ‘in stock’.
The final screens (below) were prepared to send to the client along with the user flow, sitemap and an InVision prototype.
You can view the InVision prototype here.
There’s always more to do. This is what we would focus on next:
Design for mobile: It seemed a little odd not starting with the mobile implementation and designing up to desktop (given the personas’ mobile usage). A progressive enhancement approach would have been my choice for this project and exploring a responsive design should be an immediate and critical next step.
More testing: There were some quite considerable changes to the checkout flow in the final paper iterations and this is a great reason to do more testing. Ensuring users can effectively navigate this set of screens is critical to the site functioning as a revenue-generator for the business.
Explore scalability: The product list we were given was very short with little depth in the categories and the site was designed accordingly. Should the range extend significantly (making it harder for a user to navigate efficiently but also providing more data points by which to filter) a more common design pattern might see more granular filters (type, price, colour, brand, material, size) in a left-column rather than above the product.