AFTERMARKET REDESIGN

Website Redesign by Emil Renz Santos

Start Date

February 2024

Duration

2.5 months

Role

Sole Contributor

OVERVIEW

‍

Coming fresh out of the Google UX Design Course, I decided to put my newfound skills to the test. For my first personal project, I aimed to redesign a website that I was familiar with, and that website would end up being Aftermarket.ph.

Aftermarket.ph is a Philippines-based company that focuses on the resale of premium shoes and apparel. I discovered this site back during the pandemic and have used it from time to time for buying shoes. What sets it apart from most other e-commerce sites is the ability for sellers to list used items. This added an extra layer of challenge to the design that I wanted to take.

I also decided to incorporate some responsive design into my work. The recent push for a responsive UI in my work at Emerson has made me more aware of the value of having your design work in any type of screen. This will result in me having to create 2 versions of my design: a small one for mobile browsers, and a large version for desktops and laptops.

Scroll below to see some features of the finished product.

FIGMA LINK

BUY PREMIUM GOODS

Search for any brand, size, or condition of goods and have them delivered straight to you.

SELL NEW AND USED ITEMS

Sell your shoes, clothes, and other apparel, and monitor your listings on our website.

New Aftermarket Website running on a laptop and mobile

RESPONSIVE DESIGN

The new website can be easily viewed from desktop screens to mobile screens.

PROBLEM

‍

Sneakers and other premium goods have had a surge in popularity in recent years. Naturally, there are also many competing avenues for buyers and sellers to trade premium goods. Some take to directly contacting resellers through Facebook marketplace or other types of social media, while companies such as Aftermarket provide a more centralized hub for buyers and sellers to trade with each other.

While the current design is usable enough, it can still be improved and iterated upon. Having used both Aftermarket’s website and its alternatives, I find that while the website is serviceable and its used goods reselling feature might give it an advantage, its competitors also tend to have a more refined buying/selling experience and their own unique features that Aftermarket lacks.

Current Aftermarket Website

With this in mind, Aftermarket needs to provide a compelling argument for customers to use its hub for reselling compared to its alternatives. The problem can now be refactored into a single statement:

“How can Aftermarket make its website stand out compared to its competitors?”

GOALS

‍

The general objective of my redesign is to use what I learned from my course and my work experience in making Aftermarket’s website more attractive for its users. This can be further split into the following objectives:

‍

create a new and more attractive Aftermarket user experience while also enhancing its unique features.
Align Aftermarket’s website with more modern and streamlined standards such as responsive design and accessibility.
Go through the entire design cycle, from research and design, to prototyping and iteration.

By the end of my working period, I should have a working prototype that highlights these goals, along with the documentation of my working process.

RESEARCH

‍

In order to get a better understanding of what alternatives are already in the market, I decided to do a competitive analysis of Aftermarket’s close and distant competitors using my own judgement and experience.

Summary	Likes	Dislikes
StockX is a online marketplace and online reseller of premium goods based in the USA. Launched in 2016, it has grown to become one of the largest of these online marketplaces, having 34+ million monthly active users as of 2022. Target Market: North America, Europe	Product searching is very straightforward, with common filters and sorting easily accessible. Product statistics are provided, such as price history along with bids and asks.Very responsive design; can be easily viewed from both mobile and desktop screens.	Only brand new items can be sold. America and Europe focused, users from Asia or Oceana have to deal with increased shipping. Some parts of the purchase flow might be confusing, such as how selecting the size might overwhelm the user with prices.
GOAT is another premium goods platform. Also launched in 2016, it aims to be a more high-end alternative to StockX, and also allows users to sell used items. Target Market: North America, Europe	Also has the ability to sell used items. Seller flow is intuitive and easy to navigate. Sneaker release timeline and editorials can be a helpful guide in buying future shoes and apparel.	Homepage is somewhat confusing for less knowledgeable users, especially with the amount of products in the screen. Minimalist aesthetic and small font might make it harder for new users to navigate the site.
Facebook, in addition to its use as a social media, has had many different functionalities built into its system throughout the years. One of these is Facebook Marketplace, with almost 40% of Facebook’s 3 billion users making use of it as of 2024. Target Market: Worldwide	Product searching is very straightforward, with common filters and sorting easily accessible. Product statistics are provided, such as price history along with bids and asks.Very responsive design; can be easily viewed from both mobile and desktop screens.	Only brand new items can be sold. America and Europe focused, users from Asia or Oceana have to deal with increased shipping. Some parts of the purchase flow might be confusing, such as how selecting the size might overwhelm the user.

From this information, I have created 2 simple user personas that I can use to guide my design. One user persona revolves around a buyer visiting the website, while the other persona revolves around a seller looking to sell his older pairs.

DESIGN

‍

After enough research, I started my work on the initial design and wireframe. I created 3 User Journey Maps to show the general flow of how a buyer or a seller would navigate the website.

Buyer Journey

As a buyer, the user journey would be similar to other e-commerce sites, but with the addition of being able to negotiate with the seller for a lower price on the item.

Seller Journey

‍

As a seller, you are able to create a listing for your item, and sell used items along with brand new items. As with the original website, I also let the customer set size, condition, and price, along with required photos.

Profile Journey

‍

One of the biggest changes in the new design is the expansion of the profile screens. As the user can be both a buyer and a seller, I decided to allow them to view both their purchases and their market listings here, along with the more common functions like notifications and favorites.

WIREFRAMING

‍

I created the initial wireframing using the given flows and prior research, along with some feedback from my peers. I have also made small and large versions of my design at this stage for both mobile screens and desktop screens, respectively. Here are some sample screens from my final small screen wireframe.

I will go in-depth on my design choices in the PROTOTYPE section.

FIGMA LINK

PROTOTYPE

‍

After the wireframing was finished, I then proceeded to create the first iteration of the high fidelity prototype. Here are some of the key design decisions that I made throughout the process.

FIGMA LINK

Listing Detail Adjustments

‍

While the core details of the listing were present, the layout of the design could be so mewhat confusing, such as the size and condition of the shoe being tucked into a corner. I decided to remodel it, taking some inspiration from StockX. This should make the important information more apparent to the user.

The current website also lists down the lowest prices of the specific item, sorted by size. I decided to incorporate this in a slightly different way by turning it into a carousel of similar products. While it might not fit as much information as the previous implementation, I am able to more organically integrate it into the design. I have also retained the related items section, and have it filled with other products.

Old product listing screen

Improved Profile Functionality

‍

The first change I made for this category was the profile dropdown itself. The original dropdown took up a large part of the screen, so much so that I had to scroll down slightly to view all of it. I believe that while the new design is smaller, it can still remain effective in informing and alerting the user.

Another major change I made was in the tables and how they displayed. The original tables have a more traditional look, which I believe doesn’t mesh well with the data being presented. I created a new table design that displays more user-relevant information along with mimicking the listing detail layout. I also created a search bar with a filter dropdown.

Old profile dropdown

Buyer Checkout Screen Adjustments

‍

The current checkout screen could use some layout adjustments and rearrangement to bring it in line with what users expect in an e-commerce site. In line with this, I decided to move both the address and mode of payment into one screen to make the checkout faster and less complicated. The summary on the right side of the screen was also streamlined and decluttered so customers can more easily confirm their purchase details.

Old checkout screen

Seller Listing Redesign

‍

Aftermarket’s item posting flow is comparable to its competitors, but its layout can use some work. The original website displayed all of its forms and requirements in a single monolithic page, which makes it harder for sellers to check if their details and images are correct. I then turned this part into multiple accordion panels in order to reduce the pages’ verticality.

Some new additions the I added to the seller screen are the payout method panel and the in-store consignment panel. The payout method panel allows the user to switch between payout methods, while the in-store consignment can be selected to be able to sell your items in one of Aftermarket's physical stores. While the implementation can still be discussed, for now I decided to put in a code system, where the register would give the user a code to mark their listing as cosigned.

Old seller screen

ITERATION

‍

I decided to go through another set of moderated usability testing for my prototype and received a good amount of feedback. I processed this feedback into a set of actionable items ordered from highest to lowest priority. Other minor changes have been omitted for the sake of brevity.

FIGMA LINK

Post-Sold Listing Flow Rework

‍

PROBLEM:

The notifications are lacking in information and intractability. This contributes to the confusion in users navigating the profile screen.

‍

SOLUTION:

Instead of having a shared template for every single message, I changed the layout depending on which type of notification was being displayed. Delivery notifications showed the courier, Offer notifications showed the price, and so on.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Old Profile Table

New Profile Table

Notification Clarity Issues

‍

PROBLEM:

The notifications are lacking in information and intractability. This contributes to the confusion in users navigating the profile screen.

‍

SOLUTION:

Old Profile Table

New Profile Table

Item Details Improvements

‍

PROBLEM:

The Create Listing screen could use some more tweaks to streamline the experience. Some testers were left confused as to how to fill out the requirements.

‍

SOLUTION:

I added a way to message the seller on the make offer overlay, and made it clearer in general. These messages would show up on the seller’s notifications. The product details panel was also made clearer and more readable.

Old listing overlays

New listing overlays

Create Listing Screen Improvements

‍

PROBLEM:

The item details page has some elements that could be worked on, such as the make offer functionality, and the product details panel. Users would also be confused about the sales history, thinking it was the seller’s previous sales, and not the global item sales.

‍

SOLUTION:

I removed the payout panel as users would seldom change their payout method for each item they sold. This was instead relegated to the profile screen. I added more information and a tooltip to the in-store consignment panel in response to testers being confused.

Old create listing

New create listing

LEARNINGS

‍

This project was a great practice on how to think and organize like a designer. In the weeks that I spent working on this project, I have learned much about how to think and organize like a designer. Here are some key takeaways I took from my experiences and decisions.

Fail Fast

‍

A big issue I had throughout my wireframes and prototypes was overcommitting to a design before getting any feedback. Due to this, I had to make more laborious edits in the mockup and prototyping stage to compensate. It did not help that I had multiple responsive breakpoints to deal with, which created nearly double the work when I had to change something.

My takeaway from this challenge I faced is that I have to stop myself from adding too many details and interactions at the early stages. I also need to create more alternative designs and paths so that I can get better ideas on how to implement certain part. Fortunately, one of the assets that came from this project was a usable wireframe design system. This should speed up my creation and iteration in any of my future projects.

Be Organized

‍

Another obstacle that I faced during the creation of my design was the lack of organization, especially in the early stages. Because I didn’t have a clear design system at the start, I struggled in implementation as I had to create new components every time something new came up. I also had to deal with messy variables as I didn’t have a good idea of what values to set the margins and sizes.

Fortunately, by the time I got to the high fidelity mockups and prototypes, I started to clean up and organize my assets. This was a lot of help, especially with the responsive design aspect. With shared components and variables, all I had to do was change one main component and both the large and small versions would change as well.

IMPROVEMENTS

‍

After finishing my design, I have thought up of some improvements that cannot be implemented now, but could be implemented in the future with enough effort and discussions with stakeholders.

Account Requirement Alterations

‍

One possible improvement item is to allow customers to buy shoes and apparel without creating account. This should speed up the checkout process and reduce any frustration from the user’s end. If this is too complicated to implement, the website could also automatically create an account with the given email and address.

Batch Selling

‍

After a certain volume of items sold has been detected, certain users can be given the option to sell their items in bulk. This can be implemented at the search screen after clicking the SELL button, and lead into a special user flow. I did not implement this now as I would need more data from actual bulk sellers and other stakeholders, but it should not be too hard to integrate into the existing design.