Torendi App

UI/UX Design

For a class project, we had to produce an app for a New york shopping experience.

iphoneapp

OVERVIEW

The objective of this case study was to design an app that would help novice shoppers enjoy their shopping experience when it comes to shopping for clothes.

I had to define a problem and define the target audience, and design solutions for an app for the users. The app will help users with their in-store shopping time efficiently.

My Role:
User Research, Interaction, Visual design, Prototyping & Testing

Duration:
Sept 2017 - Dec 2017

Tools:
Photoshop, Sketch, InDesign, InVision

THE CHALLENGE

I decided to design an app that would help users navigate shopping by filtering clothing stores like how yelp does for restaurants. Because the audience for shoppers is so broad, I wanted it geared towards women's clothing. I had to answer the following questions: What do consumers want in a shopping experience? What the current pain points were for the customers and what solutions will help solve those problems?

THE SOLUTION

I conducted research on the current and potential target market through surveys and interviews. Used competitive analysis to compare what other companies in the same market were doing successfully that could be applied this app and its interface design. I had to find the user goals for this app and create visual solutions to what consumers want in a shopping experience.

DESIGN PROCESS
torendi design process

USER RESEARCH
Scoping the problem

My research encompassed using competitive analysis and finding out the motivations behind ecommerce apps, which hare to find deals, make purchases at any time, compare products and prices, and save time.

discount
Deals & Discounts

Receiving discounts makes consumers more likely to use e-commerce apps. 84% would opt-in to receive discounts for enabling push notifications.

filter
Reccomendations and filters

E-commerce offer recommendations for similar products. About 70% of consumers would use recommendations.

personalize
Personalization

59% of respondents would opt-in for a personalize in-store experience for ecommerce apps.


AroundMe

AroundMe quickly identifies your position and allows you to choose the nearest Bank, Bar, Gas Station, Hospital, Hotel, Movie Theatre, Restaurant, Supermarket, Theatre and Taxi. AroundMe shows you a complete list of all the businesses in the category you have tapped on along with the distance from where you are.

Strengths
  • Easy Navigation
  • Apparent signifiers and call to action
  • Straightforward icons and features
Weakness
  • Lack Filters
  • Information out of date
  • Functionality problems
around1
around2
around3
around4
Places Around Me

Places Around Me helps you to find Airport, ATM, Bank, Bar, Cafe, Hospital, Gas Station and total 66 types of places around you.Using this application you will find nearest places in minimal time.It allows you to save places for later use.

Strengths
  • Clean interface with intuitive design
  • Pictures of Locations
  • List and Map view to view locations
Weakness
  • No Manual indication of location
  • Doesn't accurately find locations in some areas
place1
place2
place4
place5

USER PERSONA
Understanding the User

Target audience for app is for clothes consumers, Shopaholics tourists, women or people that identify as female, and especially shoppers with a budget or time restraint. Because the audience for shoppers is so broad, I narrowed the scope to gear towards women's clothing.

persona

SELECTED FEATURES
Defining functionalities

From the surveys, research and comparative analysis, I narrowed and decided on the main features to integrate into the shopping app.

filters
Robust Filter

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.

list
Favorite List for easy access

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.

discounts
Deals and Discount Alerts

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.

alert
Store traffic signifer

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.


INFORMATION ARCHITECTURE
User Flow Diagram
userflow

WIREFRAMES
Low-fidelity Prototyping

Wireframes were done in sketch for the Torendi app. While brainstorming for each screen, I also reviewed existing interfaces for certain features and functionalities.

wireframes

VISUAL DESIGN
High-fidelity Prototype

Wireframes were done in sketch for the Torendi app. While brainstorming for each screen, I also reviewed existing interfaces for certain features and functionalities.

landing
login

When opening the login page, depending on if you are a registered user, you can create a new account or sign into the app.

homes
appfilter

After signing in, the user will see a list of categories of women clothing to help narrow the search of clothing stores. The additional filter on the landing page will further filter prices, distanct etc.

listview
favorites

Once a category is selected, they will see a list of stores by popularity, distance or price. They can favorite their stores as well.

map
maps

As well as the list view, there is a map view to see where the stores are located on the map.

search
store

Once a store is selected, they can view reviews, images, and details of the store as well as the deals associated with the brand and store.

deals
deal

Finding deals is a major feature that allows users to view upcoming deals and the store deals.

notificaiton
profile

Notification and profile page.


STYLEGUIDE
Colors

As it targets women's clothing, I find purple and pink to be feminine colors.

colors
Logo

The logo that came to mind was with handwritten font. Torendi is a play on Japanese pronunciation of trendy, and hand lettering font gives it a 'trendy' and feminine appeal.

logo
Typography

The typography is all sanserif. Legible and pleasant to read.

text
Icons
icons


USER TESTING
Scenario 1: You want to shop at one of your favorite stores. Find your latest favorited store.
users1
Result

5/5 found the favorited store easily from the global navigation.

Scenario 2: You want to find information on a store that you came across on your list.
45user
Result

4/5 were able to find the store information from the deals list or search page.

THE WEBSITE

Here's a website that I built to accompany the app for Torendi.

macbook design
REFLECTION
Lessons learned

For this project, I had to create an app for a very broad problem. During the design process, I encountered the feature creep too often and had to place my own constraints and narrow the scope. As product designer, I need to design the idea to satisfy the bigger picture requirements enough to put in front of users or stakeholders to stimulate feedback. This will get you meaningful insights to achieve your design goals.

Although we discovered additional problems through stakeholder conversations, we reconsidered the overall impact on all the problems and tried to define an effective solution. Although it is easy to assume what is best for the product, I learned the importance of not relying on my own assumptions and to constantly validate my own ideas with user feedback.


MORE PROJECTS