Screen Shot 2022-08-10 at 4.17.13 PM.png
Screen Shot 2022-08-12 at 2.24_edited.jpg
Flying iPhone 12 Mockup Left View.png

1985 is a shopping app meant to help users in their online shopping journey. The app was developed to provide an “intuitive, all-inclusive” online shopping experience, and was designed to mimic the way users browse social media. 

PROJECT DURATION

8 Week Project

PLATFORM

iOS App

MY ROLE

Sole UX/UI Designer.

The Challenge

 

Online shoppers cannot enjoy their mobile shopping experience. It’s typical for mobile users to browse through their phones and attempt to online shop, only to find a lack of functionality and usability. A few problems include: not being able to save products, struggling to find sales & coupons, tedious checkouts, and difficulty tracking orders. These issues become especially evident when users shop on multiple sites and have to repeat the process multiple times. 

 

Another challenge is navigating mobile shopping sites and apps. Many clothing brands focus on their desktop vs. mobile sites, making the two experiences disparate. Shopping apps also tend to be inconsistent with their sites, leaving users confused and frustrated. This is especially true for luxury fashion brands, which put off online shoppers from purchasing directly off their phones.

The Solution

I created 1985 - a simplified, all-inclusive shopping app where users can easily perform all the functions above and online shop stress-free. It includes all of the functions that shopping sites lack including saving and categorizing products, easy checkout, product tracking, auto-coupons, and more. The app's algorithm specifically shows users products based on the things they like and brands they follow while also recommending new items based on popular trends. 

Layout 8.png
Screen Shot 2022-08-11 at 6.20.00 AM.png
Discovery 
Ideate
Design
Test
Reflection
01 /  Discovery

Secondary Research 

While doing secondary research, I found the most common problems mobile shoppers experience -

 

Lack of wishlist 

Most consumers won’t buy an item immediately and will use their carts as a reference list to return to later. Users tend to forget about items or find it a hassle to go back and find them when sites don't save them automatically. Having an easy-access wishlist of sorts also improves the online shopping experience for mobile users since it’s harder to navigate on a smaller screen. 

Product discovery

When viewing a product on a large screen, a consumer can see the image, the information, and the reviews displayed side by side. On a mobile device, they can see just one thing at a time. 

Filling in forms

Most mobile users agree that it’s annoying and fiddly to fill in a form on your phone. Using up-to-date technologies for location-based services and synchronized accounts will increase the possibility of completing a shop.

Slow Checkout 

Many consumers have said that interruptions and too many steps in the checkout process are one of the main reasons that they do not shop on their mobile devices.

Lack of Incentive

Coupons and discount codes are proven incentives for online shoppers and offering “mobile only” promotions may help tip the balance toward mobile devices when making a purchase decision.

Security Concerns

According to Statista, 35% of people said that they do not shop on their mobile device because they are concerned about security. This is very high, and retailers must address this issue with heightened security measures as well as offering a variety of digital payment options to allow customer to choose the option they feel most comfortable with.

Primary Research

To get insight as to how users online shop, I used screener surveys to recruit participants, after interviewing them and collecting more data I was able to synthesize my findings into affinity groups,  empathy maps, and personas. 

Surveys

When creating the screener survey the main objective was to find participants who online shop frequently and to to evaluate how people shop online across different sites.

Interviews

I conducted user interviews in order to get a better understanding of how users shop online, and what steps within the online shopping process users would want to be improved. 

Affinity Mapping

With all the notes and recordings from the interviews, I put everything in perspective, synthesized with the participants, and created an affinity map with six categories. 

Empathy Map 

An affinity map was then categorized into the “frequent online shopper”. 

Activity 5 - Affinity Map.jpg
Activity 5 - Empathy Map.jpg
Slide 4_3 - 1 (1).png

After a deeper look into my empathy map, I created a persona. 

Is a college fashion student in NYC. She's very fashion-oriented, keeps up with trends, and goes out with friends often. Since she goes to a fashion school in a fashion capital, she's surrounded by individuals who dress up on a daily basis. She browses the internet whenever she has free time and follows a number of fashion influencers. She's often influenced to buy new items (clothing, accessories, etc.), and does large shopping hauls. 
 

Suki  |  21 Years Old  |  Single / No Kids  | Fashion Student  |  NYC

"I'm online browsing literally all the time. Whenever I have free time, I'm either on social media or I'm online shopping."
 

Goals 
- Save wishlist items from different sites to one place
- Purchase items without having to re-input info every time
- Tracking shipped items in one place, not separate emails
- Save money by getting the best deals automatically
- Compare similar products easily; not having to go through tabs
- Being able to see a history of purchased items 
- Find products more easily through images / filtering 



 

Pain Points
- Not being able to save products when casually browsing online 
- Not being able to see images of similar products from different brands in one place
- Not being able to checkout easily
- Not being able to check tracking easily
Expired shopping carts - having to find items again / forgetting what items were in the original cart
- Having to flip through multiple tabs to compare products, and complete multiple checkouts



 

IMG_6173.JPG

Persona

HMW’s 

The final piece of my research was to synthesize this data, with How Might We (HMW) statements to clearly communicate the most important problems users want solved. ​

HMW make it easier for online shoppers to save items while they’re browsing?

 

HMW make the checkout process more efficient and convenient?

 

HMW make it easier for online shoppers to see all the available options from different sites (ie. black pump heels)?

 

HMW help consumers save money, by finding the best deals? 

HMW make product comparison across different sites, easier for the consumer? 

 

HMW help online shoppers make less impulsive purchases? 

 

HMW help online shoppers track their purchases more easily? 

02 /  
Ideate
After focusing on HMW’s It was finally time to ideate and begin sketching screens to find possible solutions to solve the users problems.
IMG_2029.png
IMG_2033.png
IMG_2031.png
IMG_2030.png
E1C9DB7C-FDD5-4219-9BCE-1BE2B1012BED_1_105_c.png
813AC306-1306-414D-AEA5-D7D06291966E_1_105_c.png
59195CE3-0D67-4A79-B6DC-50837BFB950F_1_105_c.png
A6761FD1-1E7A-45C7-911D-16059EFF6E30_1_105_c.png
67FC2CF4-D7AC-4734-A7AA-9D617002729D_1_105_c.png
User Stories 

 

Before I could get started with designing I had to identify the most important functions this app needs. User stories were categorized by priority, the highest being the most crucial functions, this helped me understand the necessary features and elements that needed to be implemented for a smooth experience. 

High Priority

- I want to be able to save items so that I can browse more conveniently.

- I want to pay without having to input my info every time so that I can checkout faster.

- I want to get the best deals automatically so that I can save money whenever I shop.

 

Medium Priority

- I want to be able to compare items from different stores easily.

- I want to be able to track all my orders in one place so that I can check the shipping more easily.

- I want to be updated when an item I want is on sale so that I can get it at the best price.

 

Low Priority

- I want to be able to categorise my saved items

- I want to be able to see all my purchases so that I can track how much money I’m spending. 

Sitemap

Now that I had a better idea of what my users needed, I created the sitemap with the intent designing the app to be navigated intuitively, similarly to how users navigate social media apps like instagram. The sitemap also made sure that all the information, functions, features and screens were included.

Activity 9 - Site Map w_background.png
User Flows

My user flows helped me understand how I wanted each screen to be laid out in order for users to complete their tasks. From my MVP’s I chose three routes that were essential to 1985. 

Activity 10b - User Flow w_white background.png
Sketching 

Sketching helped me bring the app's user flows to life. During this process, I grasped an overall idea of how I wanted the app to feel and look --- modern and minimalistic.

IMG_0038.png
IMG_0040.png
IMG_0041.png
IMG_0042.png
IMG_0043.png
IMG_0044.png
IMG_0045.png
IMG_0046.png
IMG_0047.png
IMG_0048.png
IMG_0050.png
IMG_0051.png
Low-Fidelity Wireframes

I began working in Figma and brought those sketches into low-fidelity wireframes, doing so helped clarify how I wanted functions spaced out on screen as well as giving me a much better insight on how I could simplify and prioritize functions.

Frame 155.png

To keep the design consistent throughout the app, I created a moodboard and style guide for the main fonts, iconography, and colorways. 

03 /  
Design
Screen Shot 2022-08-11 at 9.49.47 PM.png
Style Guide
Style Guide - Template (2).png
Screen Shot 2022-08-11 at 9.41.08 PM.png
High-Fidelity Screens 
After creating my mood board and style guide, I started editing my low/mid-fidelity screens. I kept the app stylisation minimal, as I wanted the focus to be on the products. 

Flat iPhone-2.png
Flat iPhone-3.png
Flat iPhone-4.png
Flat iPhone-5.png
Flat iPhone-6.png
Flat iPhone-7.png
Flat iPhone-8.png
Flat iPhone-9.png
Flat iPhone.png
Flat iPhone-1.png
Flat iPhone-10.png
Flat iPhone-11.png
Flat iPhone-12.png
Flat iPhone-13.png
Flat iPhone-14.png
Flat iPhone-15.png
Flat iPhone-16.png
Flat iPhone-17.png
04 /  
Test 
Usability Tests 

I was ready to test the app and conduct usability testing. I wanted to evaluate how users would complete tasks and navigate throughout the app. All participants had previously taken the survey and were reached out to conduct the testing. 

Many testers were intrigued to know how to use other aspects of the app that were not developed or prototyped yet, however they were redirected to the tasks at hand.

   Test Objectives 

  • Understand the user’s first impressions of the product 

  • Recognize any pain points the user has while navigating through the product

  • Understand how the user feels during the process of using the product 

  • Observe reactions and expressions by the user while using the product 

  • Understand the strong and successful attributes the product contributes 

Testing Results & Redesign

During the testing, there weren’t any significant element or design issues that users wanted changed, but there were a couple features that they wanted to experience during testing that they think are important for the app. 

Issue #1

During the checkout process, users asked if there was a way to pay extra for expedited shipping.

 

Unlike online platforms like Amazon, most luxury e-commerce sites only provide 3-5 business days shipping and not next-day delivery. Having this as an option would help set 1985 apart from other luxury ecommerce sites. 

After observing this pain point, I added shipping options to the checkout page.

Checkout Page copy.png
Profile Page copy.png

Issue #2

After finishing the test's last task of tracking “purchased” orders, users asked if they could also return their orders. Most shopping apps don't do direct returns. Instead, users have to go to the brand's site to register a return. 

 

Return Page copy.png

After observing this pain point, I added a returns feature to the profile page. 

To make a return, users select the orders they want to return and hit the return button. From there, they can choose a form of refund and a method of shipping. 

05 /  
Reflection

As an intro to UX/UI, I decided to do an eCommerce app. During the development of this app, I learned many things about the UX process and my own strengths and weaknesses. I was most excited about the UI portion of the project since I come from a design background, however, I realized how much I also enjoyed other aspects like user interaction. It was interesting to see how users interacted differently with an app during the prototyping phase. 

On the other hand, I also had a few learning curves. I found that most of these fell within the beginning stages of the case study. For example, I learned that I am not my user and cannot assume that everyone thinks the same as me. While conducting my primary research, I was surprised to learn that all users have different behavior, viewpoints, and goals. Although this seems obvious, it was something that didn’t occur to me until I was interviewing people one on one. I picked people who completed my initial survey, so I assumed they’d fit into a similar archetype of online shoppers. It showed me that I am in fact not my user and that even though people have similar problems and needs, they are not the same. The insights I learned from these interviews helped me better understand what users actually wanted and not what I thought they did.   

 

Going forward, I’m excited to tackle new UX prompts and better my UI skills. Thank you for reading through! I hope you enjoyed learning about my design and thought process. :)