Utopian Electronics
Utopian Electronics is a store that offers a wide range of electronics products. Currently, they don't have any online stores and rely completely on newspapers to increase their awareness among people. However, they have the potential to build their online presence and grow their business with a new e-commerce store.
![](/assets/img/utopian/cover.png)
Project Overview
Many people love to shop in real stores because it is fast and you can touch and see the products. However, as the pandemic came, people opted for online shopping more and frequent visits to the stores decreased for safety reasons.
Problem Statement
How might we design an online store that provides an immersive store-like experience to the customers while making shopping simple and fast?
Role
UX and UI Designer
Tools
Adobe XD, Google Sheets, Google Forms
Methods
Semi-structured interviews, survey, persona, information architecture, sitemap, user flow, task flow, sketches, wireframes, visual design
Duration
4 weeks
Note: This is a personal project.
Research
User Interviews
To understand the shopping experience of people in-store and online, I conducted semi-structured interviews with 5 participants from different backgrounds.
Some of the questions asked during the interview:
- What motivates you to buy electronics products online and offline?
- What are the factors that inform your decision?
- What is the main information you look for?
- What are the biggest challenges/frustrations/problems you face in finding the product online?
Online Surveys
Next, I analyzed 15 survey responses I received and synthesized the information on what people prefer — Online or In-store Shopping.
Key Takeaways
- 13 out of 15 people stated that they make their choices based on reviews and features.
- Missing or inaccurate information is one of their major frustration while shopping online.
- 9 out of 15 people said they prefer online shopping to in-store because it provides ease of use and they can conveniently browse products anywhere and compare them with other websites.
Analyze
Persona
![](/assets/img/utopian/user-persona.webp)
Based on the data collected from the users, the primary needs of the users became clear:
- Easy website navigation for a smooth shopping experience
- Product reviews to help users make well-informed purchases
- Efficient way to search products
- Helpful suggestions of products based on users needs
- Detailed product information to ensure proper product selection
- Quick and easy checkout process to save users time
Information Architecture
The next step of my process was designing the navigation system. I selected random electronics products from competitors and conducted an Open Card Sorting with 23 users. This was essential because I wanted to organize the information in a clear and understandable way on the website.
Sitemap
![](/assets/img/utopian/sitemap.webp)
Design
User Flow
Below user flow is for the persona (Lily) trying to buy a TV which is within her budget.
![](/assets/img/utopian/userflow.webp)
Task Flow
Scenario 1: Lily uses navigation menu to search for TVs.
![](/assets/img/utopian/task-flow.webp)
Scenario 2: Lily uses filters to search for TVs.
![](/assets/img/utopian/task-flow-filters.webp)
Sketches
Before diving into wireframing, I drew some inital sketches of what I've learned throughout my process to this point. I started to make decision on how the content on the website would be organized based on the project goals I want to meet.
![](/assets/img/utopian/sketches/Frame.png)
Wireframes
![](/assets/img/utopian/wireframes/homepage.jpg)
![](/assets/img/utopian/wireframes/products_with_filters.jpg)
![](/assets/img/utopian/wireframes/product_details.jpg)
![](/assets/img/utopian/wireframes/cart.jpg)
![](/assets/img/utopian/wireframes/cart-2.jpg)
![](/assets/img/utopian/wireframes/review_order.jpg)
![](/assets/img/utopian/wireframes/login_signup.jpg)
Visual Designs
![](/assets/img/utopian/ui/homie.png)
![](/assets/img/utopian/ui/homie.png)
What's Next?
Testing
Before diving right into the testing, first I create a test plan on how testing needs to be conducted. Then, I set the tasks for the users to perform. After this, I recruit participants and begin to test my design. While they perform their tasks, I observe them to see what different paths they are taking to complete the same tasks and identify the areas of improvement for future iterations of designs.
Design Handoff
After the final version of the design is completed, I would hand this off to the developers to start building the product.
Reflection
Through this design concept, I learned that it is critical to do a research. By conducting a research, I got to know about the common problems that people usually face while purchasing any product whether in-store or online. It is important to identify these problems, even if they are small, because these tiny issues also matter in giving a seamless user experience to the people.
There are some features that I wish to explore especially for mobile and tablet devices. I want to work with AR view of the products where people can check how a product would look like in their hand or their home, or wherever they want to place it. These explorations will help me learn some new ways of thinking and designing solutions for people.