Neopet Trade E-commerce platform Responsive Web App
Neopet Trade is an E-commerce and Digital Marketing platform that allows companies to create and advertise their own representations and publish information about the products and services they offer. The main purpose of the platform is flexibility and mediation in searching and buying products.
Owner
Company: Neopet Ltd. – www.neopet.bg
Neopet Ltd. is a leader in the production of Transformer Stations, MV systems, HV systems, electrical installation and Automation, Instrumental containers, lightning towers and valve stations.
My role
UX/UI designer
Tools used
Figma, Adobe Illustrator, Adobe Photoshop
Scope
Aug. 2022 – proceed
What I did
Competitive Analysis, User Research, Information Architecture, Desktop design, User Journeys & Flow, Card Sort, Sitemap, Usability Study, Product Design, WordPress Design & Development
The problem: How to build an e-commerce platform to help companies advertise, offer and sell their products and services?
The challenge
I set out to develop e-commerce platform that allows companies to create and advertise their own representations and publish information about the products and services they offer.
The Background
E-commerce is platform of communication through internet that takes place between companies and their customers. The E-commerce provides various services such online shopping, online bank and E-enterprise which are also emerging trends on their own. Online shopping is one biggest service of E-commerce which allows consumers to buy, order and view goods and service on online through their gadget, anywhere they are.
The Iterative Process of Designing Neopet Trade platform
When working on Neopet Trade platform, I have adopted the Double Diamond Strategy which breaks the design process into four stages: Discover, Define, Deliver & Develop. I found this process particularly powerful in validating design decisions, allowing enough space for creative exploration while giving a focus point to come back to.
DISCOVER
What is out there: E-commerce & Neopet Trade platform
I conducted a competitive analysis of E-commerce platforms with a focus on UX analysis: to evaluate their navigation, layout and overall usability. This helped me to understand what Neopet Trade platform had to provide to stand out from the competition.
I also did a detailed SWOT analysis of the competition and found out their strengths and weaknesses, which greatly helped to build Neopet Trade platform’s competitive advantages.
User Research: Can you walk me through your process?
It was time to see what E-commerce platforms enthusiasts thought about the competitors. Equipped with the preliminary research discoveries, I conducted 3 user interviews with people who have different levels of experience with E-commerce platforms.
My research goals were:
1. To understand the general attitudes and processes.
2. To uncover what (common) difficulties people might face.
3. To discover if they use any apps or websites to help them achieve their goals.
DEFINE
The Research Analysis: Moving Forward
After the Research phase, I reexamined my assumptions based on the insights from the User Interviews. It was clear that:
• People are flexible in choosing an E-commerce platform and their decisions depend on the circumstances. Often their choices are based on recommendations and they thoroughly research each platform before making their choice.
• They require E-commerce platform to be sufficiently simple and understandable for users.
• Good support and feedback.
• More options, good structure and search filters.
• Above all, they care about the quality of the products and the standards they cover.
Revision of Problem Statement
I revised my hypothesis problem statement to align better with the users’ needs and goals.
E-commerce platforms’ users need to find the right platform for their needs. They expect to receive quality service, good menu navigation, high quality products, and this to help achieve their goal.
User Journeys: What would user’s experience with Neopet Trade platform be?
Informed by each persona’s experience, attitudes & goals, I have created User Journey Maps to outline the processes needed to achieve their individual goals within Neopet Trade platform. This allowed me to focus on possible critical pain points and plan how to address them in the following design decisions.
How would users go about search, add and buy products on Neopet Trade platform?
I set out to map out their User flows. This step helped me keep the design user-centered, by showing me what pages or screens of the app will be needed from the perspective of my user personas.
Sitemap after Open Card Sort.
Before starting to work on initial sketches of each feature, I visualized the Information Architecture of the app into a sitemap, based on the user flows. The first version of the sitemap was tested through an Open Card Sort.
DEVELOP
Wireframing: From sketches to first clickable prototype.
Ones the Sitemap information architecture was decided, I began sketching paper wireframes progressing them.
Desktop Low-Fidelity Wireframes
Desktop High-Fidelity Wireframes
Usability Study.
Focusing on navigation and main features, I designed clickable prototypes for Desktop & Mobile versions of the responsive web app. It was tested in a usability study, conducted remotely with 2 users. The issues, discovered in the usability test were addressed and fixed.
Designing the Look & Feel of Neopet Trade platform: Style Guide
E-commerce Neopet Trade platform has a stylish and practical design that aims to help people use it easily and affordably.
I used the Style Guide as a starting point and developed a more detailed Design Language document. It’s purpose is to ensure consistency and communicate the language of Neopet Trade platform to designers and developers.
DELIVER
Final Showcase.
When I started working on this project, my goal was to create an e-commerce website as per the client’s requirements. The main goal was the ability to register companies, advertise and sell their products, good menu navigation, clean look, easy access to products and modern design. I believe the Neopet Trade e-commerce platform has succeeded in achieving the goals as it has its own distinctive style and branding but also offers an easy user journey for customers to purchase the products.