Personal Project | UI/UX Design

An auto accessories e-commerce website designed with a female target audience in mind.

Software Tools: Figma, Figjam, Adobe Illustrator, Adobe AfterEffects

Read more below



The Problem

Historically, cars and their parts have been primarily marketed towards men, and thus the design decisions that follow are made with that demographic in mind.  According to the University of Michigan Transportation Research Institute, 105.7 million women are licensed drivers compared to only 104.3 million men. Plus, they make up half of the population, why does the automotive accessories business shy away from tapping into the buying power of women? On the flip side, why might women not want to indulge in vehicle customizations?

For the latter, I’ve narrowed it down to 3 possible explanations.

  • Practical issues (ie: installation, price, lack of information)

  • Unappealing products

  • User interfaces are not beginner-friendly

So the question is... 

how might we create an inviting, supportive auto accessory shopping experience for the female market?




Research


Competitive Analysis

To get an idea of how current companies are designing their auto accessories sites, I chose three top brands in the auto accessories sphere (Lincoln, Toyota, and American Muscle) to click through and see what the process of buying a wheel would be like. 
Click to read the details


Based on these three flows, there are 4action items I’ve landed on for Suki’s. 

  • Keep UI clean and concise, limit the amount of images to only what’s necessary on the landing page

  • Add installation information: how to, services. etc

  • MORE product images, several views of the item itself as well as images of items on the vehicle. 

  • “Why Buy?” include an explanation of what purpose the item serves


User Interviews

I needed to gather more insight on my guiding research question, “Why might women not want to indulge in vehicle customizations?”  Google search wasn’t cutting with the amount of details I needed. I wanted to know what kind of products women were using right now, not 4 years ago. What specifically was deterring them from making bigger purchases like body kits and rims... what were products they were on the fence about?

So, I reached out to 5 women, late 20s ~ 65+ to conduct user interviews on their perspective on auto accessories!

Here’s are some of my insights below




Personas

From these interviews, I noticed that there were 2 trains of thought. On one side, there was a much more practical perspective: women wanted accessories that were utilitarian and had a purpose whether that be to protect the car from damage, or help aid in driving safely. On the other side, the women also showed the appreciation for “bling” and being able to dress up the car in a way that was more expressive of their personal tastes. From these observations, I created the following personas to guide my designing.


*I do want to iterate that all the women I interviewed expressed traits from both Ellie and Pauline to varying degrees. Characteristics of both these personas come from the culmination of my 5 interviewees and are not derivative of a single interview (although I have seen examples of Ellies and Paulines on many social media platforms!)



Design


User Flows

For Suki’s e-commerce website, the most important flows to design for are:

  • Adding item to Cart/Checkout 
  • Browse products

Specifically for my target demographic, I wanted to make sure that I included elements that support the transaction process such as the ability to contact customer service, community reviews, as well as lifestyle images that can serve as inspiration for the specific product.



Low Fidelity Wireframes

For my target demographic, I wanted to make sure that I included elements that support the transaction process, such as the ability to contact customer service, community reviews, as well as lifestyle images that can serve as inspiration for the specific product.  I also wanted to make sure that I still addressed the main company goal




Paper Prototype Testing

To see how my flows would perform, I recruited 5 users to navigate through two tasks: Add a floral seat cover to your cart, and check out as a guest.  Through a simple paper prototype usability test, I determined key issues and also what users appreciated.

✔️What was working
  • Loved the icons of the cars
  • Navigation was very intuitive to users
  • Appreciated the ability to input car information
  • Thought the car progress indicator on the checkout page was fun and charming


🔨 What Needed Rework
  • Wanted the ability to input email for checkout
  • A way to see if the item the user added is compatible with their vehicle
  • Option for ApplePay
  • Safety information on the product
  • More space for input fields
Branding

I know that the style I choose to lean into is unconventional for the product and automotive industry, but this choice was in response to user interviews. Part of the issue that I uncovered through my initial research was that many women felt that the automotive accessories industry was FOR them. I wanted to create a brand identity that felt welcoming and familiar for the ladies interested in sprucing up the look of their vehicle!

Suki’s branding (and name) was inspired by the character that makes it onto so many Halloween costume lists decades after her iconic appearance on 2 Fast 2 Furious. In the way her style inspires, my goal in branding is to inspire creative expression and make accessorizing your car a more accessible space.




Using brand colors I also designed promotional banners to add charm and incentivize shopping to explore deals on the site. While my prototype just moved through adding a single item and checking out as a guest, I realized it was important to tell a cohesive brand story by adding these extra details.  







Finally, I designed an animated gif for Suki’s loading screen. The gas exhaust leaving the vehicle is a play on the loading dots and the illustration style is derivative of the style of iconography I had designed for the website as well. Adding this element was crucial to keeping frustrating screens like loading (or even a link broken screen) charming for the customer’s shopping experience.



Hi-Fi Prototype





Hi-Fi Usability Tests

I recruited a group of 5 women to test the usability of my figma prototype. The testing session was conducted both remotely via zoom as well as in person, all users performed my tasks on the computer for the most accurate results. The threetasks I had my users complete were to input their vehicle (in this case a 2022 Toyota Corolla) on the home page, add the “Cartoon Bunny” car seat covers to their shopping cart and then to check out as a guest.

A/B  Testing - Guest Checkout

To see what users would prefer, I designed two versions of a guest checkout experience.  In Test A, users are taken to a second screen through the shopping cart page where they then select whether they would like to sign in or checkout as a guest. In Test B, there are two separate buttons already located on the shopping cart page.

Test  A

Test B



Results

All users were able to add the specific seat covers to their cart with no issue! Most user opted to navigate through the top drop Interiors button, but one user navigated through the Popular categories Seat Covers button. When it came between the two Guest Checkout options, users didn’t have any specific gripes about Test A, however,  Test B was the route that 4/5 users preferred, with the final user having no preference. Users felt that having the second page was “redundant” and “unnecessary” if they could navigate to guest checkout in one less click through the alternative.

There was a small usability issue for users at the input vehicle part of the flow, 4/5 users didn’t want the screen to automatically load after vehicle input and instead wanted the ability to save their input manually so that they have more control over the process. In my iteration I added a save button for users.

One suggestion to help with login conversion was instead of having the login incentive (10% off first order) only shown on the top banner, to have the promo located right under the login button so users can see their potential savings from creating an account!

Original

Revised




Figma Prototype

Click through to explore Suki’s!



Next Steps...  


While I was able to successfully design a shopping/checkout experience that was both inviting AND straightforward for my target audience, I‘d like to spend some more time on my initial goal of making the design supportive.

Specifically, I’d like to include a companion mobile app that can specifically support users after they purchase on Suki’s with customer and installation support for products that require additional help if they are on the road or outside and away from their computer.  

Secondly, particularly when it comes to automotive products, safety is always an important issue to address. I’d like to also conduct more in-depth research on what customers need to see to feel that their safety concerns about products can be alleviated.

  • Is there a way to communicate that through design, and/or branding?

  • Is it even profitable to test the safety of products on the site?

  • What are examples of places users would go for trustworthy service and what are these businesses doing that makes customers comfortable?

All questions I would like to investigate and implement in my future design!



© Anna Hemsworth 2024