Paper Craft- A small shop with a lot to give

UX e-Commerce concept project aiming to help a small independent stationary shop gain an online presence (2 week sprint).

Who is Paper Craft?

A small independent stationary shop in the heart of Hammersmith. Their products are higher end but want to appeal to everyone. They have always prided themselves on good customer service with a familial feel to their services.

My role

Working independently on this project, implementing new UI skills throughout the final design stages.

…

DISCOVERY

The Brief

• The business model is based on customer service, reasonable pricing, quality and keeping it local.
• Due to Covid-19 their sales have plummeted as they do not have an online presence, so they want a website developed to highlight their values.
• Through an improved eCommerce website, Paper Craft want to showcase their products while maintaining our brand image: “small shop” appeal and great customer service.

Goals

“A survey in Jan 2021 found that nearly 36% of consumers are now buying retail goods online, compared to 29% doing so in mid-April 2020.” (Forbes)

• The main goal would be to develop a online presence that improves their overall sales.

Researching Paper Crafts competitors

I researched the main competitors of Paper Craft, to gain insight into what these companies succeed in and what they potentially lack.

Main competitors

With the competitors I compared their websites and made a feature inventory to see what features were included and what were not.

Feature inventory of competitors.

There were some key features which all these five companies were often missing:

• Wish list often missing.
• Price of purchase not clear in bag.
• Irrelevant deals.
• Unclear homepage.
• Not huge amounts of personality coming through.

I also highlighted features which I liked to implement in my own designs.

User interviews

To gain a better understanding of what people want from stationary shops I conducted 8 user interviews to gain insights. Users were recruited using a screener to interview people who specifically shopped in stationary and art shops.

Insights from interviews

Main user insights

• Users want e-Commerce to be clear.
• Wishlist’s were a must.
• Suggested products is a bonus.
• Everyone used amazon- Due to their easy checkout process and next day delivery.
• Users do not like filling out lots of forms — they like the process of buying to be quick and easy.
• Registering an item would be cool prospect.
• Chat option is important- to get real life advice and help on certain products.

Target Audience

I developed two personas who both shopped at stationary stores but both had pain points which had created from research above.

Julias persona

Julias user journey

The main insights from Julias persona and user journey are:

• She hates not finding specific products.
• She shops at Amazon because of ease- but she wants to shop in independent shops.

Dans persona

Dans user journey

The main insights from Dans persona and user journey are:

• Frustrated he can not save items from previous shops.
• Would like to be able to register items from previous purchases.
• Hates getting redirected off product pages.

Summary of research insights

• Simplicity with a good navigational system is key.
• Clear quick checkout system (which remembers your details from previous purchases) is a must.
• Chat personalisation is key, not only for help for the user but also to give personality to the company.
• Redirection off products is frustrating.
• Wishlist’s were essential for users to come back and revisit the website.

…

DEFINING

Becoming the user

“Julia hates shopping on Amazon but does it out of habit, she struggles to locate products and is annoyed there is no loyalty scheme”

…and

“Dan has a specific pen brand he buys for his graphic designs, however, the websites he currently uses does not show him his previous purchases, nor can he locate the specific brand”

Navigation

Common themes for navigation were identified in an open card sorting session with 7 users. The product list was given to users to group into headings they felt would be make sense.

Card sorting themes

The main heading themes repeated were

• Painting.
• Drawing.
• Surfaces.
• Storage.
• Display/ Accessories.

Navigation layout

These headings were implemented in order to make the navigation as clear as possible.

…

DESIGN

Sketch prototyping usability testing

The sketch prototype was tested on four users, and iterated on.

Sketches to prototype

Insights from the user testing is seen below. This was iterated on and implemented in the first wireframes.

Insights from testing

Iterations

From testing the wireframes with 7 users there were some common themes:

• Quick view was confusing and it should be clarified what was meant.
• There was a sense of feeling ‘stuck’ within the process.
• The checkout and delivery section did not feel smooth.
• Currently the adding of items is confusing.

Clarification of product page

Ability to go back and continue shopping

Checkout clarification.

Removing the feeling of users feeling ‘trapped’

All the iterations were implemented in the final solution for the Paper Craft prototype.

….

DELIVERY

Style guide

Paper Craft is a modern stationary shop, wanting to appeal to the younger audiences. I wanted the colours and styles implemented to be modern and clean, which would attract a younger clientele.

I made a mood board to experiment with different colours and see what colours I felt would work for Paper Craft.

Mood board

Colours

I experimented with blues and yellows. From my research I liked these colours for an art shop, I felt it had an arty feel, whilst feeling young. However, after consideration I felt these colours were a little too harsh for a whole website.

The final colour pallet is seen below. I felt the mixture of some very muted tones with pops of bright colours was most effective.

Typography

I experimented with different typographies, again wanting to give a modern feel to Paper Craft, but not wanting to modernise so intensely that it would lose its loyal older customers.

Typographies

Different colours and typographies were tried on users to see which they preferred and reacted best to. It was clear users created bet to the typography Playfair Display, with others appearing much more clunky. Similarly the more muted colours users preferred.

Solution

The design process described above resulted in a high-fidelity prototype of the app made using Figma. Some of the key flows of the app are shown in the GIFs below.

Home landing page

Product page

Check out

How did I meet the brief?

I developed a e-Commerce website for Paper Craft in which their products are effectively shown as are the offers which Paper Craft pride themselves on. The whole sit needs more development but I think this site would give Paper Craft the initial online presence it wanted.

Next steps.

• Make the checkout system more smooth- more research into checkout.
• I want to develop a register items section- this was a popular idea from the user interviews but I did not have the time to implement it.
• Develop the UI- I think the colours and typography are not quite correct, think they need to be more subtle.
• Test prototype on more users- The high fidelity prototype was only tested on one user so I would like to gain more insights from testing.

Thank you for reading this far!

Let me know if you have any questions or comments on my designs for Casper Sleep.

And/Or

If you’d like to have a chat about anything design related I’d love to hear from you!

You can also find me on LinkedIn and via my portfolio.