Safely Case Study
Add paragraph text. Click “Edit Text” to update the font, size and more. To change and reuse text themes, go to Site Styles.
Role: Lead Product Designer
Tools: Adobe Creative Cloud, Figma, Procreate
Timeline: 2 months
UX & UI Design
Logo Design
Usability Testing
Prototyping
Product Design
.png)
Overview
Task: A major project in the XA interaction design course was to create an interactive platform that advances a social impact of our choice. This project's purpose was to "design an interface that aims to act as protection, enhancement, or a tool to serve a community, improve social behavior, or overcome challenges in a community."
The intended broad outline for this two-month design project allowed us to think innovatively as students and further develop our design and technical skills that could replicate a similar challenge we would encounter as professionals in the UX industry.
Main Objective: This project aimed to develop an idea that improves a community's environment and creates an application that improves users' lives in various ways.
The project deliverables consisted of collecting research and interview data, synthesizing the data using affinity mapping and competitive analyses, and then generating a user-need statement and interactive task flow. Ultimately, the user data guided our wireframing stages, which also developed our final design system and prototype.
Challenge
In the initial brainstorming session, our team had a strong interest in creating an application that would challenge the assumptions and functions of a traditional travel service platform. To learn more about how we could improve our initial ideas, we conducted interview questions and gathered information from our peers to create an initial task flow and provide core objectives for the app.
Process
Step #1: Collect & Analyze User Research
A list of interview questions was drafted to help create a more user-centered problem statement and establish the key functions of the application:
-
How often do you travel?
-
When traveling, which parts do you often look forward to?
-
Do you rely on any accommodations while traveling?
-
When traveling, which aspects of the trip do you plan?
-
Have you faced any barriers while traveling in the past?
The interview results improved our task flow and overall concentration on the app's objectives. Continuing our research, we used UX methodologies like affinity mapping, competitive analysis,
and constant experimentation on our mid-fi and high-fi wireframes to improve user-task flow.
Step #2: Developing Project Goals
After conducting extensive user research and interviews, we identified key pain points and needs that helped shape our problem and user-needs statement. This stage was imperative to ensure our final design plan was grounded in resolving challenges the user had experienced, rather than assuming what the user wanted or needed. Below are our main focus points:
Focus on Travel Organization
Prioritize planning for transportation, housing, and activities.
Stress-Free Features
Provide reliable recommendations, reviews, and critical information on accessibility plans.
User-Friendly Functionality
Streamline planning and peace of mind, and reduce the stress often associated with travel.
PROBLEM STATEMENT:
1. While traveling, people who belong to marginalized groups face the risk of harassment or discrimination that can put their safety at risk.
2. This makes travel difficult because it is hard to determine what activities and establishments are safe in an unfamiliar area.
3. Being overly cautious of safety can make travel and vacation far less enjoyable and accessible.
USER-NEED STATEMENT:
Travelers that belong to marginalized groups need to feel informed about the safety and accommodations of their travel destination so that traveling can be a safe, accessible, and enjoyable experience for everyone.
Step #3: Sketching & Wireframing
This stage involved drafting our design plan and exploring ways to incorporate features we learned users would benefit from the research phase. Developing a cohesive user-task flow (see below) allowed the initial design sketches and wireframes to evolve holistically.
The first iterations of Safely’s wireframes reflected the initial sketch concepts of the general layout and task flow. The designs made in the mid-fi stage were adapted to give users more flexibility and added additional features that enhanced the user’s experience and enjoyment of the app.
Step #4: Design System
Our logo and brand development incorporated bright colors and symbolic elements that would engage people using our product. Along with our interactive buttons and hover states, the descriptive symbols further immersed users in enjoying the travel experience, but also the planning process. Since the app is centered around travel accessibility, integrating warm and easy-to-identify UI features, symbols, and color schemes was crucial in building Safely's design system.
Step #5: Usability Testing & Prototypes
Usability testing was then conducted to uncover potential usability issues, gather further insight into how intuitive the interface is, and improve the overall user experience:
USER-TASKS FOR TESTING:
1. Locate the URL for Tempo Cafe’s website.
2. Find Tempo Cafe’s average star rating.
3. Accept a pending friend request from Manny Fredson.
4. Locate the cafe in Chicago with the highest safety rating.
USABILITY TEST FINDINGS:
1. Some crucial features were not intuitive, such as finding a nearby location with the highest safety rating or the safety rating bar.
2. Create a more accessible navigation path to the social tab.
3. Improve the search functionality, specifically, by type of location.
Improved Features & Additions:
Emphasized the sort by safety feature
A new personal profile page to connect with other users
Connect with travel buddies and read reviews
Step #6: Final Prototypes
Final Takeaways
As the lead designer, a major lesson I learned was the importance of understanding the multilayer UX process. A major stage that required attention was collecting detailed user research. Throughout various stages of peer review, usability testing, and analyzing similar apps to our prototype, we tested Safely’s features and modified designs to improve the accessibility of the final product.
After evaluation, some future iterations that would be beneficial to improve Safely were to build more elements of our prototype, specifically, frames that emphasize instructions and key features of the app’s functions. For instance, explain the safety bar's reasoning and how it will affect the reviews for each location.
Overall, I learned how vital it is to approach UX design as an ongoing cycle of research, testing, and refinement. This project reinforced the importance of adaptability, attention to detail, and designing with purpose to truly meet users’ expectations.