Map My Pin

An app that locates your favourite fashion pins from Pinterest in nearby stores.

Skills required: User Research, Participatory Design, Sketching User Flows, Sketching Interfaces, Paper Prototyping, Clickable Prototyping, Usability Testing.

Part 1 — Setting the Challenge

Duration of project: 4 days

Aim: To learn the practice of rapid prototyping.

Brief: Design a rough interactive paper prototype that adresses a key common problem in your partner’s (Hannah’s) life.

User Profile:

Skills used: User interviews, Concept Mapping.

I interviewed Hannah so that I could find out about her day-to-day life. She loves singing, art and photography but above all, she loves shopping. She lives in Florida and almost weekly she’ll find herself driving to one of her favourite malls (she dislikes online shopping because she can’t try things on). Pinterest is her main source of inspiration for fashion where she has over 6000 pins, but finds it hard to find what she likes on Pinterest in physical stores. She loves a good bargain but also likes her clothes to be of good quality, and she can often get overwhelmed by choice. Hannah tends to buy more than she wanted so returns the majority of what she has bought. It’s a very long and exhausting process and frequently leads to an unsatisfied Hannah.

Concept map illustrating Hannah’s relationship with shopping; it can often be a long process in finding what she wants.

Part 2 — Discovering the root problem

Skills used: Storyboards, task analysis.

I drew a storyboard of Hannah’s typical shopping journey so I could draw out key problems that made her shopping journey so long and unsatisfying.

Hannah’s existing shopping experience; it is long and exhausting and she is often left feeling unsatisfied.

Key problems:

She would like to find what she liked on Pinterest but doesn’t know where to find the nearest store that it’s in stock.
She will still try on more clothes than she needs to, even though she started her journey with a shopping list.
Even if she’s not sure about the clothes she’s trying on, she’ll buy them anyway.
At home she regrets her decisions and worry’s about whether what she has bought could have been bought at a better price.
She always returns something.

At this point I went back to Hannah to discuss which part of the journey she found the most frustrating. “All of them”, she replied, “but ultimately I want to try on what I see on Pinterest to see if I like it on me, but I don’t know where it’s in stock”.

Eureka!

Hannah always starts her shopping journey with a clear goal (trying to find fashion she likes on Pinterest in stock in stores), yet rarely achieves it and ends up exhausted and unsatisfied.

Hypothesis: If Hannah knew where to find things she liked from Pinterest before setting out on her shopping trip, she would save time and money.

My solution: Design an app that identifies the items she likes on Pinterest and shows them on a map where they are in stock in physical stores.

Part 3 — Taking actions

Skills used: Sketching user flows, sketching interfaces

First, I used a task analysis map which helped me to imagine the logic behind the app. Below I’ve highlighted the perfect journey for Hannah.

Hannah’s perfect journey: She finds a pin she likes, she wants to try it on, the app identifies it and shows where it is in stock on a map, she reserves it and she collects it.

The map also accounts for when she likes a pin, but doesn’t want the exact item (perhaps it’s too expensive). The app will suggest other items, for example blue dresses, in various price ranges and show them on a map. Hannah could also choose to buy the item and get it sent to her if she doesn’t have time to go and collect it.

Sketching

Below are my first sketches for the Map My Pin app. I made low fidelity sketches so I could concentrate on the breadth of the user journey.

User flow sketches: Log in with Pinterest, locate Pin you like, tag it with features you like (colour, style etc), the app will then show items of the same similar, you pick which ones you’re interested in and then will be shown on ‘My Map’.

The app allowed Hannah to first find her Pin by searching by board or recently added. Once the pin was found the tagging system (like tagging pictures on Facebook) would allow Hannah to define what she liked about the item in the Pin and the app could then suggest other items that were the same or similar in different price ranges. This feature could address her worry for getting the best price.

Part 4— Testing, testing, testing

Skills used: Usability testing, rapid prototyping, paper prototyping, clickable prototyping

Paper Prototyping

The first round of usability testing was done with a paper prototype. It was quick to make and therefore quick to make changes. Hannah gave some immediate feedback:

“I don’t need my Pinterst sorted for me”

“What’s ‘tag’?”

“I don’t know what to do!”

“This is complicated”

Back to the drawing board! I took at look at my user flow sketches as asked myself, “Which screens aren’t addressing the original problem identified in the research?” Below shows how this lead me from 9 to 4 screens.

I took out the screens that weren’t answering the original problem: Hannah can’t find items she likes from Pinterest.

Above all, the tagging feature proved to be too complicated. Hannah understood that by using the app she would locate the item in her pin but was then confused by the fact she had to tag the clothes. She also didn’t like how you could sort her Pinterest by recent added and by board so I took one screen out. I remodelled the prototype and the result of the new round of testing proved a success:

“I get it now!”

Clickable Prototyping

I used POP App to create a clickable prototype and tested it on 3 other users.

Clickable prototype: log in, search/find the item you want to locate, click item to open map, map is shown, reserve item.

The results from this round were both positive and negative, but most users understood the concept. A few themes that came out, which could be iterated again, were:

Users didn’t immediately realise the first screen that was shown after log in was Pinterest.
Users didn’t understand the ‘My Map’ section where they could add more items to their shopping list.
One user suggested a profile section where you can save searchs for later.

View the clickable prototype >

— — — — — — — — — — — -

My portfolio website: www.annamcsweeney.com

Twitter: @anna_mc_ux

Tumblr: anna-ux-story.tumblr.com