A conceptual project conceived by myself after graduating from my one-year UX Design course.

Having already completed a highly-structured, process-driven mobile app, I wanted to focus on e-comm and look at how I could drastically improve a real-world, existing web store. 

Eventually, I came across the Stan Ray e-comm shop. Although all websites and user experiences can be bettered and improved, this Stan Ray website stood out to me as it had absolutely no mechanics to filter or sort products. In this modern, ultra-competitive e-comm market, a brand cannot afford to leave out such a major convention of online shopping. I realised this was the perfect opportunity to tackle…

Brand & Audience

Stan Ray is a unisex clothing label. Founded in Texas in 1972, Stan Ray made clothes that were designed for wear and movement, with minimum fuss and maximum practicality. But during the 80s, their fatigue and military-inspired workwear became sort after in Japan's vintage markets. Since then, the brand has continued to grow amongst street-culture communities and is a staple in any skater, surfer, indie musician or rapper’s wardrobe. 

These are predominantly younger people who keep up with current trends, are competent in online clothing shopping and will not put up with ineffective or antiquated websites. The website needs to reflect the label as a best-in-class, on-trend brand.

Premise

I wanted to look at how I could not only bring this UK/EU-based e-comm clothing shop up to speed but actually elevate the user experience of this site far above and beyond the brand’s contemporaries. 

I focused on the flow of one primary use case. When a user lands on the home page, clicks through to the Summer Sale, filters and sorts down the product listings to a limited few products (in this case; a pair of size 30” trousers), adding to the basket and ultimately checking out and purchasing the product.

Although the primary goal was to incorporate a filter/sort bar into the shop, I also wanted to look at any other opportunities to improve the experience throughout the whole use case. 

In my final high-fidelity prototype, I actually reverse-engineered their whole website from the grid system to the colours and fonts used to accurately recreate their site with my newly implemented user experience developments.

Challenges

As is any conceptual project; the primary constraint was not being able to work directly with Stan Ray and their chosen web developers. Therefore, I had no access to previously understood UX research and analysis, market research or brand approach.

On a more personal level, I was constrained by time, as I continued to freelance in the real world as a graphic design and communications consultant.

Competitive Benchmarking

I began by benchmarking two of Stan Ray’s key competitors - Nudie Jeans and Carhartt WIP, then Mr Porter - a high-end online department store that I included as a best-in-class apparel/accessories e-comm wildcard - all of which I believed I could learn a trick or two from, in regards to Stan Rays online shop. I included key UX heuristics that were applicable to each pain point or flow killer. I broke the experience up into three categories and seven stages;

Navigation
1. Homepage, 2. Sale Section.

Selection
3. Filter/Select, 4. Add to cart.

Purchase
5. Information, 6. Shipping, 7. Payment.

I wanted to learn what the competitors did well and what I would aim to emulate, what conventions had been established across the board and finally note all problems, pain points, flow killers and annoyances to pinpoint key areas I would aim to improve on.

My key takeaways from this research? I examined and noted down some terrific conventions that I would look to follow. But surprisingly, I found that there was still plenty to improve on - even on websites for these best-in-class brands. This included:

• Cumbersome and un-clickable homepage images and tiles

• Unintuitive or defective filter/sort mechanics

• Overly complex and confusing filter/sort mechanics

• Illogical and disorientating navigation

• Ill formatted check-out and payment forms

Competitor Gap Analysis

My next step was to take these benchmarks and see where exactly Stan Ray was missing key features in this Use Case user experience. For this, I also researched and included several other competitor brands to explore a broader, more overarching view of the e-comm market. I included Dickies, Levi’s, Goodhood and YMC alongside Nudie Jeans, Carhartt WIP, Mr Porter and of course, Stan Ray. 

Although each brand’s website had gaps in their site’s “sale” Navigation, Selection and Purchase user flows - it was blatantly clear where exactly Stan Ray was really failing; every single competitor had both filter and sort mechanics built into their websites - except Nudie Jeans who at least had the filter half. Stan Ray was the only site on the list that had neither mechanic.

Online Survey

My next piece of research was to create an online survey using surveymonkey.com. The survey was designed to further gain insight into each user’s experiences with purchasing clothes online and more pointedly, what insights I could glean from their preferences when it came particularly to online sale seasons. Keeping the survey short with a mix of objective and subjective questions - I successfully gathered some great quantitative and qualitative data.

Out of the 40+ users surveyed, insights included:

• 55% of surveyees had bought something online in the last 0-1 month. Only 2.5% had never bought something online.

• They were overwhelmingly more interested in an e-comm site if it had a sale on… 95%!

• When it came to sorting results; the top three preferences were sorting from Price: low to high, secondly NEW in the sale and thirdly Sale % reduction: high to low were preferred over other options.

• It was clear that most users surveyed (74.4%) preferred to browse products by category - not all products together, as was the case with the Stan Ray site. When asked Why? the common responses were “usually I’m looking for something specific” “Otherwise there’s too much to search through” and “Because I like to filter out unnecessary products”.

• The top three filter options preferred by surveyed users were; Filter by general size (XS, S, M, etc…) as most preferred, then Filter by designer/brand and Filter by specific size (W28”, W30”, W32”, etc…).

Usability testing (competitor mobile apps)

The Online Survey had come back with some really substantial quantitative data, but I felt I needed more specific qualitative insights to truly understand how users perceived the Stan Ray website and my sale purchase use case, so I turned my sights to usability testing the Stan Ray site.

I reached out to two willing subjects. A male and a female, both in their early 30s who each enjoyed shopping for clothing online. Each test was conducted separately in a controlled environment, was under an hour long and began with some light chat aimed at gathering some background info, which then developed into an in-depth interview discussing their clothing e-shopping preferences, goals and history. Next, we began the usability test. I asked each subject to find a pair of trousers in the Stan Ray sale and complete the whole process from the homepage through to payment details - right up to actually hitting the confirm payment button.

These tests were carefully moderated and gently guided by myself, but I made sure to let each subject come to their own conclusions and make their own choices within the loose parameters of the objective. All of the above was a chance to gather some extra juicy qualitative insights. Ultimately, these included:

• Streamlining, simplifying and uncomplicating the process will lead to better results and higher chances of committing to a purchase. For example, adding Filter/Sort mechanics, favouriting items and saving payment details for future purchases.

• Information Architecture and Navigation were two crucial aspects to target and improve on. Users were easily confused by parts of the navigation, annoyed when being pulled off their current product page when a popover would suffice and had to search for key product information that was buried under superfluous information.

Affinity Diagram

Of course, the first step of analysis was to begin compiling research into an affinity diagram. I spent a day going back over all the insights and finding all commonalities that popped out across the various research techniques. Writing insights on Post-it notes, I popped them all up on a blank wall. I then arranged them into groups and sub-groups that I believed to be appropriate. Each Post-it was also colour coded to what research method had been used, so I could quickly reference back to the raw data, when necessary.

Customer Journey Map

I then moved on to creating a CJM. Here I could visualise where exactly the Stan Ray experience was letting users down. It was abundantly clear that the main issue was at the Edit, Sort and Filter point in the journey - although it also visualises where else we ran into issues and where the Stan Ray site excelled.

Empathy Map

Lastly, an empathy map was created to illustrate the general user’s key pain points and concerns through analysing and understanding how what they did, said, thought and felt.

User Flow Diagram

I began with a flow diagram. I carefully structured every screen, screen state and user action during the whole process of exploring an online sale; from the homepage, to searching and filtering products in the sale section, to choosing a product and to the final payment and purchase stages. I wanted to make this detailed and in-depth, but also easy to follow. Of course, there would be numerous other Use cases and Edge cases - but this particular flow aimed to represent what the majority of users would aim to achieve on the Stan Ray website.

Low-Fidelity Prototype (Pen & Paper)

Even at this very early stage of design, I began to sculpt and cultivate what would be crucial design targets for the final website. I believe that the more I carefully iterate designs and plans at this stage will save time before I jumped to Figma. My lo-fi pen and paper designs were easier to quickly jot down and change before I started working on more technical specs and frameworks on the computer.

Mid-Fidelity Prototype (Figma)

As the Stan Ray website already existed in the real world, I had an interesting chance to explore how the site was built. On the whole, there were many factors of the site that did not detrimentally affect how the user experienced the process - so I was able to reverse-engineer many of the site’s real designs to mimic this in my Figma-based prototypes. 

For starters, I was able to ascertain exactly what typefaces and icons were being used. Although some may think this might be “jumping the gun” on a mid-fi prototype, I believed it would simply help me further down the line, knowing that the typefaces and icons used can really affect the spacing and layout of the designs. The same was reverse-engineered and mimicked for the essential UI design of the site. Cornering, colours, boxes and buttons, graphics, headers and footers, interactions, affordances etc were all carefully recreated. This saved me crucial time and energy, rather than focusing my efforts on trying to develop and imagine new - yet ultimately superfluous - design traits. 

More importantly at this stage, I also recreated the page grid and column spacing on my Figma designs to match those of the real site. I aimed to make this grid as interactive as possible, as to create a great framework to work off as I reached the high-fidelity stage. 

I built my prototypes within a 1728px frame (the width of a new 16” Apple MacBook Pro screen). Within this, the majority of the pages and frames followed a 12-column layout, with 56pt margins and 16pt gutters. I aimed to work off the standard, conventional 8pt grid down the page. 

I also created my key Figma components early on, as to save time and effort as I worked my way through the flow and as I began to populate these components and tiles at the high-fidelity stage.

UI design elements & final high-fidelity prototype (Figma)

As the Stan Ray website already had clearly defined UI elements, I simply worked on recreating the design guidelines and library for my Figma project. 

Populating the homepage, product tiles and product images was achieved by simply borrowing from the existing Stan Ray website. As I had already explored designing UI elements from the ground up in my previous project, I took this as an opportunity to practice following a brand’s strict and methodical design guidelines. 

As mentioned, I was able to reverse-engineer the brand’s typefaces. After a careful study of the site copy and titles, I managed to confirm that the brand was predominantly utilising fonts from the Inconsolata and Roboto families in tandem, across most of their titles, buttons, tiles, small print and body copy.