TIMELINE 10 weeks, in collaboration with Sonya Badigian, Weikun Liang and Brian Nelson

ROLE Visual Design Lead, Product and Interaction Design

TOOLS Sketch, Principle, After Effects, Marvel, Photoshop, InDesign

PROJECT

Building off of our research project conducted January to April 2016, our team designed a service for Mastercard that charted new connections between businesses by enabling consumers to create mini-itineraries called "Paths" around their city. This allowed for a personalized, curated experience for business travelers, tourists and curious locals. By providing digital payment, Local allows merchants who sign up for to provide on-demand service like Starbucks that users we talked to love. Local also allows merchants to access an entirely new set of data to guide their marketing strategy. And finally, Local helps both merchants and consumers to look at Mastercard in a new light, allows Mastercard to collect new data which it can use and sell, and helps drive adoption of Mastercard products like Masterpass.

PROCESS

Brainstorming and Iteration: The first three weeks of this design project were spent brainstorming and creating concepts and low-fidelity prototypes for needs validation. Using concepts that we collaboratively ideated with our clients, we created 10 concepts for products and services, which we storyboarded into specific use cases.

We showed these storyboards to 25 users to get a sense of what would make a real difference in their lives, driving adoption of our service. From there we created 3 low-fidelity prototypes for services which served as inspiration as we met with our clients in their New York City office.

Service Blueprint: While in New York, we combined elements of our early prototypes and new concepts to create Local. We mapped out blueprints for processes like signing up, creating a path, going on a path and making a purchase, paying attention to address both front stage and back stage processes. In this way, we began to address what would constitute our stack, including which APIs we'd make use of.

Mocks: When we returned to Pittsburgh, we immediately started in creating wireframes, flows and UI for our consumer- and merchant-facing products.

For the consumer product, we started with many variants on the discovery stream, the main interface of Local. User input and testing was invaluable as we tightened up the interface, striking the balance between displaying the merchants on the path, and the path itself.

Wireframes and Site Map: Concurrently with ideating the visual look and interactions, I created a site map, with sketched out wireframes, showing the flow of the application.

User Testing: As we iterated on the UI of Local, we constantly sought feedback from target users. We talked with 4 millennials who traveled often, and performed a full usability test, asking them to think aloud through multiple tasks, including selecting and creating a Path and making a purchase.

We also led them in a card-sorting exercise to help us decide what the most important metadata to display is when picking Paths. We used interactive prototypes created with Sketch and Marvel for these 1-hour sessions.

"I just spent 4 days in New York, and had no idea what to do. This would have come in handy!" 
John, 26
 

Personas: As I got a clearer sense of our target users, I created personas to help guide the team in the final stretch, and to keep our users needs foremost in our minds while designing.

Final Service Blueprint: To create a clear sense of how Local affects consumers, merchants and Mastercard, I created this finalized service blueprint that shows how potential target users discover, utilize and share our service.

Final Consumer Clickthrough: I created this clickthrough prototype to show how one of our personas first uses Local in-context, on a business trip. Using Sketch, After Effects, Principal and Marvel, I created a high-fidelity vision of the end-to-end user experience, which helps inform both strategy and development. Please click through below.