Research
To ensure the success of an e-commerce venture, comprehensive and well-structured market research is crucial. In this stage, I gathered as much information as possible about the e-commerce market landscape, aiming to understand the target users, relevant market data, and visual references. Some methodologies utilized were:
1. Journey Mapping
I mapped out the primary journey of the main competitors to understand their user experience flow.
2. Benchmark
I listed the main comparative characteristics among competitors to identify strengths and weaknesses
3. Feedback from competitors
Given the time constraints, opting for competitor feedback collection proved invaluable for generating insights and identifying improvement opportunities. Analyzing a competitor's practices and performance allows us to learn from their experiences and apply those insights to enhance our own strategy and product or service offerings.
"Manga Store is a fashion e-commerce destination that dresses you in style and rewards you for every purchase!"
I was tasked with designing a digital platform for a fictional fashion e-commerce. The primary focus of the product was mobile usage, either through a dedicated app or a website optimized for mobile devices.
The main components of the platform included:
-
Home: Featuring key offers and promotions.
-
Product Selection: Providing an intuitive flow for navigating categories and finding desired products.
-
Shopping Cart: Allowing users to view selected products, with options for editing and completing the purchase.
-
Payment: Ensuring integration with secure and reliable payment platforms.
Goal
Develop a mobile-optimized website for a fictional fashion e-commerce
Role
UI Design, Benchmark, Ideation and Prototype.
Timeline
Mar, 2024 - 2 weeks
Resources
Paper, Figjam and Figma.
Ideation
Developing a mobile site was a strategic decision based on research, recognizing the growing use of mobile devices in e-commerce. I prioritized this platform to effectively reach and engage the target audience, aiming for an immersive and intuitive experience that promotes interaction and increases conversions. The design process included the following steps:
1. Wireframe
To begin the development process, I created wireframes outlining the product selection flow, including intuitive navigation through product categories, seamless addition of items to the cart, and a straightforward pathway to the payment process. These wireframes served as a foundational blueprint for designing a mobile site that prioritizes user experience and conversion optimization.
2. Colors and typography
When choosing the colors for the Manga Store website, I strategically utilized the primary color from the logo to accentuate specific details, while ensuring that the vibrant product images remained the focal point.
This approach led me to select neutral colors with high contrast for the buttons, allowing them to stand out without overshadowing the visual appeal of the products. By maintaining consistency with the logo palette throughout the interface, we reinforced the brand identity across all elements of the website.
For typography, I selected the Quicksand and Poppins typeface families for their legibility and resemblance to the brand's logo. Quicksand's modern, rounded style suits titles, while Poppins offers comfortable reading for paragraphs with its clean shapes and balanced proportions. These choices aim to provide a cohesive reading experience for website users while emphasizing the brand's visual identity.
Prototype
The prototype was designed to provide an intuitive user experience, guiding users from the homepage to the completion of their purchase in a simple and straightforward manner. It features organized sections to facilitate product discovery and a transparent, secure checkout process with clear payment options. The goal is to ensure efficient navigation and a satisfying shopping experience.
Learnings
Those weeks were filled with invaluable learning experiences, each one offering insights that proved instrumental in our project's development. Particularly, I highlight one significant takeaway from this project: the complexity inherent in e-commerce and the importance of having a well-developed and clear sitemap. It's crucial to ensure that users consistently receive feedback on their actions and know which stage of the process they're in. This not only enhances user experience but also reduces friction in the purchasing journey, ultimately leading to higher conversion rates and customer satisfaction.