Introduction:

I was always fascinated by the way different websites were designed and decided to pursue a career in designing user interfaces and experiences, and started learning more about it.

Goal:

Create an end-to end website application that allows us to get what we want according to our personal preferences locally thus minimizing international shipping.

Problem:

Purchasing Ethnic wear online for the NRI’s has always been overwhelming due to the availability and restricted buying options due to international shipping charges and delivery time. Part of the problem is the spontaneity factor when shopping for Ethnic wear that adds to the poor decision-making.

My Impact

For this project I validated the need for the original product I had in mind and leveraged data from the research to create an end-to-end product as a solo designer.

Design Thinking Process: A non-linear, iterative process which helps to understand user needs & challenges. It includes 5 stages

• Empathize

• Define

• Ideate

• Prototype

• Test

Research

I started working on the design by first doing a user research to understand the problems.

Worked on documentation by following the Mental Model.

Built few mock ups, wireframe designs, user journey maps & user flow diagrams.

Started testing by getting active feedback from the users and working on improvising it based on UX.

Competitive Research

For this part of the project I decided to explore top rated clothing websites apps and compare key features and see what problems they address. I discovered that almost all of them provide basic user can access after purchasing.

As I’d like to set my users for the long-time success, I realized that can be achieved by designing a product, that addresses the problems that occur before the purchasing decision.

The Research Phase:

My first step was to conduct user research to gain insights into the websites design strengths and weaknesses. I conducted interviews with people of different age groups and sex to understand their needs, pain points, and expectations and started building user journey maps, user empathy, user flows, sitemap.

Problem Statement:

“Busy software professionals wanting to shop online for some Traditional attires for their families for various occasions”

Define

User Personas

User Journey Map:

It is a visual process user goes through to complete a particular task.

Ideation

Feature Prioritization

After realizing what solution would bring the most value for my users, I decided to take it a step further and brainstorm the ideas for the actual features. I want the app to be easy to use on the go, while shopping — it requires an easy interface, streamlined onboarding and access to the main feature. The research part provided me with enough info to determine which features will bring low vs. high value to the user.

User Empathy

User empathy is about trying to see any user’s perspective on the product that you are working on. It’s about being able to identify with them and represent them when making decisions that might benefit or hurt them.

User Flow Diagrams

User flow diagrams are used to figure out the flow of a website or application after you’ve thought about the customer experience and user needs. It’s important to map and visualize them.

Sitemap:

A user experience sitemap is a map of various pages on your website. The purpose of the UX sitemap is to allow visualizing how individual webpages or site sections are related to each other.

The Design Phase:

Using the insights from my research/interviews, I began designing the website’s new user interface. I focused on creating a simple and intuitive layout that would allow everyone to quickly access the products they needed and also incorporated a new color scheme and typography that reflected the brand’s values of luxury and sophistication.

To improve the user experience, I added several new features such as a search bar and sorting options. I also optimized the product pages to include high-quality images, detailed descriptions, and customer reviews.

Lo-fi Wireframes

The first version of lo-fi wireframes allowed me to run early usability tests and discover the priority revisions that need to be implemented ASAP. That decreased the number of iterations to the later versions with all effort being put into creating the hi-fi interface. The version below includes iterations made mainly to the information architecture and microcopy such as:

• Implement a shipping tracker.

• Add a list of recommended products.

• Implement universally accepted payment methods.

• Include suggestions based on Demographics.

Prototype & Test

The Testing Phase:

Before finalizing the new website design, I conducted usability testing with a group of close friends to gather feedback on the design and user experience. Based on their feedback, I made several tweaks to the design, such as making the navigation menu more visible and reducing the number of steps required to complete a purchase.

Conclusion

While working on this project I learned to really trust the research and discovery process as I started working on it with a very different assumption and initial idea on how to solve the problem. In the end I needed to satisfy different user needs. Designing it was a challenging but rewarding experience that taught me the importance of user-centered design, by listening to various user feedbacks & incorporating best practices in UI/UX design.I learned to not get too hung up on the solution and be flexible with the ways of solving the problem. Creating a virtual marketplace (the original idea) can be developed down the road with more time and resources.

Here is the link to the full hi-fi prototype:

E-commerce website