Case Study: Archibald Sisters Website Redesign

My Role User Researcher, Sketch & Wireframing, information Architecture and Visual Design Client Archibald Sisters (Student Project)Duration Two Weeks

Problem

Imagine you are a local business that’s been around for well over twenty years. You are well established part of the community. However, there has been a big change over the years in how customers shop and this has effected your local business.
There is now not just surrounding competitions in your area but online competition. The main objective for this project was to improve a local website’s by bringing it up to date. I’ve chosen a business that has been in the community for many years: Archibald Sisters. The site lacked visibility for products as well as a lack of product descriptions.

Discovery and Research

Now more than ever it’s important to have a website that represents its business. Why is that? Because there are many customers that prefer shopping online for basic needs.

Archibald Sisters ranges from eclectic items like fragranced soaps to fun individual cards. However, their website only shows a few products with lots of fragrance options.

I’ve gathered that the Archibald Sisters most likely relies heavily on local physical shoppers rather than online shoppers. There is a lot of potential revenue that Archibald Sisters could tap into if they update their website today.

To prove this point, I gathered a handful of users to interview about how they would typically shop for their product as well as had them test out the functionality of Archibald Sisters website. I then had users do card sorting to see if the products matched there respective page.

Crucial Insights

User Interviews

  • Most users typically shop for similar products in person and would like to know what items smell like before buying the product.
  • Another user preferred online shopping method product because of how easy it was. Another user said they like to support local businesses.
  • Familiarity with product and stores are important for users.
  • Affordability of the products are also an important piece.

Contextual Inquiry

  • All users agreed that the main issues of the site was the lack of fragrance list descriptions and images of products.
  • The list of fragrances was too long for a user to choose.

Card Sorting

  • There are not as many products available on Archibald sisters compared to other websites.
  • The main issue with Archibald sisters website is how they arranged the fragrance list beside the product.
  • From cards sorting the products were fine as they were but some products can be put into other categories.
  • With over 150 fragrances they need to be sorted in a way to make it easy for the user to scan through.

Who are the customers?

“I don’t really shop online for products I’m very picky about what I put in my hair CBS for the others like lotions I like to smell them” →

Problem / Users are picky about what kind of products they us on their skin and hair. These users would rather test out the product in person and have the opportunity to smell the product as well.

Solution / Archibald Sister’s website can enhance the users experience by offering samples of their product. Providing descriptions as well as reviews from other purchasers would sway these kinds of customers and give these products a go.

“Unless I had been to the store before and just happened to have a lotion/fragrance that is an absolute must have and then I can just buy online to save time and support a local business, then sure. Otherwise, I would not buy online from them.”

Problem / Users find the site a huge pain when going through and selecting a scent. With over 150 scents it was overwhelming for all users who went through this site.

Solution / Improve flow of scents create several options for users to select product and scent. Create a category section for scents and then have users select products.

Overall Results

When shopping online, users are expecting products they know and trust. They need proof as that a product is good and what is involved with that product. Archibald Sisters is lacking in reviews of products, images as well as descriptions of scents for their online shoppers. Users didn’t like how the main homepage had a quick buy section and felt the site lacked a good usability experience for buyers.

Design

So how do we fix Archibald Sisters current site? The main fix is
to add product images, review sections and descriptions of scents that go into the product. We need to make the experience fun for a user by adding more options to buy products and go through a selection of scents to help narrow down the selection. I used C&C analysis to help me look at what was missing in the website and what it needed in order to compete with other comparative sites.

Color / I kept the tone of purple and pinks throughout the Archibald Sister’s website. Since the company is a beauty brand I believe the colors were to be kept. I also added black and white to it’s color scheme to make the colors really pop throughout.

Type / For typography I kept to about three to four different types and kept the font sizes as well around that number. The type I used for the website’s logo I tried to match with the original logo. I felt that the typeface matched well for the site.

Setting Up the Structure

New information architecture

  • Adding Reviews
  • Best-selling products on main page
  • About page and why choose Archibald Sisters
  • Shipping details
  • Login and create feature
  • Search bar
  • Checkout process be more intuitive
  • Description on scents and images on products.

Ideas to Action

The Wireframe

After my initial sketching I moved on to Mid-Fidelity. My main focus for the website was to organize the 200 scents so users weren’t put off by the amount to choose from. The addition of a scent description was important for users so they can get an idea of what they are selecting.

When testing the Mid-Fidelity users loved the find your Fragrance Section. They found the website clean and easy to navigate. I found that many users would click through the Find Your Fragrance section to find the product they were asked to search for instead of using the tab above. I used this method because there were few products on the website but over 200 scents to choose from. This really helped narrow down a users choice.

Final Wireframe

I rearranged the top navigation bar several times to give it a better flow for all the icons. I wanted to bring in the quirkiness of the Archibald Sisters store and apply it to the website.

I used big pictures to get across the fragrances categories options for buyers of the site. I wanted it to be the first thing users see so they aren’t as overwhelmed with the choices of fragrances when selecting a product.

For next time, I would make corrections to the websites colors to make it less ‘in your face’ to users. More features and animations are needed for the website. More testing will also be needed for the Hi-Fidelity changes.

View The High Fidelity Wireframes

EVANGELISTADESIGN

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store