MENU CLOSE

UX Bootcamp project: ‘Wild Gear’

CASE STUDY

Project Description

At the begining of 2024 I attended the 10-week UX/UI Skills Bootcamp at Bath Spa University, as a part of my ongoing professional learning. I’m a strong believer in exploring and developing new skills, and the bootcamp was a great opportunity to consolidate the knowledge I already had of UX and user-centred design thinking, and also to learn more about the role and workflow of a UX designer alongside best practises for running all stages of a project.

This project was completed as part of the Bootcamp, the aim being to bring together the learning we had covered and produce a portfolio-ready case study documenting the journey.

This is a pretty long article, so I’ve added a button below to jump straight to the good stuff:

Tools

  • Miro
  • Figma
  • Adobe Suite

My Role

  • UX Designer

Timescale

  • 5 weeks (part-time)

Process

For this project I’ve followed the Design Thinking process, which is pretty close to my natural way of working. There are a few variations around this method but the process followed this format:

circle-1

Brief

2

Research

circle-3

Analysis

circle-4

Ideation

circle-5

Design

circle-6

Testing

Within each phase of the design Thinking model there were several activities to choose from, the best ones to use would be dependent on time available as well as the nature of a specific project. As you read down this article I’ve outlined all the steps taken.

Phase 1: Brief / Understanding

The challenge was to design an e-commerce website that ‘captures the spirit of outdoor adventure’.

There are many, many websites doing exactly this already, so to stand out in a crowded marketplace will be tricky. however, this also means that were are plenty of working examples to research and find what works and what might be done better in my own solution.

The brief was well-defined, with Target Audiences outlined as well as a Considerations section which highlights some key objectives for the end design.

The key stages in meeting the brief were identified as:

  • Research into existing companies/websites and evaluating what they do well – what might we do to improve on existing solutions in this space?
  • Learn about the key audience requirements for this kind of website’s customers – use research via surveys/interviews to gather real data and challenge assumptions about user habits and needs.
  • Translate the research findings into useful tools to aid an effective solution to the brief – use competitor research to create a list of tools/features for inclusion in the final designs, learn from the process where best to put them; use insight from the user research to develop example personas showing use-cases and needs to measure design solutions against.
  • Create effective, interesting designs that meet the practical needs of the brief but also engage the audience on an emotional level through engaging design and messaging, to deliver the best possible experience.

Deliverables

  1. Process Journal – documenting research and design decisions
  2. Homepage design – for mobile and desktop views
  3. Working prototype – demonstrating a user journey

Phase 2: Research

Research was split into two main areas of focus: Competitors, and Users.

For the Competitor research, I studied a number of other companies with eCommerce websites across different market sectors before focusing on four which seemed to have slightly different approaches. the hope was that I could find the tools/patterns which made those sites work well, while also learning a little about what to avoid doing in my own designs.

For the User research, I decided to focus on quantitative data gathered via a questionnaire; with the limited timescale of the project this would likely be the quickest route to a wider range of experience and opinion. I was fortunate to have a good response to the form, with 65 respondents over three days before it was time to move to the next phase.

I did quite a lot of work on the research, as this was a project stage I wanted to get some good experience in. If you’d like to see more details I’ve tucked it away here:

After assessing a wide range of websites I decided to focus on a selection of four competitor companies, each with a different approach to messaging and overall design, with the aim of being able to cherry-pick the best features and learn the most about what didn’t work well:

  • Patagonia – for this brand activism and eco credentials take centre stage. Overall the site was well thought out, with good emotive content on the homepage paired with a functional shop that focused on the task of finding products and ease of use.
  • Mammut – a more performance-focused tone of voice and a clean design to go with it. Everything is a little sharper and the pared-back palette flowed through the design and products alike. Lots of neat techie touches made it feel reassuringly modern.
  • Osprey – a narrower range of products meant the website was likely to need to work in a different way to Patagonia and Mammut. At first glance everything seemed fine but on closer inspection there were a lot of things about the website that made it disappointing to use.
  • Cotswold Outdoor – taking a different direction, this multi-brand high street chain has a LOT of products on offer, so again it requires a different architecture to the single-brand websites. Much more store-oriented, it was interesting to see the different focus required when there’s not just one brand message to promote. Lots of useful tools fo the user made this site a surprise hit.

After going through each site thoroughly and testing how the user/purchase journey worked in each case, I took reference screenshots of key pages from each website and laid those out with a spreadsheet to hold my observations so that I could view everything side-by-side.

I’ve included a screenshot of the Miro board below, you can click the image to view a high-resolution (readable) version if you wish:

Screenshot from my Miro board showing the assembled/annotated Competitors research
Screenshot from my Miro board showing the assembled/annotated Competitors research

I decided to send out a user survey to learn more about people’s online shopping habits, but didn’t limit it strictly to ‘outdoor’ clothing and equipment: I believe that shopping online is an activity with the same basic challenges no matter the type of product you’re buying, and in taking this approach I hoped to bring in some insight from a wider audience.

I included some qualifying questions in the form, so that I’d be able to track any trends in answers between respondents who did/did not take part in regular ‘outdoor’ activity, with the aim of being able to focus on the wants and pain points of those people most likely to visit the company’s website as a user with the best potential for purchases/repeat visits.

The questions are structured to gain insight to specific aims for the project, as follows:

  1. Demographic/life habits
  2. Shopping habits
  3. Online shopping preference
  4. Wants
  5. Pain points
  6. Social media/online community engagement

There were 65 responses to my survey, which for the purposes of this project was ok to work with.

I used a mix of quantitative and qualitative questioning in the survey, with simple multiple-choice questions for demographics and general patterns of behaviour (how often do you take part in outdoors activities / shop online, etc.) and open qualitative questions for enquiries where I either didn’t want to limit/lead responses (what outdoor activities do you take part in?) or sought a more emotive response (what about this website keeps you coming back? / what has discouraged you from buying online?)

I got a good spread of age groups among respondents, this was likely skewed a little toward the middle-aged/older groups because it was shared mostly among my peer group.

Gender, too, was likely skewed toward women because of how the form was shared into social groups and the small sample size. I would expect a more even split.

I was surprised to see the frequency of people’s outdoor activities, I’d expected it to lean more toward weekly occurrence, this is a good example of surveys challenging assumptions.

For shopping frequency this landed more or less where I’d expected: mostly occasional shopping for outdoor clothing/equipment (it would depend on how people interpret that) means visitors to the site would likely be first-time or very occasional customers and so may want an account facility but it wouldn’t be the most important aspect.

When making a purchase on a given site, the three most important considerations were shown to be Price, Reputation and Reviews, showing that the main thing people want at the end of the day is a good deal that they can trust.

Again, I’ve included a screenshot of the Miro board below, you can click the image to view a high-resolution (readable) version:

Screenshot from my Miro board showing the assembled/annotated Users research
Screenshot from my Miro board showing the assembled/annotated Users research

Phase 3: Analysis

3.1 Data analysis

From the Competitor research, I re-read my notes and highlighted the trends, hits (good bits) and misses (bad bits) from all the sites and summarised those at the bottom of my spreadsheet.

The results of the Users research questionnaire were shown as diagrams by default which made it fairly easy to see overlying trends for each answer. I also fed the responses into a spreadsheet, which allowed me to more easily see the relationships between a respondent’s answers which gave more context, and some patterns began to emerge. As a further step I streamed the respondents by shopping frequency, to help focus on the needs of the most profitable users and weed out any respondents who simply didn’t shop online.

Key findings for all the data were then pulled out into statements to help guide the next steps:

3.2 Affinity mapping

Key points from the research were pulled out to create cards under a set of categories: business goals; user wants; user pain points; user tasks; and features to include (which might help address the goals/wants/pain points/tasks).

First, I sorted these under the category headings in Miro to get an overview:

Screenshot of my Miro board's affinity map
Screenshot of my Miro board's affinity map

3.3 Personas

Using the affinity map as a reference point alongside wider insights from the questionnaire, I developed three Personas to represent user cases. The aim was to recreate the trends form the research into relatable models that would guide customer flows and identify potential pain points at each stage of the purchase journey.

Callie Jones persona
Earl de Zoete persona
Emily Sutton persona

3.4 Synthesis

Using the personas as a guide, the affinity map cards were pulled into a flow to see how the Business goals could be achieved while giving the best experience for users. The resulting diagram (below) helped to show where each of the User’s wants needed to be prioritised, alongside the tasks they would likely be completing and the features/considerations that would be required to meet those wants.

I continuously referred back to this flow in the later stages, to keep focus on features vs tasks vs goals.

Screenshot of my Miro board's Synthesis diagram
Screenshot of my Miro board's Synthesis diagram

Phase 4: Ideation

Time to put all the research into use …

4.1 User Stories

Building on my personas and synthesis exercises, I wrote some user stories to generate motivation for each persona to use the website. I found this was a good way to define challenges for the design while being one step removed from the visuals, breaking past some of my instinctive biases toward more honest user patterns.

Callie is planning her next big adventure, a holiday for herself and a group of work friends are travelling to Norway in the summer where they will hike the mountains and explore the fjords and coastal landscape. for this trip, Callie needs some sturdy boots that can handle rough terrain but also don’t make her feet too hot in the summer weather. She also wants to find some practical tops to wear on the trip. In the past Callie has found that shopping for clothes that fit reliable is a problem, so she needs a website with reliable sizing information.

Callie relies on others’ experience to guide her purchases so will be looking for clear and qualified reviews when choosing what to buy. She is browsing for items at work and in her lunch breaks, so will mostly be using a mobile device to navigate the website.

Earl and his family have been enjoying their weekend walks in the countryside. Earl would like to find a child carrier/backpack so that they can explore more away from the beaten track without his young child getting too tired. He has done a little research into products already but would like to compare a few products for features and cost, before committing to a purchase.

Earl is shopping from home, and will be browsing the website on a mixture of mobile device and his laptop. He hasn’t bought this type of product before and it’s a relatively expensive item, so he will be looking for user reviews when selecting a product.

Summer is coming to an end and Emily has decided it’s time to buy herself a new coat ready for the autumn rain and colder weather. She is short on time with work and a growing family, and would like to browse through some products to find a coat that meets her practical needs but still looks stylish.

Emily will be browsing from the sofa in the evenings, using her phone. Her main motivations to purchase from our website are clothes that look good on the site, backed up by clear technical information, reliable sizing and an easy checkout process.

4.2 User Flows

The next step was to convert the stories into actionable user flows, defining more tightly the path each persona would take through the website:

User flow: rows for the legend, plus Carrie, Earl and Emily's flows

4.3 Task Flows

For the purposes of this project, I focused on one task flow: what happens once a user clicks the checkout?

Diagram showing the task flow for checkout

4.4 Information Architecture

Using insights gathered from the research phase alongside the synthesis and user flows, I laid out the information architecture for the website. At this point an overview of the structure was fine, it would be refined further as I progress through the next steps.

4.5 Page structure

The main page structures were sketched out loosely to find the best route to meeting the user flows through the website. I used reference from my research (trends, hits and misses) while also paying attention to the results of the synthesis exercise and making sure the user needs could be met at all stages.

4.6 Challenge: ‘How might we…?”

Having set out a loose plan for the structure of the overall website and some patterns for the page layouts, I used ‘How might we?’ statements to challenge my solutions, based on the main pain points from the users research:

  • How might we … reduce the clicks to find a product? – Add section links using cards, so that users don’t need to search through the navigation menu
  • How might we … help users more easily find their right size of item? – Put prominent links to sizing information on the product page, also include a more specific/descriptive information fit guide in the information sections
  • How might we … better tell users about their delivery options? – Include a consistent banner to link to delivery/returns information across all pages

Following this exercise I adjusted the designs where needed and moved on to tighten the details a little.

4.7 Design progression: Crazy 8’s / Iteration

Building on the loose sketches and ‘how might we’ exercise, I used the Crazy 8’s method to quickly lay out some options for the general page structure. The results were assessed against the previous exercises and a general approach was chosen.

Next, I moved to Figma and built a wireframe layout using grids for consistency. The layout elements were grouped into modules which could easily be swapped in/out of the page – for the purposes of being able to easily read the design, I used a mixed-resolution wireframe with titles in place to identify the elements. From here, I made several iterative changes to develop the layout while checking against the user flows until I felt I had a solution that worked best.

Below is a screenshot of the homepage iterative process, I’ve highlighted the section cards, which are an important navigation tool, to show how they moved around the layouts:

8 wireframes of the homepage design, evolving left to right
8 wireframes of the homepage design, evolving left to right

Phase 5: Design / Prototype

Due to work commitments time ran a little short, so I’ve focused on only the mobile version of the website for now. I’ve built the front end of the user journeys into the designs in wireframes, and added the beginnings of a high-fidelity design.

I’ll return to the project in April once my ‘real world’ workload eases a little.

5.1 Brand style / colours

As part of the project brief we were supplied with a logo and colour palette. For me, this was an area that could be improved/changed a little, to better reflect the direction I’d like to see for the designs.

I took the logo and simplified it a little, which helps particularly in making it work as a smaller scale on the website. I also took the brand colours and remixed those for a more defined palette and brighter feel. Additionally, the new palette improved the contrast separation between the primary colours os we have more usable pairings as shown in the checking tool’s grids (you can scroll to compare new vs old below):

(New palette)
 PaletteContrast check (all pairs)Contrast check (valid pairs)Example graphics
(Original palette)
 PaletteContrast check (all pairs)Contrast check (valid pairs)Example graphics

5.2 Wireframes (User flow)

I have focused (for now) on building the user flow for Emily, who wants to buy a new winter coat.

To the right is a wireframe prototype for Emily’s journey, embedded from the Figma files. the steps to follow for this demo are:

  1. From the homepage, navigate to the Women’s section via the cards row below the hero panel
  2. Go to ‘Coats & Jackets’, via the card section again
  3. Filter the grid view to show ‘Waterproof’
  4. Select the ‘Shelley Parka’ (first item in the grid)
  5. Select Medium size, add the product to the cart
  6. View your cart. In case you’ve closed the popup, the Cart button in the top nav is working now
  7. Review the items in the cart … that’s it for now, I’ll need to finish building the checkout screens later!

If you prefer to run the prototype on its own page/on your mobile device, you can click the button below for that link:

Wireframes showing the (part-complete) user flow for Emily
Wireframes showing the (part-complete) user flow for Emily

Phase 6: Testing / Evaluation

(I haven’t got to this stage yet – I plan to return to the project in April and do some testing).

Conclusion

Following the UX workflow from start to (nearly) finish has been an interesting experience.

I came into the Bootcamp with a certain amount of knowledge from my day job but was keen to learn more about the UX-specific skills that I could add to my freelance offering and I knew I plenty to learn about the workflow-specific elements and how they came together within the design process. As such I (deliberately) spent a lot more time than was strictly necessary at the early stages of the project exploring the best options for researching the problem and assessing the data that came from that process; I also held back from jumping into the design stages (my usual instinct would be to just get on with the visuals!) as I wanted to follow the Design Thinking/UX process as closely as possible, and learn more about the steps I don’t usually get to work on.

While I ran out of time and haven’t (yet) completed the work, I can say that by following the process I’ve produced better, more thorough solutions. I was pushed by the research data to let go of some of my early assumptions on what would work best and it’s likely solved a lot of design issues that might have otherwise caused problems later.