Client: Student Project at CareerFoundry (CF).
Sector: Travel, Gaming, & Social Networking.
My Role: Entire product design from research to conception, visualization and, testing.
Sector: Travel, Gaming, & Social Networking.
My Role: Entire product design from research to conception, visualization and, testing.
Tools: Adobe XD, Usability Hub, Optimal Workshop, Imovie, Quicktime & Microsoft PowerPoint.
Not feeling like reading?
Watch the video description, it will take you throughout the Case Study in Less than 5 minutes.
PROJECT BRIEF
This App was designed as a hands-on project at Carrier Foundry online UX Program. The task requirements were to create an App to help users go on Scavenger Hunts and Connect with others.
I decided to connect CF mobile app requirements and the concept of one of the most popular hobbies, traveling! Before starting the design, I collected users’ feedback to prove the App’s acceptance and the possible expected features.
I found three recurrent User Insights!
Based on the user’s needs and frustrations, I search for apps in the market that could meet these needs, I did not find any app that could satisfy all of them, so I created TownFriend.
PROTOTYPE
I created prototypes to test the main App core features.
*Note: these prototypes are limited to their functions.
Prototype A | Look for a bar in SF and save it for a later view.
Prototype B | Hunt your first site and take an unlock element.
CASE STUDY
I designed the App under a User-Centered Design Process.
User Surveys
I conducted semi-open interviews to determine two main topics in the App requirements:
• The acceptance of an App to go on scavenger hunts, socialize, and search local places.
• The desired features of this app.
• The desired features of this app.
The results proved the acceptance of the app concept and its expected features.
The Challenge
Create an app for users to Visit and Post places in a city or town with the option of using a Scavenger Hunt feature and a Social Interaction system.
Competitive Analysis
After defining the key concepts, I searched similar apps in the market. However, I didn’t find any app with an equal value, so I selected two apps with similarities to the TownFriend App and highly accepted in the market.
______________________________________________
Click the image to see full competitive analysis
______________________________________________
SOLUTION - 1ST proposal
Based on the User’s Expectations, Competitive Analysis, and The Challenge, I built the first solution, a Scavenger Hunt, Social and Traveling App.
PERSONAS
I created personas and user journeys based on the App's core solutions (traveling, scavenger hunts & socializing.)
USER JOURNEYS
USER FLOW
I selected the flow with the most feedback in the interviews.
INFORMATION ARCHITECTURE
Once personas, user journeys, and flows were ready, I had enough material to create a site map for the App's Information Architecture.
DIGITAL CARD SORTING
I conducted a digital card sorting study to verify the first site map. The results provided enough information to create a second site map that determined the final Information Architecture in the App.
ITERATIONS
With the App’s main features ready and the Information Architecture in place, iteration was the next step. I used a digital tool to create the first sketches.
Paper sketches are great, but digitalizing a sketch optimizes the design performance by eliminating tasks like cutting paper or hand erasing designs.
*Plus, this practice reduces paper waste!
Paper sketches are great, but digitalizing a sketch optimizes the design performance by eliminating tasks like cutting paper or hand erasing designs.
*Plus, this practice reduces paper waste!
Task Flow
I selected the feature with the most user feedback in the interviews and created frames for further prototype creation.
Task Flow → “Look for a place in SF and save it for later.”
USABILITY TESTING
Before going into a detailed design for the rest of the App’s flows, I decided to conduct a Usability Test to obtain users’ feedback to make decisions for the following designs.
This study aimed to assess the learnability of new users interacting with the App’s core functions. I observed and measured the project user’s understanding, nature, and satisfaction level while having the mobile experience.
______________________________________________
Click the image to see the full analysis
______________________________________________
CRITICAL ERRORS
I detected critical errors and designed solutions for each of them.
ACCESSIBILITY
I revised Section 508 that offers the Web Content Accessibility Guidelines (WCAG) 2.1 and modified the visuals and functionality that did not comply with the AA and the AAA requirements.
DESIGN LANGUAGE SYSTEM
I created a Design Language System to help maintain consistency in the design since producing a trustworthy and versatile app was part of the project requirements.
The DLS was and will be progressively changing along with the project development.
The DLS was and will be progressively changing along with the project development.
______________________________________________
Click the image to see the full analysis
______________________________________________
Retrospective
I had a wonderful time developing this project. I started the Appʼs designs with limited knowledge of UX; after months into the project, I was more knowledgeable on UX patterns and resources and realized that I had many designs that could be improved. Intending to increase the projectʼs quality, I committed to redesigning most of the work, prioritizing tasks to finish the project on time. One important thing that I learned was that accessibility should be considered early to avoid redesigning when trying to comply with accessibility guidelines.
One of the most challenging things to do on this project was Information Architecture. The app features were ambitious, considering the App's social, scavenger hunting, and traveling aspects. The user's feedback was crucial at this stage.
What's next?
AAA Guide Lines will continue to be analyzed to achieve a design with the best possible level of accessibility. More UI techniques and concepts can be implemented on the designs and prototypes to conduct another usability test to determine the projectʼs last changes and the design of the missing flows and screens.
