ALEX ESCUDERO
Back to portfolio



TANGODesigning for safety
on public transit

At Stanford, I designed a mobile app from end to end with a team of two developers and another designer for a quarter-long class project. 

Our task was to unearth a problem within the health and wellness space, then iteratively prototype a solution. Each step of our process was grounded in qualitative research and testing. The result: Tango, a platform to address harassment on public transit by matching users with riding buddies whenever they need.


USER RESEARCH

11 Interviews, 2 Rounds, 1 Hidden Gem


To kick off, we interviewed 9 twenty-somethings with a range of behaviors around habit tracking and fitness. Safety also fell into our purview, but was not our main focus initially. We discovered contradictions, needs and insights, and created an empathy map, but none of it compelled us (or our TA).







We conducted two more interviews and broadened our age demographic, which resulted in no usable insights.

So, we returned to the drawing board. When our focus shifted to the safety-related stories we overlooked at first, we identified a significant need and moved it forward through a POV statement.





IDEATIONThe insight captured in our POV statement led to HMW statements that drove our brainstorming. We settled on three solutions that approached the problem of public transit safety in different ways.







VALIDATIONTo test each solution without building it, we ran experience prototypes. Each prototype validated the concept behind it, but the prototype I happened to design performed the best.

Thus, we moved forward with the concept of pairing users with similar routes.




At that time, I lived in Boston with BU students, which made this prototype possible. Reflecting back, I would have chosen a different means of validating the idea that did not deceive users.

CONCEPT VIDEO

It Takes Two To Tango


This concept video helped us solidify our concept before creating prototypes. By breaking our concept down into tasks at this stage, we created structure for the rest of our design process.

Initial user tasks:
  1. Find a buddy
  2. Play game with buddy
  3. Rate travel experience



Lo-fi Prototyping & Testing

Something To ‘Marvel’ At
Our UX design process began with “paper” prototypes, which allowed us to cheaply and remotely start testing ideas. COVID-19 required us to find workarounds to in-person testing. Our goal: identify bugs in our user interface early on and expose key areas for improvement.









Testing Method



We recruited 3 participants within our networks based on representativeness of our target users: college students living in various major cities and who frequently make use of public transportation.

Marvel allowed us to build a clickable prototype using our sketches. Test participants opened a link to our Marvel prototype while on a zoom call, then shared their screens. In this way, we tracked where they clicked and mis-clicked on our app prototype.


Roles

  1. Computer: Marvel let users step through the prototype
  2. Greeter/Facilitator: Gave brief overview and prompted user to express thoughts throughout process
  3. Observer/Riding Buddy: Took notes and acted as the riding buddy

Steps

  1. User screen shares on Zoom their process of stepping through the app in Marvel
  2. Present different real life scenarios to user to gauge reactions
  3. Ask user to verbalize thoughts and confusions
  4. Debriefing questions about overall experience



Results


Our participants got through the simple tasks of matching and rating with ease, but also revealed gaps in the overall user experience.
Positive Feedback
All three users liked having a visual of where there buddy was and getting to track their route, and two users expressed that they like the information displayed about the buddies they matched with, and they particularly liked getting to see their buddies rating on the app.
Areas for improvement
All three users commented that the flow for the gaming task was confusing and they had a hard time understanding what they were supposed to be doing at each step. However, one user was very enthusiastic about game and commented that he liked that it was simple enough for two people to easily play.

Two users explored the help button after we asked them what they would do in case of an emergency. One user said that she saw no use for the help button and would just leave the train. Another user commented that it was not clear that the help button was for emergencies and that it did contain substantial safety resources.

Finally, two users expressed concern that it may be difficult to locate their buddy in a train station without having any means of communication.


Findings & UI Adjustments




Iteration & Heuristic Evaluation

Designing Based On Feedback
Given the insights derived from user testing, we first updated our tasks themselves, addressing our design’s weaknesses. We made tweaks to the interface across the entire user experience as well that reflected the feedback we got on specific elements of our lo-fi prototype.






After planning our fixes, my team handed off to me to start designing our medium-fidelity prototype in Figma. From this point onward, I was solely responsible for visual and interaction design.

Our goal for this iteration: approximate the look, interactions and overall user experience of our final by designing key interface screens.

A round of heuristic evaluation helped align our UI design with best practices. From there, I continued on in Figma by implementing feedback from the evaluation, then designed different states for each screen, resulting in a final prototype in Figma that my teammates referenced in building the final, hard-coded prototype.






High-Fidelity UI Design

Shots, Shots, Shots
Matching with a Travel Buddy



Locate and chat with your Travel Buddy



20 Questions game during ride


Review Travel Buddy at end of trip



Final Project Expo

A Sweeping Victory

At the end of the quarter, there was a final project expo where all teams presented and were scored by a panel of judges. To prepare, I created a one-pager, landing page, and an elevator pitch while my teammates created a demo video of our hardcoded prototype.

We won numerous awards out of 50 teams:
  • Best Overall Concept
  • Best UI Design
  • Best Landing Page
  • Best Elevator Pitch










Reflection



Throughout this process, there were hiccups that served as valuable lessons for real-world projects down the line. It was my first time being responsible for visual design of a new product and working with developers.

Since the project was set up for us to practice design techniques in a vacuum, we did not have to consider business-related factors in our process. Our concept was fundamentally validated through structured research, and our experience prototype hinted at potential product-market fit. However, it was out of the project scope to consider revenue models or a go-to-market strategy.

To move the product forward, I would start by reframing the problem, which would likely result in a different solution. Perhaps Tango is a dating app and less geared toward safety. Then, I would lay out our assumptions and poke holes while consulting with experts to mitigate unexpected consequences. The product may be well-designed, but it needs to solve the right problem, solve it well, and have a viable business model.




Available for work
I’m currently based in San Francisco and open to full time roles and consulting.

Connect via Linkedin