Video Platform | Real Vision

Client: Real Vision

Team: Saatchi & Saatchi

Project: Video Platform UX Consultation 

What I did: Stakeholder Interviews, Site Audit, User Testing, User Survey, User Interviews, Card Sorting

Real Vision is a video-on-demand platform for finance where investors can learn about macro-level trends and develop actionable trade ideas. Real Vision came to us for a recommendation on how to improve their platform, as their internal team was in the process of redesigning their website and developing a mobile app.

Audit and User Testing

We started off with a site audit and user testing of the existing platform to establish an objective, shared knowledge of what the was working and what wasn’t.

Screen Shot 2016-04-18 at 1.42.43 PM

 

Comparative Analysis

Real Vision’s competition is primarily traditional newsletters and research publications. Without direct competition in the same space, we looked at other video experiences like Hulu and Netflix to see what inspiration we could draw from their platforms.

Survey 

We surveyed Real Vision’s existing users to uncover demographic and behavioral information. Surprisingly, we found that the majority of users were using Real Vision to help shape their personal investing strategy, not for business.

Personas

After analyzing the survey results, I began interviewing users from a sample that was representative of the various occupations, ages and behaviors of our users. The deeper I got into interviewing, my assumption to segment users based off how frequently they used the platform was confirmed. We provided Real Vision with two personas that were representative of the needs and behaviors their users. RV-Persona-JamesRV-Persona-Nicholas

Card Sort

Users found it challenging to navigate the existing IA of the website, so we started exploring the navigation structure of the video content with a card sorting exercise.

This grid shows the distribution of cards across the categories defined by users. Each table cell shows the number of times a card was sorted into the corresponding standardized category. Users categorized videos into a variety of different “buckets”. Some approached the task thinking about the content (i.e. China) some the speaker, some the delivery (i.e. Investing Psychology).

RV-Card-Sort

We found that users thought about categorizing videos in many different ways. Some organized videos by topic, some by delivery, some by speaker. We recommended a new design that included filtering options on different levels, as well as tagging, to aid in content navigation. 

* * *

Real Vision’s design team was able to take the insights and recommendations we delivered and apply them to the redesign, which is currently in development.

Kickoff | Dating App

kickoff-preso

Screen Shot 2015-04-04 at 2.08.29 PM

Kickoff is a social dating app that introduces you to friends of friends. Kickoff focuses on quality introductions, not quantity.

The Challenge

Kickoff’s current design only allows users to create profiles as individuals to match and chat with others. In the current design there isn’t a way for users to meet people in a group setting.

The Solution

I designed a new feature for Kickoff that allows users to create groups with two other friends and chat with other groups after getting a mutual match.

Timeline: 1 Week

What I did: Competitive Analysis, User Flows, User Scenarios, Wireframes, Hi-Fidelity Prototype, Style Guide, Technical Documentation


This video shows how we would introduce the new feature into a user’s daily “batch” of matches. A notification and a group match would appear, with a prompt to create a group so you can match with friends.

Competitive Analysis 

In my competitive analysis, I found very few apps that had this type of feature. Out of the few that had a similar feature, they had confusing interfaces and poor feedback to a user actions within the system.

Screen Shot 2015-04-06 at 2.23.06 PM

User Flows

To explore the 4 different scenarios (a New User vs Existing User, and being invited to a group or creating a group and inviting friends) of someone using this feature I started sketching out user flows and thinking about the different parts of the interface that each type of user would need to interact with.

Screen Shot 2015-04-06 at 2.20.15 PM

Final User Flows

Screen Shot 2016-05-25 at 11.00.12 AM

First Round Wireframes

After sketching out key screens, I brought my designs into Illustrator for a first round of low-fidelity wireframes.

Screen Shot 2015-04-06 at 2.39.56 PM

Final Wireframes

For this project I delivered a final screen flow and technical document outlining interactions and edge cases that was to be passed off for development.

Screen Shot 2015-04-06 at 3.43.08 PM

Walmart | Greenlight a Vet

Client: Walmart

Team: Saatchi & Saatchi New York

Project: Integrated Campaign

Greenlight A Vet is a national campaign to establish visible support for veterans. It invites Americans to show their support by switching out a publicly visible light in their home with a green bulb, and keep it glowing every day as an ongoing symbol of hope and renewal for our veterans.

Greenlight A Vet launched with a national TV campaign and online commercial featuring real-life veterans, which aired during this year’s World Series baseball championships. We released a web series that profiled each veteran and shed light on the impact transitioning veterans make in and out of uniform in communities across the country.

In just 3 weeks we saw…
  • Over 130,000 uses of our hashtag #greenlightavet
  • 2.8 million visits to the Greenlight A Vet website
  • So many bulbs were sold… Walmart sold out!
Overall, the campaign received…
  • 1.6 billion media impressions
  • 3.4 million online acts of support
  • 400+ media stories
  • 94% positive brand sentiment

Greenlight a Vet was nominated for a Webby Award in two categories, Advertizing and Media and Online Film and Video. It was also shortlisted for a 2016 Cannes Lion.

Screen Shot 2016-03-18 at 5.54.19 PM

 


 

User Research

Using a screener survey, I selected interview participants based off their experience supporting social causes. Through in-person and phone interviews, I started to identify behavioral trends and pain points we could design for to help maximize participation in the campaign.

Screen Shot 2016-03-17 at 5.59.10 PM

User Journey 

At a high level, I worked with our strategy and social teams to map out the campaign touch points to ensure that the experience would have consistent messaging and action points.Screen Shot 2016-03-17 at 5.53.21 PM

 

Campaign Plan

At a campaign level, we planned media and social content to ensure that messages were consistent across platforms leading up to the launch date for each version of the website.

Screen Shot 2016-03-18 at 4.18.53 PM

Wireframes

Starting with quick sketching sessions with the creative directors, we brainstormed what role we wanted the website to play. We determined a structure for site that would tell the story of the campaign in a cohesive way, feature rich content, enable easy sharing and link out to our partner organizations – making the site a central point for people to learn how to get involved with the campaign. GLAV v.22 copy

Live Website 

glav

Visit greenlightavet.com or explore #greenlightavet to learn more.

Lucky Charms | Social Campaign

Client: Lucky Charms

Team: Saatchi & Saatchi New York

Project: Marshmallows Only Social Campaign 

Lucky Charms receives countless calls, emails, tweets and Facebook posts from marshmallow-obsessed fans longing for a box filled with only marshmallows. What if Lucky Charms made their dreams come true with a limited-edition marshmallow only box?

We designed a campaign that delighted and entertained Lucky Charms fans and encouraged them to share their love for the magically-delicious cereal. My role was creating a user journey for the overall experience to help communicate the idea to the client.

marshmallows-only

To enter, fans shared a photo of themselves holding an imaginary box of Lucky Charms on Facebook, Twitter or Instagram with the hashtag #Lucky10Sweepstakes.

Screen Shot 2016-03-18 at 2.05.02 PM
Lucky Charms responded to all entries with custom GIFs, and the “Lucky 10” received limited-edition boxes of Lucky Charms Marshmallows Only cereal!
read more about it  General Mills / Refinery29 / Fast Company / Today 

 

E-Commerce Microsite

One of my first projects while a student at General Assembly was creating an e-commerce holiday microsite. I was given a local sporting goods shop as a brand to design for, and created a digital experience that enables holiday shoppers to quickly view a selection of products based off their relationship with the person they are buying for. 

Privately owned since 1908, Paragon Sports has been the benchmark of quality for all types of sporting equipment and gear. They take pride in showcasing products from brands you know and love as well as unique brands that you may not be familiar with yet. Their mission is to provide a unique and fulfilling shopping experience to every customer, every time, by setting the standard in customer service and quality product.

With a curated gifting experience featuring a collection of 100 hand-selected products, Paragon can bring its in-store personality to a broader audience. I focused on adapting the unique in-store experience of shopping at Paragon in this microsite. Shoppers will be guided through the site as if they were shopping with an expert from Paragon’s staff.

Competitive Analysis 

This year 43% of holiday gift spending will happen online. Smaller retailers like Paragon need creative digital strategies to compete against large e-commerce companies during the holidays.

Without any differentiating factors, Paragon’s existing site doesn’t stand out from the competition, and my goal was to create a unique shopping experience to leverage the competitive edge that Paragon has (but fails to communicate digitally).

Screen Shot 2015-04-08 at 2.51.45 PM

Screen Shot 2015-04-08 at 2.52.06 PM

User Flow

For this project, we were given three personas to design for. I chose “John” as my primary user, and worked through flows and scenarios in which he was shopping for his young daughter.

Screen Shot 2015-04-08 at 2.59.14 PM

Wireframes and User Testing

Starting with sketching and low-fidelity wireframes, I tested and refined the initial designs based off user feedback from testing sessions with classmates.

Screen Shot 2015-04-08 at 2.59.04 PM

Prototype

I created a low-fidelity protoype with Omnigraffle + Invision. View it here!

Screen Shot 2015-04-08 at 3.33.10 PM

The deliverable for the project was the low-fidelity mockup, but since then I’ve been playing with a responsive design using Hype. I’m familiar with Axure and InVision, but Hype is new to me and it’s been fun to play around with the beta version.

responsive

Client Management Dashboard | Health & Wellness Client

screen-shot-2015-04-03-at-3-01-43-pm

Client is a health and wellness service provider that works with massage therapists to deliver on-demand massage services to clients around the country. 

Currently, concierges are booking massages for their clients without a good way to manage payment options or clients’ personal details. We designed an easy-to-use dashboard that streamlines the process for concierges, making booking and paying for clients’ appointments easy and intuitive.

Timeline: 10 Days

Team: Alivia Duran, Marga Javier & Colin Allen

What I Did: Project Manager, Comparative Analysis, User Interviews, Persona Creation, Wireframes, User Testing, Interactive Prototype

User Interviews

We started by reaching out to concierges in our client’s network who were already using the serivce, as well as concierges who had never used the service before, to gather data from a variety of perspectives. Through extensive interviews we identified trends in the behavior and needs of our users, and found two main types of concierges, Personal and Hotel. Our research showed us that the primary user of this booking feature would be the Personal Concierge.

Screen Shot 2015-04-03 at 3.07.16 PM

Key Findings

We found two main types of concierges, and our research showed us that the primary user of this booking feature would be the Personal Concierge.

Hotel Concierge

  • Books one-off appointments
  • Has existing, established preferred partners in local area
  • Works off commission

Personal Concierge

  • Books recurring appointments
  • Has many service providers to serve client’s needs
  • Doesn’t take commissions

Personas and User Flows

From our interviews with distilled the trends we saw into personas that represented our concierges, and started working thorough flows and scenarios to get a better understanding of how they would use the product.

Screen Shot 2015-04-06 at 3.22.58 PM

Design Studio

To maximize unique perspectives of our stakeholders, we presented the team with a user flow and had them sketch key screens of how they imagined the system. 

Screen Shot 2015-04-03 at 3.56.54 PM

Interactive Prototype 

We started by sketching our initial ideas, we did a first round of wireframes and tested them with users. After refining our designs through several rounds of testing, we came up with a final interactive prototypes for our client.

Screen Shot 2015-04-06 at 3.20.57 PM

see full case study here (password protected, please email me for access)

Yelp | Travel App

Screen Shot 2015-04-04 at 2.25.06 PM

People use Yelp to find all sorts of things—especially when they’re on vacation and in an unfamiliar place. Yelp wants to expand their mobile offerings to be the go-to place for travelers planning their trips. We designed a feature that seamlessly integrates into Yelp’s current app that allows users to create itineraries with designated locations and destinations and share them with friends.

Timeline: 10 Days

Team:  Alivia Duran, Rose Kue & John Cheung

What I Did: User Research, Competitive Analysis, User Flows, High-Fidelity Wireframes, User Testing

GALogo Student Project at General Assembly

Screen Shot 2015-04-04 at 2.20.31 PM

From our screener survey we carefully selected a number of respondents that represented a range of potential users with differing backgrounds and interviewed them about their habits, behaviors, pain points and what delights them when they are traveling or planning a trip.

Screen Shot 2015-04-04 at 2.21.21 PM

We conducted competitive and comparative research, specifically looking at what Trip Advisor had to offer, as it was a commonly cited source from our initial survey.

Screen Shot 2015-04-04 at 2.21.26 PM

Trip Advisor caters to the more “robust” traveller, one who likes to plan out every every detail, from flights to tours. We wanted to create a travel feature for Yelp that doesn’t overwhelm the curious, flexible traveller.

Identifying Yelp’s Current Offerings for Travelers

Screen Shot 2015-04-04 at 2.22.14 PM

Yelp’s current “Lists” feature is only available on the website, not the mobile app, and only lets users add places they have reviewed to each list. Although Bookmarks are heavily used on Yelp, there are only 3 filtering options, they are buried under “more” in the app, and map view isn’t filtered.

User Flows and Personas

From our interviews we distilled the needs and behaviors we identified into three personas, our primary persona being “Luke” (below). We started exploring the feature with user flows that gave an idea of how our user would interact with the system.

Screen Shot 2015-04-06 at 10.18.47 AM

Create a New Trip with a destination from a bookmarked review

Screen Shot 2015-04-06 at 10.11.08 AM

Wireframes and User Testing

Screen Shot 2015-04-04 at 2.23.32 PM

UI + Annotated Screens

Screen Shot 2015-04-06 at 10.29.51 AM

Om Finder | Fitness App

Busy professionals have trouble finding and signing up for quality fitness classes that are near their home or work, and need information about classes and payment all in one place. Om Finder 2.0 helps users find, book and pay for fitness classes nearby, discover new instructors, and get rewarded for all the hard work.

Timeline: 10 Days

Team:  Alivia Duran & Melanie Wider

What I Did: User Research, Competitive Analysis, User Flows, High-Fidelity Wireframes, User Testing, Invision Prototype 

GALogo Student Project at General Assembly


Survey

Our initial survey was designed to explore workout habits, class attendance, incentives to exercise and general needs when trying to stay active.

Screen Shot 2015-04-03 at 2.19.47 PM

Key Findings

  • Users like variety in their workouts and book classes ahead of time
  • Users need extensive but concise information especially relating to class size and instructors
  • iPhone was the platform of choice to book classes and check schedules
Interviews and Affinity Mapping

By hearing real life experiences about users’ workout habits we identified behavioral trends and current issues that users face when scheduling workouts on-the-go.

Screen Shot 2015-04-03 at 2.25.49 PM

Personas

Screen Shot 2015-04-03 at 2.46.52 PM Screen Shot 2015-04-03 at 2.22.00 PM

Existing Om Finder App

Om Finder is a free app is designed to help iOS users locate yoga studios, classes, and instructors in Canada, the U.S., and around the world. Data is sourced through an API provided by Mindbody, but class and instructor information isn’t up to date.

Issues with current app:

  • No incentive to reserve through Om Finder
  • No curation of classes. Dependent on breadth of listings
  • Users can can reserve a spot, but not pay ahead of time
  • Only offers yoga classes
  • Find a friend function doesn’t work

Screen Shot 2015-04-03 at 2.30.03 PM

Competitive Research 

We also looked at other similar products, what they did well, and what we wanted to improve on.

Screen Shot 2015-04-03 at 2.30.22 PM We found extensive but overwhelming class offerings which make quality class discovery difficult, and a lack of incentive to actually use the site/app to discover or book classes.

Prioritizing Features

With the three personas we developed after our interviews, we started identifying features. We ranked them from essential to “nice to have” for the user, and then from low to high design and technical effort.

Screen Shot 2015-04-03 at 2.31.39 PM

Using the prioritized list of features and insights from interviews we refined the core functions needed for our minimum viable product.

MVP Key Features

  • Discover new classes
  • Book and pay for classes
  • Feature trusted instructors
  • Incentivize workouts

Screen Shot 2015-04-03 at 2.31.45 PM

Sketching UI

To rapidly explore ideas for initial designs, my favorite tools are a Sharpie and my notebook! Before starting digital wireframes, we explored what the screens could look like on paper.

Screen Shot 2015-04-03 at 2.33.34 PM

User Testing 

After sketching flows and exploring our initial ideas, we created wireframes and tested them with users to validate our designs.

Screen Shot 2015-04-03 at 2.34.41 PM

Wireframes

Annotated screen flow for sign in and checkout flow.

Screen Shot 2015-04-03 at 2.35.33 PM

Budget Tracking | Finance App

Screen Shot 2015-04-06 at 1.56.42 PM

This project was completed as a design challenge in an 8-hour time constraint. 

The Challenge 

In this day and age, there are so many ways to spend money; in many cases, too much money. Design a digital experience that would help a person keep track of how much they’re spending as well as help them save money. 

The Problem

Millennials find it challenging to save money and stick to a budgets. They don’t know where to turn for solid financial advice and many are concerned about how debt is going to affect their future lives.

The Solution

This budgeting app aims to help millennials take control of their finances by providing an all-in-one platform to track spending, set budgets and get advice on spending and saving habits.


User Research

To guide design decisions for the product, I wanted to understand who I was designing for and what their needs and behaviors are. Due to the time constraint, I used existing research to help discover who the target user would be. In my research, I found that millennials would be a primary user for this type of product. Current challenges are:

  • Low financial literacy

Almost half of millennials are concerned they have too much debt, and although they are saving earlier, they admit to not saving enough

  • Lack of financial security

Millennials are saving earlier, but admit to not saving enough. Financial security is valued, and two-thirds have established a monthly budget they try to follow. Over a third use a digital budgeting system.

Competitive Research 

To understand what resources are currently available to people looking to take control of their financial lives, I did a competitive analysis of other digital products that are available to consumers, looking specifically at what they did well and what users’ feedback on the experience was.

Screen Shot 2015-04-06 at 1.43.14 PM Mint offers a consistent experience across devices and uses data visualizations that make understanding your finances easier. They offer tips based on your spending and saving behavior and guide users through the system in an intuitive way.

Screen Shot 2015-04-06 at 1.43.21 PMWith Pocket Expense, users’ accounts aren’t automatically added. The user has to manually set up budgets are there are no defaults or guidance for users who may be setting up a budget for the first time. Calendar feature provides a good overview, but can be hard to interpret.

Screen Shot 2015-04-06 at 1.46.41 PMMvelopes offers a good on-boarding process that addresses customers’ goals/concerns, but has an inconsistent experience across devices. Website feels outdated with a cluttered interface. There are no reminders of privacy when adding bank/credit card accounts.

Exploring the Problem

To better understand how this product could be used I started by brainstorming with an affinity map, then started sketching user journeys and writing scenarios.

Screen Shot 2015-04-06 at 1.48.31 PM

Example Scenario

James, a recent graduate of NYU working in journalism, recently downloaded the app. He has already linked his savings account and credit cards to the app. He sees his spending habits are a bit sporadic, and wants to start managing his money more responsibly. He gets a notification that he can create a budget on the app and decides to see how the app can help him. 

User Flow

Screen Shot 2015-04-06 at 2.59.21 PM

Initial Sketches

Screen Shot 2015-04-06 at 2.59.34 PM

Low-Fidelity WireframesScreen Shot 2015-04-06 at 1.50.31 PM Screen Shot 2015-04-06 at 1.50.40 PM

Final Key Screens

Screen Shot 2015-04-06 at 1.50.47 PM

Apple Watch Integration 

Example Scenario

James now has his budget in place, and is grocery shopping. He usually orders from Seamless, but wants to start cutting back on his take-out budget and is at Fairway getting some fresh produce for the week. He gets a notification on his Apple Watch reminding him of how much money he has left in his monthly grocery budget.

Screen Shot 2015-04-06 at 1.50.55 PM Screen Shot 2015-04-06 at 1.51.01 PM

In the 8-hour timeframe of the project, of course there wasn’t time to explore the entire scope of what a product like this could look like, but these are a few areas I think would be good next steps in the designs.

  • Explore Debt Visualization

A concern of many, debt can be overwhelming. I’d like to explore how to help the user create a plan of how to save enough to get out of debt and visualize where they are and where they could be.

  • Incorporate savings goals

For this challenge I focused on the budgeting aspect. I’d like to add a feature that allows users to create and track savings goals that are linked to their accounts.

  • Other Platforms

I chose to design for mobile iOS because it is commonly used by the primary demographic and for on-the-go access. I’d like to work on a desktop site and android version next.

5 User Testing Best Practises

1. Keep Your User Comfy

Introduce yourself and the task. Keep the user comfortable so they are at ease sharing their experience. Remind them that they aren’t the ones being tested, that they are doing the testing.

2. Give Context

Start with a scenario to give the user context for when and where they would be using the product.

3. Encourage Your User to Think Out Loud

Ask them to verbalize everything. You’re not getting any insights in a user testing session from someone thinking to their self, “Where is that button?”. Ask questions to draw them out. i.e.,”Can you tell me what you expect to see/do/etc?”

4. Don’t Lead the User

Walking someone step-by-step through your UI isn’t going to give you any information on where the pain points are. Make sure your questions don’t answer themselves. Also, when your user thinks they are done with a task, they are done. Not completing the task is also a finding!

5. Eliminate Variables 

Repeat the task verbatim. Don’t distract your user with emotions that could influence their actions, making yourself a variable.