Title: AllerGenius
Role: UX Researcher and Designer/Project Manager (Also led redesign during Web Development collaboration)
Deliverables: User Interview Documentation, Affinity Mapping, Problem Statement, Journey Map, MoSCoW Map, Design Studio Documentation, Mid-Fidelity Wireframes with Annotations, Usability Testing and Report, Mobile Wireframes with Annotations, Clickable Mobile and Desktop Prototypes, Presentation Deck
Tools: Screener Survey and Results, Persona Creation, Paper sketches, Sketch, Zeplin, InVision
Challenge:
To spot and solve a problem within the subject "Travel". After brainstorming and topic mapping, we identified Traveling with Food Allergies as a major area of improvement. People currently lack dependable options for communicating and planning for their food allergies when traveling.
​
Goal:
To build a Responsive Website for Traveling with Food Allergies, providing translation and educational resources. We actually had two separate phases: 1.) Working as UX Designers ONLY then 2.) Collaborating with a team of Web Developers to make the designs a functional website
Phase 1: Problem Identification, Research, and Synthesis
Phase 1.) UX Design Team
Project Onset
For this project, every group was given a topic to work from. When others were given topics like Entertainment and Food, we received "Travel". From there, we decided to topic map, brainstorming on subjects within Travel. At the time, we did not realize this was coming from a bias, but we landed on traveling with food allergies, mainly in places outside of their normal communication. We found a need in the travel market, knowing this was an impactful solution that could be widely relied upon.
Screener Survey
We did use a screener survey to reach out to users from all over the country. We compiled a list of questions that consisted of travel frequency and tendencies, food allergies/dietary restrictions, and trip planning. In this complex situation, using a screener survey was optimal, as we found 6 users to comprise the perfect user interview candidates.
6 User Interviews
Our script expanded on many questions from the screener, as well as important topics for research synthesis. We recorded every interview and manually created transcripts for all to refer to at later times.
Persona
User interview insights led to us building the User Persona, Sophie, a personable traveling professional with a potentially fatal shellfish allergy.
Summary: Sophie is looking to plan her first trip of the year. She is hoping to go to Japan, but she knows that shellfish are commonly used in their cuisine. She also has heard that there is limited understanding of severe food allergies in most of her desired destinations. She is working on her itinerary but is struggling to find consistent and trustworthy sources on how to communicate and navigate her food allergies during her trip.
Journey Map
We absolutely wanted to build a journey map for this project, knowing there are multiple phases when traveling, and even moreso with those that have health-affecting food allergies. From project inception to planning & research to arriving abroad, there are several experience factors to keep in mind along the way. Our Journey Map was also considered top-notch, as it clearly visualized high and low points, opportunities for improvement, and more.
Problem Statement
Having such a well-constructed journey map helped us tremendously to build a quality problem statement.
"While traveling abroad, Sophie becomes stressed and anxious when she feels that her food allergies are poorly understood.
How might we help Sophie overcome language barriers and cultural differences so she can feel safe eating while traveling?"
Through user interviews, we found that negative emotions (like stress and anxiety) were directly related to the lack of quality food allergy translation and education resources. Users needed to trust what they were using to potentially save their trips (and lives!)
Phase 2: Iterate and Design
MoSCoW Map
We chose to do a MoSCow Map for feature prioritization, including which features MUST, SHOULD, COULD, and WON'T be included. One of the necessary features was "Users having a 'one-step' website of trustworthy techniques for communicating allergies"
​
It was (and is) important to ALWAYS consider which features users depend on and expect to have, especially when their lives could depend on it.
Design Studio (Documentation)
The 3 of us met for initial design studios, creating lo-fi wireframes for the homepage, navigational bars, and translation features. These feature areas were brought out from our previous MoSCoW Map, deciding which features Must and Should be included.
Mid-Fi Wireframes
Every team works a bit differently, but when deciding the design process, we felt comfortable splitting the mid-fi wireframes three ways in Sketch. From there, we could work independently then combine as needed (following the same layout guidelines, symbols, spacing and sizing, etc.) Although to be clear, this was early in the program, and we learned several lessons along the way. Not only did our collaboration experience increase, but our personal UX Design abilities did as well. Looking back on this project, it spelled out several pros and cons to our process.
Phase 3: Usability Testing and Insights
Usability Testing of Mid-Fi Prototype:
In order to test the efficacy of our designs, we jumped into usability testing. We conducted 3 usability tests in-person, mainly testing key content and navigations. Our clickable prototype was built in InVision. Our usability tests showed:
3/3 were confused by the Japan page
1/3 struggled with the Translations page, mainly the amount of text on the screen
1/3 was confused by the difference between Favorite (heart) and Add To (plus) features
Phase 4: Iterate, Hi-Fidelity Designs, and Prototypes
Hi-Fi Designs for Responsive Website (Mobile and Desktop)
Due to the difficulty level of designing a responsive website, we built mobile-first, and then translated those designs to desktop. This helped us better dictate the journey of our "then" hi-fi designs. Also, this type of website would most-widely be used by those on-the-go, especially when traveling abroad (and only having access to their mobile).
Phase 5: Next Steps
Next Steps
-
Change the wording of Travel Deck to Trip List
-
Allow easier and better access to translations from the home page
-
Plan to include the phonetic spelling of translations
Part 2 -- Phase 1: Collaboration with Web Development Team (Several Weeks Later)
At a later point in the program, we were notified we'd be working with developers to make this project a functional website with a shareable URL. Through several meetings with developers, we learned several positive and negative things. We learned what they were capable of at this time, and simultaneously, what their limitations were. They were in the process of learning "o-auth" for instance, so even account creation seemed easier from a designer's point-of-view. We worked out a compromise to include Google Translate's API for real-time translations on the site, yet abandoned features like the Learn & Explore (articles that would have to be uploaded or shared from multiple sources) and the Common Allergens (as the system would have to recognize which allergens were common to that specific region/area).
MVP Meeting (Design Studio)
In a future meeting, we as designers guided the developers through a Design Studio, bringing our user research and former designs. It was captivating to see the differences in thought-processing, as we were communicating across disciplines. This also provided further clarification on what was possible for them to deliver. The Design Studio shed light and provided a VERY important lesson moving forward (and one I'll always keep in mind): When designing, always consider the abilities of your developers and what is possible within the parameters you are given (time, budget, personnel, etc.) We learned the hard way, as the Design Studio prompted another redesign.
​
Part 2 -- Phase 2: UX Redesign and More Iterations
UX Team Redesign
Big differences had to be made, including the cutting and replacing of certain features. We also found that our design abilities had grown leaps and bounds, and this was a great chance to display that. I led the redesign of the homepage, pushing us in a direction improving from static to more dynamic (and then the entire team delivered during redesign.) The development team was happy with the redesign.
Part 2 -- Phase 3: Project Hand-off from UX to Web Development
Project Hand-off
This part of the project was new to all 7 members of our team. We (UX Designers) taught the developers Zeplin, providing the design components, spacing and sizing, style guide, etc. We also provided the symbols from our Sketch file for convenience. Our group also created a Trello Board, User Stories, and conducted multiple rounds of Pointing Poker.
​
To define Pointing Poker, it is a simple way for units of different disciplines to get together and formulate the difficulty and timeline expectations of certain deliverables. It is based on the Fibonacci Sequence, using 1, 2, 3, 5, 8, 13, and 21 to correspond to the amount of time and effort needed to accomplish the task. It's a powerful communication tool, especially given time constraints (and it's interactive!)
​
Part 2 -- Phase 4: Web Development Production
Web Development Team Production
At this point in the process, the UX Design team was not as much involved. The developers had little more than a week to deliver components of the MVP decided upon, with the end goal of producing a functional website. The developers were able to make the Translations work, though they ran into issues with the User Blog feature, account capabilities, etc. The project is still in progress, as we're looking to improve on this work and further iterate!