101 Multi Vendor
UX Design / UI Design
Overview
101 multi-vendor is not just an e-commerce website but a gateway to a diverse marketplace where customers can explore the rich offerings of Saudi Arabian and international vendors, with a focus on enhancing the overall user experience
Role
Solo UI/UX Designer
Duration
3 weeks
Tools
Figma, Photoshop
Design Process
In this project I focused on Task flow, sketching, prototyping, and testing.
Define
The Goal
Market Leadership and Expansion: To become the leading and most trusted e-commerce platform in Saudi Arabia and potentially expand its reach to other countries in the Middle East region. This goal would involve dominating the local market, capturing a significant share of e-commerce transactions, and establishing a strong brand presence.
Project Goals
- Ensure a smooth and quick registration process for new users, minimizing the steps required to create an account.
- Implement an advanced search and filtering system, making it easy for users to find products by category, price range, brand, and other relevant criteria.
- Streamline the checkout process with clear steps, reducing friction in completing transactions and providing multiple payment options.
- Develop a recommendation system that suggests products based on users’ browsing and purchase history, enhancing the shopping experience.
- Communicate the vendor verification process clearly, reassuring users about the quality and authenticity of products.
- Ensure all content, visuals, and product descriptions are culturally sensitive, respecting local customs and traditions.
- Provide clear and user-friendly dashboards for both buyers and sellers, allowing easy order management and sales tracking.
- Continuously gather user feedback through surveys and reviews, using this input to enhance the overall UX.
Sitemap
Sitemap
I started with creating a sitemap for the website that every page needed, and then I made a sheet with the content of every page based on the project draft and client meetings.
Design
Sketches & Wireframes
I started sketching low-fidelity wireframes with pencil and paper. I moved on to Figma for my mid-fidelity wireframes. Throughout the different fidelity stages, continuous iterations were made to improve the app’s functionality and UX.
Visual Design
Next Step
Testing and Learning
Though I was more drawn to creating wireframes and prototypes, I found that the most important part of the process was testing. For example, usability testing was crucial in finding errors and seeing things from a different perspective.