Shop App:

Academic Project: Add a new feature to an existing app

Field :

My Role

Project Goal:

Design Goals:

E-Commerce

Product Designer

Add a feature to the Shop App to improve users shopping experience through the app

  • Maintain the app’s existing UI Design

  • Design a new feature utilizing existing UI components from the app

 

Development Stages

 
 

Objective:

Understand Shop App’s existing features and functionality

 

Product Research

Method 1:

Process:

Product Analysis

I started off this project by exploring Shop App’s website and mobile app. I first read up their website to understand their business goals and how the brand promotes the product. I then started using the app on my mobile to track packages of different shipping status to explore the app’s functionality and features.

Findings:

The app has 3 primary features:

  1. A quickpay feature that allows users to shop using saved payment and shipping information

  2. Track packages from different vendors in one place by linking your email and amazon account

  3. Get product recommendation based on your past orders

 

Method 2:

Process:

UI Kit

Once I had a clear understanding of how the app worked and the way it is branded, I started recreating it’s UI Kit so that I can use it as my primary guide when designing the new feature: a “buy again” feature with the option to schedule recurring purchases.

 
 

Method 3:

Process:

Competitor research

To explore the way the new feature can be added to the app, I started looking at “buy again options” with the app’s primary competitors Amazon and Shopify’s Advanced Reorder, which seems to be an older business proposal.

Group 4.png
 

Objectives:

Define New Feature Requirements

Define feature functionality within the app

 

Defining Feature Requirements

Method:

Process:

Usability Test Script

For this project, I used the Test Driven Development methodology to help me define the feature functional requirements by creating the usability test script before the UI design itself. Doing so was helpful in keeping the product’s existing features in mind since the feature I add will be a secondary feature to what already exist on the app.

Test Prompts:

  1. Use existing Shop app to add an item to bag and archive an older order list from the home page.

  2. You have recently ordered a shampoo from Public Goods and you really liked the product and want to continue to using it. It’s been 3 weeks since you started using the shampoo and you’ve gone through a little over half the bottle, so you’ve estimated that one bottle last you 4-5 weeks. Their website doesn’t have recurring purchase option, but shop recently released that feature. Use the app to place a recurring purchase for the next year using the same payment and shipping option as the last purchase.

  3. You recently tried a new shampoo from your local store, that your friend recommended and you’ve decided that you want to use this new shampoo for the time being. Cancel your recurring order of Public Good Shampoo through the Shop App.

 

Information Architecture

Metod:

Process:

Feature Roadmap, Site Map & User Flow

Once I a clearly defined functional requirement of the feature, I created a sitemap of the app and added the feature into the sitemap to understand how the feature will connect to the rest of the app’s features. I then created a task flow for the main function of the feature, which will be to place a recurring purchase of a product from the user’s past purchases through the app.

 
Shop App Sitemap
Task Flow
 

Objectives:

Brainstorm feature UI Design

Design Feature flow

Wireframe Feature

 

Feature Brainstorm

Method:

Processs:

Feature Brainstorm

To get started with the design process, I took pictures of screens I will need to modify in order to add the new feature and started sketching ideas on procreate. Once I had couple different versions, including different terminology, it was time to take a break from it and revisit the usability test script and my tak flow to see which design idea work.

I then selected the top brainstorm ideas and started creating “low fidelity” wireframes using the same screenshots, so I can better visualize my design options. At the end of it, I took my design option to peers and got feedback on each design. 

Lo-fi Wireframe Iterations
 

High-Fidelity Wireframe

Method:

Process:

Hi-Fi Wireframe & UI Design

Using feedback from other designers, I picked out he best designs for each screen and then started wireframing each screen using the UI Kit i built earlier so that the screen qualities are better. I used my task flow as a guide for the screes to wireframe.

 
 

Objectives:

Build an interactive prototype to test the new feature usability

 

Prototyping

Method:

Hi-Fidelity Prototype

Once the final Wireframes were done, I started prototyping the app, focusing on the new feature and the new and modified screens.

 
Screen Shot 2021-09-14 at 7.08 1.png
 

Test the final prototype to find any design flaws

Objective :

 

Usability Test

Method:

Process:

Live Prototype Test Observation

With the completed prototype, I recruited 3 participants to test my product. I unfortunately wasn’t able to recruit any participant who are familiar with the product. As a result, I changed my test prompt so that their first task is to explore the app in person. And below were the 3 test prompts for the usability test:

  1. Use the Shop app to add an item to bag and then archive an older order that has been delivered

  2. You have recently ordered a shampoo from Public Goods and you really liked the product and want to continue using it. You have estimated that one bottle last you approximately 5 weeks. Their website doesn’t have recurring purchase option, but shop recently released a new feature to place recurring purchases. Use the app to place a recurring purchase of the same shampoo for the next year using the same payment and shipping option as the last purchase.

  3. Now let’s imagine it’s couple months later and you’ve decided to stop using this shampoo. Now use the app to cancel your recurring order for Public Good Shampoo.

Test Findings:

  • All users had confusion with the app’s side swipe feature.

  • All users were able to complete all 3 task.

  • All users went to the product page to find “Buy Again” feature

  • 2 out of 3 users were able to schedule recurring order without any difficulty

  • 1 of 3 users had difficulty setting schedule for the recurring purchase

  • 2 users mentioned that they thought “Delete order” is for deleting the order record from app

  • 1 user thought “Add to bag” vs. “Buy Now” CTAs were confusing.

reflection on the project

Key Takeaways:

  • While designing a new feature to add to an existing project, there are a lot of design limitations that the designer need to navigate through.

  • User testing could be potentially confusing an difficult, but could also be a good opportunity to improve the product overall.

Next Steps:

  • Fix design flaws before releasing the new feature

  • Add option to pause recurring purchase