UXUI Project — Acronym Fashion Website Redesign
Background
I began this website redesign after talking to a friend who had recently purchased a coat from Acronym. He told me how the current website doesn’t function the same as other high end fashion websites and he sometimes found the experience frustrating. After looking through the website with him I could see where his frustrations were coming from. I decided to start a personal project to improve the UX and UI of the website.
User Testing
To begin this project I conducted a round of user testing on the current Acronym website. The testing was done on both desktop and mobile versions of the site and would confirm the assumptions I had about potential pain points.The testing was conducted on five users; three male and two female, all between the ages of 22 and 46.
Each of the users were asked about their first impression on loading the Acronym website. They were then set simple tasks such as adding an item to the shopping cart and searching for a specific item. I asked each of the users to speak their thought out load as they completed the exercises.
Results For Desktop
- Three of the users referred to the lack of a clear homepage. One user had some difficulty navigating through the website at first, due to the lack of a standard homepage.
- Four of the users stated they would like to see the prices upfront, whilst in the listed results page. This was displayed at the top of the page and often missed by the users.
- Four of the users found the auto hover image change functionality on the product page frustrating.
Results For Mobile
- There are no titles to separate each of the collections on the homepage whilst on mobile.
- Each of the image descriptions on the product page are hidden behind thin black lines. The user is required to press and hold on these lines to reveal the description. Only one of the users discovered this.
Persona
From the users I tested at the beginning of the project, one of them was a regular customer of Acronyms. I decided to create a persona based on the data collected from him.
Empathy Map
From the data collected from the user testing I was able to create an empathy map. This was a great way to condense all of the data into an artefact I could constantly refer back to throughout the project.
Experience Map
After building and understanding of the user and creating a persona and empathy map, I next moved on to an experience map. This would help me identify key parts of the current journeys which need improving. This particular experience map show the user opening the website, searching for an item, adding it to the shopping cart and purchasing it.
Competitor Research
Now that I understood the issues with the current website, it was time to explore the design and functionality provided on competitor websites. I researched through the websites for Gucci, Valentino, Moncler, Farfetch, Burberry and Balenciaga. Each of these were direct competitors from the same market segment.
Wireframes
I next began creating rapid wireframes in Figma. I teased the designs of the best elements of the competitor research and used the empathy and experience maps to ensure I included key features the user would need.
High Fidelity Prototype
With a range of quick wireframes created I moved on to designing high fidelity prototypes of each of the pages. As you can see in the videos below I selected a colour palette and UI style which matches the Acronym brand.
Desktop
Homepage
This clip shows the desktop version of the homepage, which includes a simple hover interaction for each to the collections. This will be tested moving forward to ensure this interaction doesn’t negatively effect the user experience.
https://tomcreeuxui.com/images/acronym-desktop-homepage.mp4
Product List Page
To vastly improve the users experience when searching for a specific item, I included both a filter and sort into the search results. This was a feature most major competitor had and allows the user to search in more granular detail.In this clip you can see the flow the sign up journey the user will go through, including the personalisation screen. I used the Twitch brand purple for the pressed state on the category types.
https://tomcreeuxui.com/images/acronym-desktop-product-list-page.mp4
Product Page
The design for the product page provides the user with a detailed description, fabric information, colour options, sizing and a buy now CTA on loading the page. This information if fixed as the user scrolls, allowing them to scroll through various images of the item.
https://tomcreeuxui.com/images/desktop-product-page.mp4
Mobile Viewport
https://tomcreeuxui.com/images/mobile-proto2.mp4
https://tomcreeuxui.com/images/mobile-proto1.mp4
Next Steps
As stated in the hi fidelity prototyping section, I would next more on to a round of user testing. This would primarily to test the various micro-interactions to ensure they don’t effect the user experience negatively. I would also consider running a card sort for the primary and footer navigation. This would ensure the items the user require most are easily accessible.
