Citysocial
Product Design / Prototyping
WinkFoods
UI / Interaction
Go Bambino
Competitive Research / Quantitative Usability Research / Prototyping / UI
Note: Much of the project work that I’ve completed is protected by NDAs or not openly available on the web. This is one of those projects. Designs have been altered to hide identifying information.
Project Overview
Product Goals:
Entice and reward the Austin happy-hour customer for repeat behavior- like buying drinks, bringing friends, and coming back! Make happsy hour even more fun and even more social.
Stakeholder Goals:
With a considerate focus on scalability, the stakeholder aims to roll out a city-specific product within 4 months before expanding product offerings and cities.
Development Constraints:
The developer has experience working with the bootstrap framework.
Getting Started: Feature-itis
Feature Prioritization Matrix
I worked with the development team remotely to make a feature prioritization matrix for a first iteration.
This enabled us to focus in on feasibility so that we could test early and often.
Stakeholder and Designer Alignment Sessions
I lead remote alignment discussions using Realtimeboard to ensure that user-centric design decisions were communicated to the stakeholder/developer.
We worked together to ideate on personas and user journeys in order to better understand the realistic use-cases of our product. These tools worked well to foster team-wide empathy for the Austin Social user.
Designing for two users
We established during these alignment sessions that we have two primary users, the happy-hour socialite who is wondering if the product is going to give them enough perks and the bartender/server who is being asked to test out whether or not the app is worth it for the business (but isn’t as invested themselves).
With these two users in mind, I have to design a transaction with both minimal effort and maximum reward for both parties.
I kept the following user centric questions at the forefront of my mind while designing:
How do I change Arielle’s, the happy hour socialite, habits and keep her engaged
How do I ensure that Devon, the bartender, doesn’t dislike his experience and talk down the app
Responsive and Scalable Design Patterns
Establishing design elements with the bootstrap framework
Using bootstrap
Fewer Cross browser bugs.
A consistent framework that supports major of all browsers and CSS compatibility fixes.
Lightweight and customizable.
Using 5 Established Breakpoints and 9 Responsive Mix-ins for Scalable, Optimum Flexibility
designing mid-fidelity cards
Using mid-fidelity cards allowed me to put together the puzzle pieces for a responsive and thoughtful design
Focusing on mobile
Designing for both the searching experience and the dynamic in-bar POS experience.
Moving Forward
User testing plan
Product Roadmap
Site Map
Accessibility Notes
Mobile gestures and micro-interactions
Design for wait times
Error handling messages
Completed actions notifications
Finish up final layout after iterations
Define image and Icon usage
Expand on type and color hierarchy
Craft Micro-copy
Define and design micro-interactions
Define and design transitions
Create a kpi document
Test, learn, design, repeat.
UX Methodologies
Existing Solution
Go Bambino distinguishes itself from competitors with its non-subscription-based business model and the implicit promise of a hands-off advertisement platform.
The problem space:
The GoBambino iOS app connects Activity Providers who have extra space in their classes with parents who are looking for kid-friendly activities.
In order to get bookings, activity providers should input all of their classes and those class schedules into the GoBambino website.
Because of usability issues and problems with abandonment, the founders and their team are inputting the schedules and class information for the activity providers.
This is not scalable and is frustrating for the GoBambino team.
How did we help?
By the end of two weeks, we:
Increased average usability ratings from 1's to 5's.
Decreased time spent on-boarding by over ten minutes.
Added implicit and explicit value propositions to the platform
Improved feelings of independence and completion rates
Gathering information
We chose to conduct stakeholder interviews, a parent survey, activity provider interviews, contextual inquiry in activity-provider environments, competitive analysis, heuristic analysis and SME interviews before performing usability tests, in order to become experts in the space ourselves and stay true to our philosophies in UX design.
Dana Serikov, CoFounder and CEO
Stakeholder Goals & Observations
“Providers have gotten tired in the process, they have 20 classes but stop listing after 1 class.”
“We have 50 or so partners. Only 4 or 5 did it themselves. (2 or 3 were so bad I would have rather on-boarded them myself!)”
— Dana, GoBambino CEO
Activity Provider Interviews
Activity Provider Interview Insights
Time is the biggest constraint for Activity Providers. They are often running the business by themselves.
Activity Providers are motivated by serving their community.
Activity Providers use Facebook and mommy groups to promote their classes
Parents
Their primary goals are to activate new interests and expose their children to a broad range of activities.
77% of parents surveyed get activity ideas primarily via word of mouth.
Activity Providers
Most activity providers lack a consolidated online presence
Constrained by time and money
Contextual Inquiry Results
1 Kid’s Yoga Studio — Karma Kids Yoga
1 Kid’s Karate Studio — World Seido Karate
6 Failed Attempts
We were only able to reach 2 out of 8 attempted APs in person, revealing that the AP landscape is extremely gated. Our rejections were due to these vendors not having a brick & mortar location (conduct business in a rented, public or shared space), atypical business hours and small staff.
Close Competition
From our research, we discovered that most activity providers are non-loyal members of Kidpass, HiSaywer, Groupon, etc. They will try any platform that is available to market themselves but have not found a catch-all solution for their varied business requirements.
Pre Research Assumption:
If we make onboarding easier, then the vendors will do it themselves.
Post-Research Assumption
The vendors are going to need implicit and explicit incentivizing to fully onboard themselves.
Existing Platform Usability Tests
Redesigning the class input "Wizard" was crucial to fixing major usability and abandonment issues. We knew there were problems with the wizard, but wanted to conduct usability tests to abandon all assumptions and let the users speak.
Existing Platform Usability Test Summary
Task 1: Post a drop-in music class
TASK: You would like to post an individual sing-a-long class for kids ages 4-6 that has 10 remaining spots out of 20 total spots. The class is scheduled for next Saturday at May 19th at 9 AM-11AM and costs $40. Create an account on GOBambino under your company name NAME@TEST.COM, pw: test. Create an individual drop-in class listing.
Drop-in listings
took too long to complete and were extremely frustrating to users. Drop-in listings are the most common type of listings on GB.
Observations & Insights
- Users did not feel guided through the process; often, terminology and copy merely confused them
- Users often had to backtrack, having first done something incorrectly.
- Users did not see positive visual cues, and negative cues were often simply glitches.
- 2 users questioned how the posting would look to parents; they wished they could preview and were dissapointed to not see that feature.
Drop-in schedule form
How can we help?
Provide clarifying copy and use visual cues that users are accustomed to
Build preview page
Build visual confirmation to keep the user assured
Use auto-population when possible
API for verified addresses
Task 2: Post a semester music workshop
TASK: Now that your account is all set up you would like to post your summer semester music workshop for ages 8-10 that will start on June 4th and continue till August 1st. The days of the class are Monday and Wednesday afternoons from 2-4PM. There are 10 remaining spots out of 20 and the class costs $800. Complete a workshop listing with this class information.
Semester listings
Had the most issues. Users were extremely frustrated.
Observations & Insights
- Users assumed the Semester listing would be the easiest but ended up ranking it the lowest of all tasks and desired to abandon the task.
- The primary expectation was for dates to be auto-populated. Instead, users were expected to have this information on hand." I have to do MATH?"
- The users who completed it incorrectly were still allowed to proceed.
Semester Schedule Form
How can we help?
Break up the process to keep users motivated, provide steps.
Provide copy to make the process seem assisted. Test if this helps abandonment.
Allow users to save their progress.
Task 3: Post a Christmas break music camp
TASK: Now you would like to post your Christmas Break Music Camp for ages 5-7 that will start on December 17th to December 24th from 10AM to 2PM with a half day on Wednesday, December 19th from 10AM to NOON. There are 10 remaining spots out of 20 and the class costs $400. Complete a camp listing with this class information.
Camp listings
Took less time to complete, but users were mostly just excited to be done with their tasks.
Observations & Insights
- users were so frustrated at this point that the primary insight is that the users would never get to this point in the first place.
Camp Schedule Form
How can we help?
In further testing, test user's reactions and rankings to "Would you come back to this site?"
Examine value proposition for GoBambino and ensure that first-time users see that value immediately.
Provide help-chat integration and FAQ.
Allow users to easily duplicate and create templates to save.
Existing Platform Usability Summary
Activity Provider On-boarding Task Flow
The existing website presents activity provider with the prospect of an efficient process; however, the reality is that the activity providers must stick through too many screens, tasks, and actions to finish just one listing, let alone every listing that they would want to post on the platform.
Expected vs Surprising Elements
Expected Elements
First-time users responded neutrally to some elements on GoBambino's site.
Unexpected Elements
First-time users responded negatively to perhaps the most crucial forms in the on-boarding process, filling out the class schedules. These schedules allow parents to book the classes.
In summary, usability testing of the current site was especially enlightening due to crystal-clear scenarios and tasks. The users really embodied the role of an activity provider which allowed us to contrast their expectations with the reality of below-average usability.
Distilling Insights
In order to dive deeper into how we could better serve activity providers, we took a step back as a team and used UX methodology to objectify our research into visual cues that helped us remain grounded in the user.
Activity providers face two glaring issues on GB: Abandonment and Value Questioning
Once we fix usability issues, the AP's will still have to persevere through the rest of the journey, questioning the platforms value.
Our Persona: Luisa
After spending a couple months researching and feeling dissatisfied with the Mommy & Me music classes offered in her neighborhood, Luisa decided to create a music class of her own called Music Maestros. Over the past several months, this passion project, which started off as a casual get together with some of her friends, has grown into a small business of its own, with 3 classes offered on Saturday, a rented rehearsal space, and regular students.
frustrations
Unsure which activity app will be worth her time investment and fees
Maintaining her class events on Facebook is time-consuming
needs
A quick class listing process
An easy to learn class management dashboard
A way to save and resume the process of listing classes
Luisa's Problem Statement
Because Activity Providers don't have extra time or resources, on-boarding new platforms is best when the process is invisible (someone else does it for them) and if additional value is provided (white label integration).
Luisa rarely has extra time or resources to advertise her classes and manage her bookings. Because of this, she is especially sensitive to even the most micro usability issues. However, she has not been offered a catch-all solution in this marketplace and thus continues to test different platforms.
How might we streamline GoBambino’s onboarding and listing process so that Luisa can see real benefit from GoBambino’s customers and booking services?
How can we Serve Luisa?
A simple dashboard with relevant information and clear calls to action
An intuitive and QUICK activity listing process
A way to save incomplete listings and resume when needed
A way to access guidance or support in a way that feels natural and still allows for independence.
Providing Luisa with explicit and implicit value encouraging return to the platform
Iterating and Testing Designs
In order to evaluate the impact of any changes, we let the users guide our choices and continually checked in with the stakeholder.
Prioritized Features and Changes
We conducted 3 rounds of design studio as a team. 1. How do we create implicit and explicit value? 2. How do we streamline the on-boarding process and 3. how do we make on-boarding easier for GOBAMBINO?
During testing we aimed to evaluate:
clarity of copy and terminology by TIMING
learnability and user confidence by LISTENING
ease and intuitiveness of flow by RANKING
Paper Prototype Overview
Paper Prototyping allowed us to test users' reactions to copy changes and actively listen to their assumptions about autofilling, auto-populating, and saving information.
We continually asked them, "what do you think would happen?" which allowed them to guide our iterations moving forward. We primarily tested copy changes and clarity of information during this iteration; they reacted more positively to this copy, but still hesitated.
Detailed Midfi Annotations
During our iterations, we designed and tested:
Imperative commands and conversational instructions to guide the user
A progress bar to orient time sensitive users
Form segmentation to break up the process and to allow for autopopulation
Clickable and keyboard-accessible input fields to account of different user types
Familiar elements and responsive fields
Organizational tabs on the dashboard
Personalization on the dashboard
Saving and Archiving
Hifi Clickable Prototype
Final Iteration for GoBambino
Roadmap to Added Value
In consideration of GoBambino's time and resources, we built a roadmap of the most crucial value additions as well as an informed estimate of how much time it would take.
In the end... my team worked hands-on with the stakeholder to rethink and redesign her activity provider experience from start to finish. We stayed grounded in user empathy and research and provided GoBambino with actionable insights that they could roll out in their own realistic time frame.
Winkel’s Goal
The health conscious, busy millennial needs convenient access to reliably high quality locally-farmed produce.
Framing the space
Users have many options to easily and conveniently order dry foods and staples. But fresh produce still seems to require that old school, hands-on approach in order to ensure quality. According to my research, users’ produce buying routines usually include out-of-the-house trips to inspect and choose their produce.
Changing expectations
With automation ramping up and consumer expectations steadily (albeit slowly) shifting, consumers are beginning to question the need to disrupt their day with this out of the house, hands-on process.
However, they currently do not wholeheartedly trust any current options to provide the quality that personal visual inspection ensures.
Getting to know the competition
Focus on providing competitive convenience, ease and value without sacrificing the feeling of assurance of hands-on selectivity.
Product Opportunities and Ideation Points
Value focus- Automatically and visually discouraging add-ons should both lesson the UX load on users and reiterate the value of the product and brand.
Control of Delivery- Users will have an encouraged yet effortless ability to select what they will and won’t get through a familiar process: swiping.
Quality control- Quality through personalization, selection and assurances (in warm and friendly copy) to emotionally mimic the hands-on produce selection process.
Encourage Regularity- Presenting a natural CTA for people to automate this process should provide a data point for indicating trust and building a user base.
Foster pride in being ethically conscious- Gamifying ethics-based challenges down the road can provide feelings of investment and reward in this new process.
Foster feelings of connectedness to source- Ability to get up-to-date news and special stories. Ethics section. Educating articles. Chatbot for conversing with farmers and answering questions. High quality pictures, preferably with people in them as well.
Design Process
After starting with paper sketches and a Marvel paper prototype, I used user testing results to improve the information architecture of the product and build around existing design patterns.
Architecture Developments between Iterations
For the midfi wireframes and invision prototype, I wanted to test user assumptions and basic understanding of the product. I focused on usability and emotional response. I primarily wanted to 1. Observe if the “feed” has a clear perceived purpose and if users respond well to the idea. and 2. Determine if the recipe to basket flow is intuitive enough to proceed with for the next iteration.
Midfi Wireframes
Evaluation Tasks / Scenarios
Complete on-boarding experience
Search recommendations for thyme recipes
Choose a lasagna meal and add lasagna ingredients to basket
Choose a different ingredient for the basket than what is offered
Complete Checkout process
These tasks represented the goal to choose a curated recipe from an inspiring selection, make changes that feel appropriate and personal, all while feeling like you are shopping smarter.
Hifi Wireframes
Building Retention with On-boarding Friction
This app’s core value proposition directly challenges years of familiar routines. In order to build stickiness and investment during the on-boarding process, I wanted to focus on
1. Creating micro-investments for loss aversion
2. Naturally building a deep understanding of product value
3. Creating the opportunity for a first-glance at the algorithmic and personalized feed
The users’ first interaction is crucial to not only their understanding of the app and its value but also their retention and follow-thru rates. In order to maximize our chances, I built a thoughtful and interactive on-boarding process (albiet friction).
Looking back: What I would have done differently
Because of the sprint nature of this assignment, I made some mistakes along the way in order to produce a deliverable!
Treat feature-itis early on with a feature prioritization session with a developer
Address affordance issues found in usability
A/B Test Meal Planner process
WeBeatz
A research project rooted in music therapy and user interviews
Research & Insights
I interviewed 8 people of varying degrees of fluency in music, allowing for the more extreme edge cases (of expert musicians to a self-proclaimed music hater) to inform my research moving forward.
Musicians- amateur and expert alike- feel guilt for not practicing or having practiced more.
(Its really difficult to find time to exercise an interest in playing music, even if you are already a practiced musician!)
People feel disappointed in themselves if they are (inevitably) not as good as they want to be in expressing themselves; musical expression is often an underlying motivation.
(Why can I not play "phantom of the opera" on the banjo RIGHT NOW?)
Collaborative moments inspire and motivate experts
(Hypothesis: Do collaborative moments inspire newbies?)
People often fall back on easier expressions of music than actually playing an instrument:
(Karaoke, "Nerding Out" on an album, sounding out beats on a phone, having music stuck in their head, looking for youtube inspiration, spending hours searching for a new "song.")
Applying Music Therapy
An edge case informed the design moving forward: a music therapist I interviewed explained that she often leaned on teaching basic tapping and rhythm to some of her handicapped patients. She explained that experiencing even basic rhythm or participating/contributing to it was satisfying and part of what made music different from other artforms.
Looking into music therapy more, I discovered the following:
Although neurobiological mechanisms during active musical experiences have not been studied in depth until recently, some trends are beginning to emerge. Singing is capable of activating portions of the PFC associated with self-referential processing and emotional cognition ( Jeffries et al., 2003 ). Similarly, musical improvisation can activate PFC areas involved in self-reflection, particularly when the improvisation occurs within a familiar musical structure ( Limb & Braun, 2008 ; Liu et al., 2012 ). Neural responses during active music-making may also depend on musical complexity, level of music training, and creativity of the music-maker
I would never have thought to mark an interest in just the most basic of rhythms or beats as a notable behavior. I remembered that another user specifically mentioned that he really had no “ear” for music, but was able to express himself very well through drums. When he didn’t have access to drums, he could tap beats on his phone, electronically.
Constraints in Music Learning
The constraints in this space of music-learning are obvious and somewhat impenetrable; You need a space to practice, time to practice, something to practice, and occasionally, someone to practice with or teach you.
With this in mind, I pivoted to enabling people to express themselves musically without having to learn an instrument.
Problem Statement & Persona
What started out as “I should make it easier for people to learn music!!!” Actually turned into: I should make it easier for people to play music without fluency in music. I didn’t want to contribute to even more thematic guilt about “not being able to practice more.”
Music is special. People say wish they could play, but simply don’t have the time or willpower to make that happen.
The average music-lover needs a way to express herself musically without having to take the time to be an expert in an instrument.
Robbie
The guy working, walking, and living in his headphones.
Robbie has a guitar, but it stays on his wall as art most of the time. He loves music, and often spends hours jamming out, but he never has found a satisfying outlet to really express himself musically.
Defining Features
Moving forward, I wanted to define features directly based from insights and test those features in a paper prototype that really exercised my users' creative sides.
Goals
1. Provoke feelings of creativity and personal expression with choices and actions
2. Allow users to create a finished product quickly (avoiding guilt, encouraging reward)
3. Integrate a social element of collaboration
UX Tools
In such complicated and expansive e-commerce sites such as Target.com, it is not surprising that users will encounter Information Architecture issues.
It becomes especially important, though, when the successes of the in-store target experience that shoppers have come to associate with the target brand are neither seen nor felt by online shoppers.
Our Approach
I worked with a team to conduct the research necessary to thoughtfully reconsider Target’s online presence. Our results led us to strive to organically mimic the in-store experience.
We started by conducting online and in-store contextual inquiry to observe users' shopping behaviors and seek to understand their motivations when shopping at Target. Doing so allowed us to identify pain points and clashes in expectation and reality that is ultimately detrimental to Target's online business.
The visual target racetrack is not only familiar to regular customers, but encourages a logical flow through the store that users find easy to trust. The racetrack eases the fear/stress of forgetting items, and nudges items that the shopper would be interested in with minimal effort from the shopper herself.
My teammate, Mary, speaking to a customer in a Manhattan target.
We tested 4 users for in-store contextual inquiry; they are frequent shoppers of In-store Target. They range from 26-63 years of age and are all female, as the majority of Target shoppers are female.
The 4 in-store shoppers had certain common behaviors:
1. Buying different items than they had planned (but being happy about it!)
2. Price comparing both within the store and on their phones
3. Planning on browsing sale sections
4. Getting excited about special purchases
5. Preferring familiarity that they have with their favorite Target
Luckily for the shoppers, the Target in-store experience coordinates well with these behaviors.
During in-store contextual inquiry, we found that shoppers often approach Target stores with a list, but leave with more (or even completely different) items than they had planned.
“Amys” List:
Dark Chocolate
Mixed Spring Greens
K-Cups
Bananas
Pita
Celery Sticks
"Amy's" Actual Purchases
Stacy’s Pita Chips $2.50
Pop Chips $2.50
Chips Ahoy Cookies $2.50
Wheat Thins Cookies $2.50
Peanuts $4.49
Half & Half $3.49
Packaged Carrots $1.89
Mushroom $1.69
Starbuck K-Cup $11.39
Banana (4) $1.00
Pork Chop Meat $4.99
Halo Ice Cream $4.59
Toothbrush $3.32
Up Wipes $1.89
Pet Armour Plus $34.49
Wet Dog Food 1 $4.00
Wet Dog Food 2 $4.00
Mug $5.99
UP Wipes $1.89
Amy's transaction receipt totaled at $101.98. But here's the key: she was not just okay with it, but frankly happy with her purchases.
Distilling insights from both online and offline usability tests and contextual inquiry yeilded interesting results.
Directly from users grounded insights, I built JJ the power dad.
How do we balance JJ's expectations and plans when online shopping (to be economical and smart) with what ACTUALLY makes him happiest about shopping at target in-store (browsing around.)
JJ's issues with Target.com
While the user must choose categories that they weren't necessarily expecting, the rest of the screen is faded, leaving little room for visual inspiration comparable to the racetrack.
Based upon insights from online usability tests, I devised 4 scenarios that would be likely for JJ in shopping at target.com
1. JJ uses the current Target “categories” dropdown to whittle his way down to a desired item or department. Maybe he ends up spending more time on the website browsing through other interesting items. More likely? He doesn't.
HOW DID I DESIGN > Hoverable categories with visual hierarchy leading shoppers towards “all household essentials" versus specific items. Also, the list ends here; no more 4–5 clicks to get to your desired item. JJ is nudged to a visually appealing page and THEN continues searching for your desired item while looking at other items that might prompt him to remember.
2. JJ searches directly by product name, but ends up buying something that he didn’t intend, yet is happy about.
HOW DID I DESIGN > JJ can search directly by name BUT still see other items that might fit your needs a little bit better.
3. JJ searches by category name and might be prompted to see related items that he might also need.
HOW DID I DESIGN > Searching “laundry detergent” and seeing other related items (through the “also consider” top section.)
4. Doing any of 1–3…and actually buying what you had intended.
HOW DID I DESIGN > Oh, maybe I should also get ____.
The end result? Clickable hifi prototypes that allow users to shop how they want to shop, and end up getting gently nudged towards buying relevant items that they would see in the store.
Users responded really well in hi-fi prototypes. They seemed comfortable with idly browsing at the other visual goodies on the page and even appreciated the reminders.
Some users (tasked with buying laundry pods) asked me, “Do I have to buy Tide?” Two users in particular mentioned that they needed to buy things at the store next time they went. I took this as a wonderful sign that my nudges worked.
