Spffy

RESEARCH + UX + VISUAL

When it comes to fashion, social media platforms are great for discovering new trends but they are mainly a marketing tool for bigger brands and they lack utilitarian aspects that would help everyday people achieve their style goals whether it's to become an influencer or to understand the versatility of their wardrobe.

Interviews and surveys

I interviewed 7 people between the ages of 28 and 61. I would like to point out that one of the people I interviewed was a visually impaired woman. I conducted in-person interviews as well as FaceTime interviews. The goal of these interviews was to get a better understanding of peoples' struggles with shopping (in-store and on the web) as well as an understanding of how well they knew their wardrobe.

Synthesis and key findings

After synthesizing my research I found that there were several categories I was able to group this research into. The three categories main categories were finances, wardrobe awareness, and social.
KEY FINDING 1

Wardrobe awareness

5 of 7 participants have a general idea of what’s in their wardrobe but have a hard time putting outfits together in their head. This causes issues when shopping because these participants said they won’t buy something that doesn’t already compliment an item they currently own. Participants are aware of their wardrobe but mainly remember the items they wear the most and sometimes forget others.
KEY FINDING 2

Social media influence

Most participants' style is impacted by social media or friends. 3 participants that get style inspiration from social media struggle with scrolling through comments on a post to figure out what that person is wearing or where it was purchased.
KEY FINDING 3

Financial influence

People won't purchase something becuase it's either too expensive or the ROI is not high enough since they can't make a certain number of outfits with that item. This also ties to awareness because some participants won’t spend money on something that doesn’t go with the current wardrobe. Participants are looking for the versatility of their purchases.
KEY FINDING 4

Accessibility

The visually impaired participant said she does not always like to ask sighted people for help. The sales associates will tell her whatever she wants to hear in order for them to make a sale.

Personas

After synthesizing my research, I came up with three different types of users. Each had a particular goal they were trying to achieve when shopping. Below are my personas and their goals.

SEO
Halle Madison
29, FT Marketing Assistant, $80K, Los Angeles
Halle is a marketing assistant at a major beauty company based in Los Angeles. She studied fashion merchadising in undergrad which is also where she met most of her long time friends. She owes lots of money on student loans so she budgets accordingly. On weekends she likes to brunch, shop and talk about celebs style with her friends. She enjoys the social aspect of shopping in-store because she can shop with friends and be influenced by people on the street. She shops online for things she doesn't need to try on.
Halle's Goal

Halle needs a way to understand the versatility of her wardrobe because it will save her time and money when shopping.

SEO
Fox Sinclair
33, Bartender and DJ, $100K, New York
Fox is a bartender at a swanky nightclub in NYC. She works mostly Thusrday - Sunday. She shops to stay up to date with trends especially considering the crowd she entertains. She can afford a 1BR but lives in a studio apt to save money to do other things. Doesn't get to spend too much time with her friends because she works at night. She has a lot of free time on her hands during the day.
Fox's Goal

Fox needs a way to keep her wardrobe up to date with trends because it will help her become a style influencer.

SEO
Liz Graham
40, Legal Assistant, Boston
Liz is a blind woman living in Boston. She has never had vision but has light perception and she has a seeing-eye dog. She works at a law firm as a legal assistant. Even though she is blind she still wants to look good and dress nice for work. She doesn't like having to depend on sighted people to help her when shopping. She like to spend time with her friends on weekends and sometimes she volunteers.
Liz's Goal

Liz needs a more accessible shopping experience because it will give her a sense of independence.

How do we highlight the versatility and reach a person's wardrobe has in a generation where shopping and sharing are everyday activities?

WHAT IS SPFFY?

Spiffy is a fashion centric social app, specifically designed to help people achieve their style goals with the use of it's advanced product recognition and cataloging features.

Competitive analysis

I looked at direct and indirect competitors that have social and marketplace aspects, technology capabilities and strong UX/UI design. The competitors that have the most potential (Google Lens and Instagram) either lack the social aspect or lack the product recog technology.

Plus

INSTAGRAM
Social aspect. Targeted marketing. Can be a marketplace for big/small brands.
GOOGLE LENS
Product recognition. Marketplace. Most popular search engine.
SLYCE
Uses digital product recognition to help people find products easily.
WHISP
Social aspect that lets users connect with friends before purchasing.

Delta

INSTAGRAM
Media dump for uploading any and everything. No true focus.
GOOGLE LENS
Inaccurate search results at times. Works mainly on items with distinct features.
SLYCE
Dated graphics. You can only upload a photo. No scanning feature.
WHISP
The design is very clunky and dated. Not available on mobile devices.
FEATURE 1

Product Recognition

With the use of advanced photo recognition technology, Spffy will be able to pick up on colors, fabrics, and logos. The photo recognition feature will either return an exact match or suggest affordable alternative matches...or both. Use this feature to catalog items in a current wardrobe, or to look up items when on the go.
FEATURE 2

Wardrobe Catalog

The wardrobe catalog keeps track of everything a users owns in their physical closet. Users will have their closets at their finger tips at all times. Using this feature when shopping for new items will help users make smarter decisions whetehr it's a smarter financial decision or smarter style choice.
FEATURE 3

Create Outfits

Understand the full potention of a wardrobe by creating outfits. The equivalent to taking clothes out of your actual closet and laying them across your bed, this way is quicker and not nearly as messy.
FEATURE 4

Borrow items

THe borrow feature allows users to borrow items they are interested in purchasing. Once something has been borrowed, users can see how well it fits into their current wardrobe before committing to a purchase.

Setting up the structure

By conducting a closed card sort, I was able to validate my assumptions about how things would be categorized within the app. There are five sections of this app: Home feed for discovery, the closet for cataloging, the camera for capturing items, and the activity and profile sections.

From ideas to actions

I sketched ideas and brainstormed various possibilities and created low-fidelity wireframes focused on the three major screens: Home feed for discovery, camera for product recognition and the closet for cataloging. I identified connections between these screens to get a better understanding of how these areas will give the user their ideal experience.
SEO
SEO

Usability testing

After my first round of testing, users seem to be comfortable with the app overall. Many users said the similarity to instagram made the home feed easy to understand. There were no issues with the scanning feature nor were there issues with discovering items. The only major usability issues came about when users were tasked with adding items/outfits to their closet. I solved this by changing the color and placement of the + icon in my next iteration.

Colors, typography and components

Spffy was designed to accommodate scalibility, so components can work well alongside each other, at the same time, render well on various device resolutions. I started by building a components library within Sketch that would later reflect in various parts of the app, i.e., colors, typography, icons, buttons and content cards. For achieving vertical rhythm, I used an 8pt grid system.

Using Invision Studio, I was able to create animated prototypes of the final high fidelity designs mocks.

Log in screen

As soon as users log in they are taken to their home feed where they can see posts from their friends, and favorite brands.

Home Feed

The home feed is laid out similarly to Instagram, however, I didn't want to just copy Instagram. One thing I notice about alot of Instagram profiles is some people like to create interesting crops to give their post an artsy feel. So to make the layout more artsy, the app applies randomized assymetrical image possitioning for each post.

Outfit Details

Tapping in to an outfit from the homepage will take users to an overview page that breaks down the items in that look, the cost, as well as alternatives. To avoid over spending, the app will tell you if you already own similar items to help you create the look.

Item Details

Tap any item from any part of the app to get the details screen which shows the item's cost, description, materials, fit, care instructions as well as the outfits you can make with that item using your current wardrobe. Purchase the item or borrow it to save it to your wardrobe for a limited time.

Closet

The closet is where users will find every item they've cataloged as well as outfits they've created from these items. Tapping these items or outfits will take them to their respective detailsd pages as described above.

Camera

Users can access the camera to scan products. They can either catelog these products or get more details on them. The camera is also used to take selfies which will be posted on their homefeed.

Activity and Profile

On the activity screen, users can see new followers and likes as well as who is borrowing items from their wardrobe. The profile shows all of the users' posts as well as access to the apps settings.
NEXT STEP 1

In App Purchasing

Allow shoppers to have a credit or debit card on file. Change the "Purchase" buttons to "Add to Cart" buttons. Instead of linking to the brands' mobile commerce sites, shoppers can add items to their cart from multiple brands and the checkout flow will be a bulk purchase of these items.
NEXT STEP 2

Auto Cataloging

Any clothing items purchased with credit/debit card on file will automatically be cataloged in the user's wardrobe regarless of whether that item is purchased in the app, on web or in a store.
NEXT STEP 3

Google Chrome Plug In

Sometimes shopping on a computer is easier because shoppers can compare clothing items in open tabs a lot easier than comparing items on a mobile device. Next steps would be to create a browser plug in that synchs with the app for when a user is shopping on a computer but would still like to have access to their wardrobe.
NEXT STEP 4

Financial Planning

A feature that will allow users to create a weekly or monthly shopping budget to help control spending. While the app already has the ability to suggest cost effective alternatives to certain items I would like to extend this feature to also provide alerts when the user is about to purchase something that is out of their budget or will greatly impact their budget.