This concept project was about designing the first e-commerce art supply for a Shoreditch art supply brand. I’ve found some interesting things on conducting the design process, putting my assumptions and biases aside, and how important it is to trust the process. If you’d like to just find out about the outcome, please scroll to the very bottom of this article, but if you’d like to see the granular steps it took to get to this (see video below), please enjoy the journey:

The Latest Prototype Walkthrough using Dean’s Journey

The Client Wants to Maintain their Brand Image

The concept project’s client is Arty’s, a Shoreditch neighbourhood art supply shop that’s been open since 1982. Located on Columbia Road, they are part of the local community that caters to customers ranging from local residents to small businesses.

They would like a new e-commerce website, they want to showcase our products, while maintaining their brand image. They want to maintain their values:

  • Maintain their ‘small shop’ appeal
  • Great customer service
  • Focus on high-quality over quantity
  • Reasonable pricing

Some prioritisation work has already been done with the client. The website must have the following:

  • Have clear ways of locating specific products
  • Support a single page for each product which can be linked to directly
  • Have an efficient way of purchasing one or more products
  • Steer customers towards popular products
  • Establish the brand and its point of difference
  • Allow customers to contact the business (including to request a product not otherwise stocked

Doing some Market Research

After looking over the brief, I started research on competitors websites to see any trends or patterns in their . I looked through both direct competitors (such as Fred Aldous, Cass Art, Cowling & Wilcox and London graphic Centre) and indirect competitors (Nike and ASOS).

From the Arty’s brief, I’ve listed the features need to take look at include Categories/Search, Product Selection/Checkout, Recommended Products, About Us and Contact Us. I think it corresponds to the list of compulsory features the client is asking for.

Competitive Analysis

The good websites met all of these requirements, but the best websites (with their features highlighted in green) showed the best examples of these features. I kept these websites in mind during the design process. But researching competitors can only take you so far, so the next step was to go out into the field and find a potential user.

User: “I prefer it if I can hold the products”

I conducted a user interview on a twenty-something art-supply website user who browses these sites for both professional and personal use. She was an activities co-ordinator for a psychiatric ward who had to order items in bulk and she’s also a hobbyist illustrator.

I don’t usually tend to use websites when buying art supplies. I go to shops because I like testing materials before I buy them, and pens. I like the feel of the brand and use them more … — User


  • User likes the interactive aspect of an in-store and doesn’t like that stores doesn’t have that aspect
  • Likes free art resources online (referenced Faber — Castell website) showing how products work
  • Minimalistic design but not outdated — not much advertisement. Doesn’t like distractions on the websites to hinder from the goal.
  • Having a social media influence — links to blog posts about art product reviews

Designing the Navigation System

After carrying out a competitive research and a user interview, I started drafting the sitemap using a card sort. I initially used two open card sorts and two more closed card sorts.

User performing an open card sort

The two initial card sorts showed that users tend to categorise products in a manner that’s quite granular. Users tended to categorised products into more than seven categories, which would clutter the navigation interface. Some of the categories included ‘Media’, ‘Printer Inks’ and ‘Adhesives’. However, the closed card sort and a collaboration with my team led us to find the best categories.

The Final Sitemap:

The Seven Main Categories

The navigation’s efficacy will be tested in a user test later (I’ll refer back to this later).

We Finally Meet the Average User ‘Dean’

Arty’s gave me a list of user personas to use during the design process. I used a mix of the persona and the users I interviewed. Dean is a twenty-something Art Student in London. His goals are:

  • To spend his time wisely, so he can interact and be part of his community
  • To make a good purchasing decision on a budget
  • To support local business and avoid shopping at giant retailers

Arty’s provided a set of user journeys for Dean that I can design and map the actions the user takes (digitally and offline) including any binary desicisons they must make. The one I thought fit best for Dean and the users I interviewed is the following:

Dean is an art student who is looking for linen canvas for a project and needs the supplies delivered at school.

Sketching Out Dean’s Story

I created a storyboard for Dean’s user journey to establish the problem and ideal outcome for him.

SITUATION: Dean is an art student who lives in London. He goes to school between 8 am to 6 pm.

PROBLEM: He needs to buy some specialised linen canvases for his final project from Arty’s, but he has to stay in school the entire day so he won’t be able to go out, check the quality or buy it in person.

SOLUTION: Dean completes a search online and finds that Arty’s have a website with interactive content to show how they use the products and they deliver to his area during the day.

OUTCOME: Dean can now get specialised linen canvas that he selected to be delivered to his school during the day just in time to start the final project.

Once I’ve established the main steps of Dean’s user journey, the next step was to create a user flow.

Dean’s Happy Path

After defining the main steps in Dean’s user journey, I’ve created the ideal user flow or ‘happy path’. In the competitive research I found that on average (with just the main path) it took users to get to the ‘order successful page’ in 6 steps. So in the user flow above, without the extra steps like ‘zooming into photos’ etc, there are six user steps.

After creating the ideal user path, I started drafting ideas for the paper prototype with my team so we could start user testing and iterate.

Solving the User Design Problems

First quick sketch during the Design Studio

During the Design Studio with my team, we drafted several website layout ideas, compared each sketch and iterated with two more sketches until we got the best iteration of that design studio which became the foundation of the paper prototype.

Main Features (Going back to create features that the client wanted):

  • Clear Ways of Locating Products — The navigation bar has been changed to the six main categories determined in the sitemapping step, with a lot of overlap on the names of the categories.
  • Efficient Way of Purchasing One or More Products — Another great idea that came out of the studio was to create a slide-in basket that users can click on to see their purchases so far and hide to continue shopping.
  • Steer Customers to Popular products — Recommended products areas were added tot he Homepage and the Product Detail Page.
  • Support a Single Page for Each Product — To add to the compulsary page, have a large dominant image of the product and reviews
Product Detail page design that came out of the Design Studio

User: “Navigation is clear and easy to use”

I conducted a few user studies with the story of Dean as the framing task with sub-tasks. The main insights are as follows:


  • Main navigation is clear and straighforward
  • Likes that the basket is visible without navigating away from the page
  • Likes the review feature on the Product Detail Page
  • Likes the video feature that accompanies the images on the detail page.


  • Doesn’t like that the basket is slides from the right and fades. Would prefer it to be controlled when it can be closed.
  • Popular Products and New Arrivals look clustered on the screen.
  • The ‘Email Receipt’ button shouldn’t be after the checkout process but should be automatic anyway.

The next steps would be to address the negatives from this user interview to improve the current design and improve Dean’s user journey.

Paper Prototype User Test

Taking the Design from Paper to Digital

Now there are new user insights, I’ve taken the learnings and implemented them in a new digital design. The programs I used was Sketch to transfer the design from paper to online and synced them to InVision to create a mid-fi prototype.

Version 1 (left) and version 2 (right)

Main Learnings for Version 1:

  • De-cluttered the Homepage — Version 1’s homepage still looked cluttered
  • Reviews by Experts — In the first version, users didn’t like the layout of the product detail page, you had to click on a separate tab to access the reviews. In the second version I’ve separated the reviews into a separate space in the page.

Next Iteration (Version 2):

Version 1 (left) and Version 2 (right)

After the second iteration, I ran another user test and found some interesting learnings:

  • Empty Spaces Are not Our Friend — On the top of the Product Detail page, there was too much space next to the image.
  • Reviews Too Low to Scroll — Another user suggested the reviews be moved higher to the top as he wouldn’t scroll that far down to read the reviews, even though its one of the first things he looks for.
  • Checkout Process Too Confusing — Users also said that the Checkout process is too confusing as there’s no uniformity on each page. There is also no way to know where in the checkout process you are.

The Latest Prototype Design

Final Run-through:

  • Basket was changed to a pop-out rather than a slide out function, with an ‘X’ function to control when to hide the box.
  • Changes the Homepage to have a Popular Products slider instead of listing the products on the page to de-clutter the page.
  • Kept the videos on the product Detail page to solve one of Dean’s user problems: How to have the In-Store Interactivity online. This allows the user to see how the product is being used.

Main Takeaways:

  • Have clear ways of locating specific products — Users found the navigation bar clear and easy to use.
  • Support a single page for each product which can be linked to directly — The product detail page has a large image, clear buying process, easily accessible reviews.
  • Have an efficient way of purchasing one or more products — Basket allows for the user to check how many products has been bought so far and the navigation system is easy to use to get to the second product.
  • Steer customers towards popular products — recommended products are both on the Homepage and the Product Detail page
  • Establish the brand and its point of difference — The website style is clean, modern and the reviews are all moderated by the Arty’s staff to allow for expert reviews to be on the website only.
  • Allow customers to contact the business (including to request a product not otherwise stocked — Contact page has an easy order form with an interactive map next to it.

Dean’s Problem:

He needs to buy some specialised linen canvases for his final project from Arty’s, but he has to stay in school the entire day so he won’t be able to go out, check the quality or buy it in person.

  • Delivery is available for schools and universities. Arty’s allow for student discounts for high school and universities.
  • The video interactive element of the product detail page allows Dean to check products and its use online

Personal Takeaways:

  • User Testing is very important to take away your biases, as it gives you learnings that you could not think of yourself
  • Its important to trust the process because each previous step informs the one before.
  • While its important to trust the process, its also important to have patience as the process isn’t linear. There are going to be many versions and iterations along the way.
  • Design Studio is a great way to discover different features or different styles of processes. It’s better to put many heads together than attempt to draft the first design by yourself.
  • Now that I’ve carried out all the steps on the process, the next project will be richer in ideas because I know what the process is asking of me and what improvements i can make during the development.

Source link—-eb297ea1161a—4


Please enter your comment!
Please enter your name here