Paper Craft — an eCommerce site proposal
A two week sprint as part of my UX Design Immersive at General Assembly, designing eCommerce site for the local stationary and art materials store, Papercraft.
The Brief
“The highest priority will always be given to the face-to-face contact we have with our customers. A year ago, we saw an opportunity to support the local community by allowing people to order some products online. We built our own website but we’re not pleased with the results. We have plenty of website visitors yet few completed purchases.”
The challenge was to create a website that allows the local community to order products online, while maintaining the ‘small shop, great customer service’ brand image.
The essential features that the website must include, as laid out in the brief, were:
- Have multiple clear ways of locating specific products.
- Have a product description page for each product.
- Have an efficient way of purchasing one or more products.
- Steer customers toward popular products.
- Allow customers to contact the business.
Discover
Competitor Analysis
The first stage of the ‘discover’ process involved getting an idea of what’s already out there through some competitor analysis
I wanted to see what kinds of features and layouts other online stationary stores used on their websites. I looked at big brands as well smaller, local ones, recording which features different websites included in a feature inventory
The key features that I noted on other sites which I felt most helped to humanise these brands were blogs, newsletters, links to social media, sustainability pages, ‘About’ pages and accessible customer service details
I also did a task analysis for a few of the key pages that the Paper Craft site would need on sites that had good examples of these pages.
Doing this research right at the beginning helped to give me a good frame of reference as I started out the project, and I continually referred back to these tables when designing my prototype.
User Research
Another important part of the ‘discover’ stage of the process was gaining insights from potential users into what they need from a website, and what they value about local stores that could translate onto a website.
I started by sending out a screener to find some potential interviewees.
From this I managed to find seven very helpful candidates and I put all of the insights from our interviews into an affinity map.
This reinforced to me the importance of the key features laid out in the brief:
- Users like a variety of features to help them locate products
- Product descriptions and reviews help users trust the website
- A slick and efficient way of purchasing one or more products is important to users
- Users like seeing popular products and suggested products
- It’s really important that they have an easy way of contacting the business
The interviews also highlighted some additional insights to add to the brief:
- Users like shopping for stationary and art materials in person so they can see the items, so a website needs to have multiple clear images
- The aesthetics of the website can help users’ trust and loyalty to the brand
- Evidence of a human behind the website — for example through a blog or through an easy means of chatting with the team — is really important to users
Define
With these insights in mind I was able to define the user persona and their problem.
Leila works in a creative industry and makes art in her spare time. She loves shopping in independent stores and tries to do it as much as she can. I would return to this persona throughout the design process, to remind myself exactly who I was designing for.
I mapped out her journey as she shops on a small art store website.
While Leila’s satisfied with the products from smaller, local art stores, and is happy once she’s finished using the website, the process of finding products, navigating the website and filling in all her details as she checks out can make it hard to resist shopping on Amazon instead.
Based on this journey map I defined her problem as: ‘Leila needs her shopping experience on Paper Craft to be easy and enjoyable, and to reinforce her trust in the brand, as she is currently tempted to buy her stationary and art materials from Amazon.’
Develop
I mapped out the most important flow for Leila, which was to find a product and check out.
- She had to be able to find the products easily using the search or filter or categories
- She needed a helpful description of the product with images
- If she needs any help she should be able to easily chat with a member of staff
- She should be able to use express checkout, or if she prefers use her card
To help with the first stage of the flow — finding the product — I asked eight potential users to card sort the shop’s stocklist into categories.
The recurring categories were:
- Drawing
- Painting
- Paper
- Tools and Accessories
I mapped out these four main categories in a site map, and the way I could then divide those categories.
I also included the features that my interviews had shown were important to users, like an instant chat feature, a blog and a sustainability page, to help build Leila’s trust in the website.
Based on this I sketched out the screens for the flow, which I made into a Marvel prototype and tested on two users. My users didn’t have any problems finding a product and checking out using the paper prototype so I took this sketch to a mid fidelity wireframe.
Testing my mid fidelity prototype on five users, I gathered their insights into another affinity map. This revealed three main problems my users had which needed to be resolved.
1. My users found the buttons in the shopping cart a bit confusing, so I needed to emphasise the important ones to the user, which I did by turning this:
into this:
2. They were also frustrated that they could not see what was in their cart while they were checking out, so I added a pop up to my high fidelity iteration.
3. Lastly, my users struggled when entering their card details so I made it clearer for them what they needed to write in each section by making the boxes the appropriate size.
As I was developing this high fidelity prototype, I needed to consider the colour schemes and the typography. I created a mood board to generate some ideas based on the brand and my user interviews. As an art store I felt it should be quirky and creative, but it was also really important to my users that the brand felt friendly, approachable and trustworthy. After playing around on Coolors I decided on a final palette.
I knew I wanted the orange to be the main colour, as I felt it was a warm, fun and playful colour.
I then experimented with some different fonts and drew some logos on Figma, eventually deciding on the one I felt was the most legible.
Once I’d added colour and fonts to the prototype, and used a contrast checker to make sure everything was still accessible in colour, I tested this high fidelity iteration on two users.
They navigated the flow easily, but one problem I noticed was that it wasn’t clear enough where they were in the checkout process, and they didn’t immediately know the buttons on the checkout page were clickable. So in the final iteration of my prototype I added a clearer button, and emphasised which section the user is in on the breadcrumbs by making the circle turquoise rather than grey.
I also pushed the user’s selection to the background once they had chosen it, so that their next selection was brought into focus.
Deliver
Take a look at my most recent iteration.
If I had the chance I would love to develop a sustainability page, and a page where users could attend online events and workshops, again to reinforce their trust and loyalty to the brand.
What I learned
- How helpful research can be in categorising items on an eCommerce site
- The use of feature inventories and task analysis in prioritising what should be included on a site
- How to moodboard colour palettes and typography in order to develop a high fidelity prototype
- The importance of remaining mindful of the diversity of possible users and ensuring the accessibility of the site
