E-commerce website

Hi Guys!

In an interview a few weeks ago, I was given the task of designing an E-commerce website for a maximum of three days.

THE BRIEF:

The challenge that is intended for you includes a user story based on which you can design the user experience and user interface. In the user experience section, we need the following documented files:

1-benchmarks

2- Wireframes

3- The final design of the user interface

User story As an online buyer, I want to be able to add products to my favorites list on an online store website so that I can view them in the future and quickly place an order if I want to buy. . It should be possible to add products to the list of favorites. Users should be able to view and manage their interest list such as: removing products or Changing display order. Users should be able to add products directly from the favorites list Move the shopping cart. . Favorite list pages should be completely user-friendly.

MY PROCESS:

When I benchmarked the User Experience (UX) of the "Add to Favorites" feature within online stores, I considered several crucial aspects for evaluation:

Visibility and Accessibility:

I assessed how prominently the "Add to Favorites" button or icon was displayed on product pages. It needed to be easily noticeable and accessible without causing distraction.

Ease of Use:

I evaluated the process of adding items to the favorites list. It needed to be a simple, one-click action without requiring users to log in or fill out unnecessary details.

Feedback and Confirmation:

I looked for feedback mechanisms that confirmed when a product was successfully added to the favorites list. This could be a visual change in the icon or a pop-up message.

Managing Favorites:

I evaluated how I could view, organize, and manage my list of favorite items. I checked for options to remove products, rearrange the list, or categorize items for easy access.

Integrations and Syncing:

I considered if the "Add to Favorites" list synced across devices. For example, if I added an item on my desktop, could I access it on my mobile device?

Customization and Personalization:

I assessed if the favorites list allowed for personalization, such as the ability to create multiple lists or add notes/tags to items for the organization.

Clarity in Functionality:

The purpose and function of the "Add to Favorites" feature needed to be clear and easily understandable. I needed to know what would happen when I added items to my list.

Prominence in User Interface:

I checked for consistency in the placement and appearance of the "Add to Favorites" feature across different product pages within the website.

Communication and Assistance:

I assessed if there was helpful information or guidance available for me as a user who was new to the "Add to Favorites" feature.

Wire Frames

I considered two scenarios where the user can achieve his goal and according to that I came up with the final wireframes.

scenario 1: product list page > add your favorite product to favorite list > go-to favorite products page(you can delete, sort) >go to product page and see more detail> add your favorite product to card

scenario 2: product list page > go to product page >add your favorite product to favorite list > go to favorite products page(you can delete, sort) > add your favorite product to card

User Interface

Finally, you can see the final user interface.

Analyzing the competitor's user flows based on a part of the user stories gives us a very accurate view of what exactly is important to each business how these user flows and interactions are formed based on that and how this path is visually designed.

This was a small part of a user story, but new user stories and features along the way of this small user story are created depending on the designer's deep understanding of user needs and business goals that can differentiate them.

Hope you'll like it!