A website re-design for an ecommerce company
White Knight Wheel Accessories

  • Role

    1 out of 6 UX/UI Designers
  • Timeline
    6 weeks
  • Primary Tools
    Figma

  • Industry

    Ecommerce
Overview

White Knight is a company focused on providing wheel accessory products for the automotive aftermarket industry. Many of their wheel accessories are catered to knowledgeable car enthusiasts for purchase. They also have an amazon shop in which is connected in their website to let customers purchase through amazon as well.

With the client's website already made, we decided to focus on the client's request to change the layout, design, and the user experience. Everything else would stay more less the same in regards to the information architecture, content, and color scheme.

We found various inspirations, drew up wireframes, conducted user testing, and submitted the designs to our developer.


The Process
1

Competitive Analysis


2

Low Fidelity Wireframes


3

Usability Testing


4

Final Designs

 

5

Reflection

 

The Challenge

To re-design an ecommerce style website to help users navigate to White Knight's successful Amazon shop, where consumers can purchase a plentiful amount of wheel accessory products.

The Solution

  • Allow customers to learn more about White Knight and Navigate to their Amazon Store.
  • Enable potential customers to contact and reach out to White Knight for bulk orders or with any questions and concerns.
  • Provide a user friendly experience where potential customers can find and learn more about wheel accessory parts and specifications.

Inspiration

By looking at the websites of our competitors, we managed to have a better idea of what works in today's online space for wheel accessories. After reviewing a few websites, I created a sketch of what the landing page should look like as well as the cadence of the typography, colors, and the hierarchy of content.

Style Guide
After laying out the low fidelity screens, my team and I created a style guide to start envisioning what the high fidelity screens would look like. We used a set of colors, typography, iconography, and grid to maintain consistent between all of us. The design/style mimics the current or old website per the client's request to not change up the website too much.
Low Fidelity Wireframes


Client Feedback


We sent our low fidelity designs to the client and awaited for a response. Unfortunately, they never responded and ended up ghosting Moment Studio. We are not sure why but we went ahead and continued on this project by conducting user testing.
If the client did end up responding, we would have some useful research and feedback for them to encourage them to continue on with the process.
Usability Testing
Tasks

We utilized usterstesting.com and gained valuable feedback from 14 different users. We had them complete three tasks as we wanted to keep the testing simple and direct. If they had any extra feedback in terms of the website's layout or design, of course that was also welcome and accounted for.

  1. Understanding the Homepage
  2. Navigating to New Customer Page
  3. Finding a Product (Mag Lug Nut Page)
Results

After reviewing the recordings of our users, mostly all of them enjoyed the website as it felt straightforward and easy to navigate.

There was only one issue that seemed to be mentioned multiple times, which was a part of the navigation menu at the top. Some users felt that completing the tasks "navigating to new customer page" was difficult to find. We decided to update the navigation menu accordingly and were ready to create our final designs.

Final Designs


Prototype


What I Learned


During this project, I was excited to receive client feedback and edit the iterations as needed.
Since the client never got back to us, my team and decided to push forward with a few more deliverables just in case the client would reply. It was a great experience working with this team particular team of designers as we were all eager and easy to collaborate with each other and communicated daily about our progress and goals.
I believe this project taught me that clients are not consistent sometimes. Life or other events don't always go as planned and no matter how hard or persistent we may be, things can fall through. But by staying positive and prepared, we managed to complete a note-worthy case study to add to our portfolios. I hope to discuss more about this project as this case study helped me become a better designer. Thank you!