View Prototype

Mobile App Case study: Kaleidoscope

  • The Problem

    People belonging to marginalized identity groups have to go out of their way to plan for safety when traveling. How can we make this research data more accessible so that users feel safe and supported during their travels?

  • The Solution

    Kaleidoscope is a rank and review based app that rates destinations on how welcoming they are towards LGBTQ+ and BIPOC folks. Users can share their experiences, see reviews from other community members, and plan their next trip all in one place.

  • My role

    Researcher, UX/UI Designer

    Individual Project

    Tools: Miro, Zoom, Figma, Invision

    Timeline: 4 Weeks

 Research

I began by developing an interview script based on the way users were currently planning their travels and what influenced their decision making process. My core research questions were:

  • What makes people feel unsafe during travel experiences?

  • Is it easy to research travel and safety concerns?

  • Do people feel adequately prepared with their current planning process?

I completed 6 interviews, choosing participants belonging to identity groups who could most benefit from a safety focused travel app. I then created an affinity diagram based on the interview responses and found the following missed opportunities:

Homework Boards.jpg

Once I landed on these key findings, I was able to synthesize an empathy map and user persona to understand my target users.

Diedre-Spivey.png

This is the problem my users are facing:

 Travel for those in LGBTQ+ and BIPOC communities can be fraught with discrimination and violence. Therefore, they need to research the politics and cultural attitudes of their potential travel destinations. How might we make this type of research data more accessible so that marginalized identity groups can feel safe and supported when they travel?

 Definition & Ideation

I brainstormed solutions to this problem using the “I like, I wish, what if” method, then placed my ideas into a feature prioritization matrix.

prioritization matrix 1.png

 I conducted a SWOT analysis of 3 direct competitors and 2 indirect competitors.

  • Yelp

  • TripAdvisor

  • The International LGBTQ+ Travel Association

  • Out Traveler

  • Google Maps

Yelp, TripAdvisor, and Google Maps all share nearly identical rating & review systems. TripAdvisor however combines those search & review features with custom mapping and more active travel planning. IGLTA.org has a wealth of research related to LGBTQ+ specific travel. Our app would aim to combine the usability of TripAdvisor with the data of an organization like IGLTA so that our users can plan and research all in one place.

Based on my feature matrix and competitor analysis, I developed this value proposition:

 Kaleidoscope is developing an evolving database to help LGBTQ+ and BIPOC individuals to solve the scarcity of reliable information about whether businesses and other places to visit are welcoming and supportive of diverse identities.

We offer a unique filtering system that lets users search for the safety rating of a place on the basis of race, sexuality, or gender.

In addition to verifiable data provided by our researchers, our dedicated user base ranks and reviews destinations based on their own experiences.

 I imagined a scenario in which my persona might utilize an app like Kaleidoscope via storyboard.

02.3-02-01-Storyboard.png

Prototyping

I sketched out user flows for onboarding and a custom search feature, then developed the flows into a low-fidelity prototype.

1-Splash Screen.png
2-sign up method.png
3-existing cust. sign in.png
4-email sign up.png
5-username.png
6-set location.png
7-profile picture.png
8-successful onboard.png
9-home screen.png
10-search pop up.png
11-custom search.png
12-search sexual orientation.png
13-search race.png
14-search gender.png
15-search results.png
16-item profile.png

 Testing

My main testing goals were to determine whether the flows and navigation I created felt natural to the user. Testing results told me that I had several navigation bugs to fix and that I needed to better identify the home screen. Users were getting confused during the transition from account creation to actually using the app features.

I iterated on my prototype by adding extra screens indicating onboarding success and tutorial tool tips before taking the user to the homepage. Once I was satisfied with the flows and had double checked my connections, I added visual style to bring my ideas into hi-fidelity.

2-sign up method.png
1-Splash Screen.png
3-existing cust. sign in.png
4-email sign up.png
5-username.png
6-location services.png
7-set location.png
8-profile picture.png
9-browse files.png
10-successful onboard.png
11-coaching screens.png
12-coaching screen 2.png
13-coaching screen 3.png
14-coaching screen 4.png
15-coaching screen 5.png
16-home screen.png
17-search pop up.png
18-custom search.png
19-search sexual orientation.png
20-search gender.png
21-search race.png
22-summary.png
23-search results.png
24-item profile.png

The most challenging part of this project was developing the final prototype; deciding on visual style and UI components, then applying those designs. My next step in development would be to go back to the research stage and conduct more user interviews. My interview participants were not as racially diverse as my target user segment would be, so I would want to hear from as many different identities as possible to pinpoint any other needs my prototype doesn’t address.