A Digital Revolution
Date: May 2020-Oct 2021
Location: Melbourne
As an in-house designer, I am committed to improving customers' online and in-store shopping experiences. My primary focus is on designing visually appealing websites and mobile interfaces. This includes conducting user research and usability testing to ensure a smooth and user-friendly user experience. Furthermore, I collaborate closely with the E-commerce manager to elevate a basic blog website into a refined and efficient platform for online shopping, effectively bridging the gap between virtual and in-store retail experiences.
Problem
Faced with the daunting challenges of the COVID-19 lockdown, our retail store quickly realized the limitations of our existing website, which was designed primarily for showcasing product images but lacked e-commerce capabilities.
Solution
I collaborated closely with the E-commerce manager, Marais's CEO, and our marketing team to implement a problem-solving strategy focused on agility and innovation. Our joint efforts led to a thorough revamp of our website, strongly emphasising the development of an entirely new UI and UX design. This strategic initiative aimed to enhance the website's visual appeal and integrate powerful e-commerce capabilities.
Process
Through this process, we focused on identifying key user needs, streamlining the online shopping experience, and ensuring seamless integration of sales functionalities. This transformative approach marked a significant step in our digital evolution, highlighting the crucial role of adaptive strategies and customer-centric design in the retail industry during times of crisis.​
User Research
Based on the user research process tailored for the persona, I've gained insights into the requirements, habits, and challenges young professionals like Sara face in their interactions with e-commerce websites.
I have also developed a customer journey map to more effectively depict the shopping experience, providing a clearer visualization of the steps involved in the process.
Sketches
Sketches effectively turn abstract concepts into tangible forms, aiding in visualizing and communicating ideas clearly, thereby transforming vague notions into specific, detailed representations.
Wireframes & Prototypes
After developing my idea, I created a simple, interactive digital prototype to visualize the concept and gather user feedback.
Major Design Iterations
Iteration 1: Basic Integration of E-commerce Elements
Objective: Introduce fundamental e-commerce functionality to the existing blog structure.
UI Changes: Add a simple, intuitive shopping section using minimalistic design elements that align with the blog’s aesthetic. Implement product thumbnails and basic product detail pages.
UX Enhancements: Ensure seamless navigation from blog content to product pages. Integrate an easy-to-use shopping cart and checkout process, focusing on minimizing the steps required to purchase.
User Feedback Focus: Gather initial reactions on integrating shopping features and the ease of transitioning from reading to shopping.
Iteration 2: Enhanced Product Discovery and User Engagement
Objective: Improve product discovery and engage users more deeply with e-commerce.
UI Changes: Introduce advanced filtering and search capabilities. Implement a more sophisticated product gallery with high-quality images and hover effects for quick views.
UX Enhancements: Enhance content-to-product linkage, such as featuring related products on blog posts. Improve mobile responsiveness for a seamless shopping experience on different devices.
User Feedback Focus: Collect feedback on product discovery experience, ease of finding products related to blog content, and mobile shopping experience.
Iteration 3: Personalization and Advanced E-commerce Features
Objective: Personalize the shopping experience and add advanced e-commerce functionalities.
UI Changes: Incorporate personalized product recommendations. Design a more dynamic and interactive shopping cart, including features like save-for-later and wishlist.
UX Enhancements: Implement user account creation for a tailored experience, including order tracking and history. Optimize page load times and checkout process for efficiency.
User Feedback Focus: Understand user satisfaction with personalized recommendations, account features, and overall efficiency of the shopping process.
Final Design
Mockup 1: Navigation and user pages
Mockup 2: Palm Angels product page check out
Mockup 3: Mobile version navigation menu