Imyge
An eCommerce website redesign for an online-exclusive, fashion-focused brand who provide a wide range of stylish and high quality coloured contact lenses.
Designed at: Magicdust Pty Ltd
Role: Lead Designer
UX Design | UI Design
The Brief
Our task was to re-design Imyge’s website and create a more seamless and enjoyable purchasing experience for their customers whilst also; improving the rate of conversion on the website, optimising the website for mobile and refining and incorporating Imyge’s visual identity whilst keeping the tone and colours light and fun.
Discover
Starting off with a kick-off meeting, myself and the Project Manager met with the brand’s CEO to gain a better understanding of the brand, their products, their end-user, as well as the pain points discovered from their current website. We analysed the current website and also researched direct and indirect competitors to gain an understanding of their approach and discover which aspects and features would suit the project best.
Understanding the Users
We learned a lot about the users during the kick-off meeting, therefore I consolidated the information to create a user persona. The user persona, the competitor analysis and the pain points discovered allowed us to define insights to drive the rest of the project.
Define
The goal of the project was to improve the overall purchasing experience for users to allow them to easily and efficiently buy coloured contact lenses online. We defined insights to design and develop a seamless website design for returning users, as well as new users. The main insights included:
The checkout process should be streamlined with a step by step process.
The product hierarchy should be restructured and regrouped with clear product offerings. There should be the ability to easily filter products by colour and type.
Page information should be restructured and content should be reduced.
Information Architecture & User Flow
The information architecture was formed through our findings from our competitor analysis, our persona goals, and our insights created. Creating the information architecture allowed me to organise and define the overall structure of the website. I then went onto create a user flow for the checkout process.
Wireframing
After defining the information architecture and user flow of the checkout process, I then proceeded to wireframe each screen.
The first main area of focus was to improve the product hierarchy. I correctly separated each product into individual products with product names. A clear and simple navigation was designed to allow users to shop by colour and type, quickly and easily. A sidebar filter was used on the product category page to allow users to easily continue filtering through products. Right and left power selections are also now grouped and in the same common region. I also designed with mobile in mind.
Wireframing
The second area of focus was the checkout process. I created a seamless and smooth experience for the user by simplifying the design of the checkout pages - this included reducing the content, removing distractions and improving the visual hierarchy to highlight important information. I also included a step progress bar to guide the user along the checkout process and increase the user experience. Keeping the goal of increasing the website’s conversion rate in mind, I included products the user may also like to qualify for free shipping, as well as highlighting payment methods early on in the process.
Final UI Design
& Design System
Keeping within the scope of the project, I referenced the brands logo design and chose the font Rubik for Heading 1 which was bold and clear. The rounded corners gave it a fun and friendly appearance and also drove the direction for the graphic elements within the website design. Montserrat paired well with this font, creating a nice balance due to its geometric style.
I created a design system during the UI Design phase to increase efficiency and also to ensure that the visual design elements were consistent throughout the website. The design system also allowed easy handoff to developers.
