E-Commerce

B2C.

Overview

Project

This project was a design challenge for Wells Fargo. I was an the sole designer for the redesign task.

What I Did

  1. Review the current design and describe any visual, usability, and/or accessibility issues, errors or improvements in the current design.

  2. Add loyalty aspects to the current application.

Starting Point

Flow and starting screens provided by Wells Fargo.

1 screen-shot-2019-02-12-at-7-50-36-pm_orig.png
2 screen-shot-2019-02-12-at-7-50-14-pm_orig.png
3 screen-shot-2019-02-12-at-7-54-52-pm_orig.png
4 screen-shot-2019-02-12-at-7-55-04-pm_orig.png
Reorganize and simplify the profile page. Added the functionality to change the photo.

Reorganize and simplify the profile page. Added the functionality to change the photo.

Went over the flow and provided issues during reviews.

Went over the flow and provided issues during reviews.

Analyzed multiple e-commerce apps like Zappos, Zuiliy, Poshmark and Amazon.

Analyzed multiple e-commerce apps like Zappos, Zuiliy, Poshmark and Amazon.

Analyzed multiple e-commerce apps like Zappos, Zuiliy, Poshmark and Amazon.

Analyzed multiple e-commerce apps like Zappos, Zuiliy, Poshmark and Amazon.

Analyzed multiple e-commerce apps like Zappos, Zuiliy, Poshmark and Amazon.

Analyzed multiple e-commerce apps like Zappos, Zuiliy, Poshmark and Amazon.

Flows

The initial flow had  multiple issues. The common flow on an e-commerce app (i.e. Amazon) is:

  1. The person downloads the app

  2. The person looks at the catalog of products to decide it he/she likes the products offered in the app

  3. If the person likes the products offered he/she can create an account using the profile tab (Flow 1 to create an account) OR

  4. If the person wants to purchase a product, he/she would add the item to a cart and from the cart flow he/she can create an account  (Flow 2 to create an account). For security reasons and to help with future purchase you want a user to create an account when purchasing a product.

Initial Flow

  1. Person Signs In

  2. Person sees the product groups

  3. The person sees the catalog and adds a product to the cart

  4. The person purchases the product from the cart

Final Flow

  1. The person sees the catalog to decide if it has what he/she is looking for. Users should not be required to create an account as the first step of the process. Combined screens 2 and 3 from the previous flow using a tabbed approach to simplify the catalog.

  2. Added a screen for product details because users need to know additional details, like nut allergies, gluten free...

  3. The person sees the catalog and adds a product to the cart.

  4. When the person is ready to purchases the product from the cart it is asked to login or sign up.

  5. Once the user has logged in he/she can finish purchasing the product (just like in tools like Zappos, Zuily and Poshmark).

  6. When creating the account the profile page gets populated.

The key elements redesigned were:

  1. Application flow and architecture.

  2. Simplified catalog screens with tabs.

  3. Added search functionality to locate products easier.

  4. Moved the menu location and fixed the system header.

  5. Improved visual design including fonts, sizes, color contrast, etc.

  6. Added pages for product details.

Previous

User Research
Next

Visual Design