Re-Branding E-commerce
Desktop and Mobile Web App for Genneration Connect
Organizing the Information Architecture
Monster is a quirky Seattle based retail store and E-commerce website application that sells products to artists and art-lovers.
3 Week Client Work
What did I work in?
Adobe XD
Adobe Photoshop
Trello
What I Did
I worked swiftly as a UI Designer and UX Researcher. I re-designed the check out, implemented branding, and organized the inventory.
Along with prototyping the product, I was responsible for hi-fidelity wireframes and the design system.
The Longest Navigation Bar
People are hesitant to make purchases because of the lack of information provided on the website and over abundance of products. Organizing the websites current information and filling in areas that need more information will help the shopper make a confident purchase. Below are images of their navigation before the re-design, the user has to continuously scroll down just to see all of the options. I wanted to implement content strategy and information architecture into this project.
Research and Organization
A heuristic analysis on Monstermonster.shop and Redbubble.com expressed areas in the shopping experience that needed more information. Monster’s website recieved high severity levels in the following areas: Filter, Page Navigation, Breadcrubs, Review/ Rating, Results, & Checkout flow
User interviews exposed a shoppers thought process on websites similar to Monster. I emphasized decisions that cause the user to continue shopping or not, typically when browsing the stopping points are where the users doesn't find something and never get to the checkout point. The interviews revealed that most users think they are shopping spontaneously (or without a goal) but in reality they were scrolling through what the site likely expects they would want to buy. This means that having recommendations or suggestions to help walk the shopper through the website is extremely important!
Design Process
I reorganized the navigation based on user research and card sorting. Research findings highlighted that users prefer all the main categories on the navigation. I also noticed that users tend to visit the website looking for something specific, so I emphasized the size of the search bar. In the next iteration I would like to improve the contrast of the info bar on the top (right).
Information at a Glance
The lo-fi wireframes on the left are a result of the new navigation. I wanted to make sure all the information a user needs is available at a glace.
New Screens
The sitemap reflects the result of a card sort. The results present compressed categories that are spread across the navigation bar to minimize the number of options but maximize visibility.
The original website did not have a hyperlink to the artists/ brands collection of items and almost little to no product information. On the right, I implemented their branding as well as the ability to select the style of the product. I also added information that users need to know before deciding on whether they want the item.
On the left is the original website without breadcrumbs. Because Monster has so many items, I found that using breadcrumbs makes it easier for the user to navigate through categories and go back to where they were in the hunt for the right item. I also pushed the filter to the right with color sorting because there are a lot of variations of different items. The first user test helped me identify what filter categories were most important. In the next iteration I hope to implement the type of product into the filter.
Next Steps
I want to make more improvements in contrast and modernization of the website. Most people prefer a minimalistic style when shopping and just have the product highlighted, my goal is to improve the quality and spotlight the product browsing interface.