CAPSTONE PROJECT
TRAVTEMP - Case Study
My Roles - UX Design, UX research and UI Design
Duration - 5 months
PROJECT BACKGROUND
AND PROBLEM BE SOLVED
While conducting my capstone project my family and I had damaging high winds where our residence resides. It caused lots of damage to our property and also caused my family and I to have no power for more than 24 hours. At the time I thought WOW if I had an app to tell me when high winds were present at my location and provided detailed information it might have saved our front screen door or my kids trampoline. This is how I came up with severe weather being my capstone project. Spent about a 5 months time frame conducting research, evaluating and analyzing to come up with a user friendly app that could be used while traveling on the road giving forecasts, road conditions, alerts and weather conditions.
SECONDARY RESEARCH
First started conducting secondary research. Wanted to find out what apps users were already using and how their app gathered the wind information. Either detecting wind speed through your phone's microphone or just local cell towers in your area. Found a great website that provided 6 different apps giving the breakdown of each one by one. Also giving detailed information on how users felt and how they used the apps which was exactly the information I was looking for.
Taking the information found in the secondary research I conducted a heuristic analysis of competitor research on three different apps found on Tech Hana’s website. Wind Speed Measure, Wind Compass and Weather Alert, I looked for what their service or app actually provided, how their service was implemented and how they’re solving the problem or a similar problem I was trying to solve. All three had great features, some great tools and others were very hard to understand as you maneuvered through the app.
HEURISTIC ANALYSIS OF COMPETITORS
Want to see the full report.
SCREENER SURVEY
After conducting a heuristic analysis of competitor research I prepared a research plan with a background of the project, the objective, research questions, research methods I would use, participant characteristics and how I was going to recruit potential participants.
Then conducted a screener survey with the research questions focusing around how the participants felt and dealt with severe weather. 23 participants took my survey, with outcomes such as; 39.1% of participants said they're most terrified of tornadoes and 34.8% of participants said they checked their weather app 1-2 times a week.
INTERVIEW PROCESS
After conducting the screener survey a few participants were chosen based on their ability to provide information and insight about the problem to have an Interview. The interview process was able to give me a clear approach to the design process with a better understanding of my users’ behaviors, pain points, needs, tools and goals. While interviewing my participants women seem to tell more detailed stories while the men were very straight to the point with not a lot of details.
AFFINITY MAP
After conducting several interviews, notes were constructed on post-it notes from each participant's interview such as observations, insights and quotes. These post-it notes were then prioritized into themes that have similarities that connected them together. This gave data points for making sense of the data collected while conducting interview research.
While reviewing interview notes and building out an affinity map there started to be a pattern with participants being concerned about weather while driving to work or simply traveling on the road. Taking those insights, observations, and quotes that were collected from the user interview to better understand the user’s pain points, goals, feelings, thoughts and behaviors in severe weather. At this point the project started taking a different approach with the users wanting to see more severe weather updates while traveling in a vehicle.
EMPATHY MAP
PERSONA
After putting together an affinity and empathy map, the next question was, who am I designing this product for? Wanted to identify goals that needed to be provided for a great user experience that was also for a specific user group. So Travis Turnkey is the persona base; he's a construction worker who travels to different work sites, either on a weekly or daily basis. His quote "Weather has the most impact on my traveling to and from work." It highlights his bio, motivations, pain points and goals. This is an important piece to be used as building the next steps.
HOW MIGHT WE (HMW)
After creating the persona a problem statement was developed “how might we” questions to give a clearer statement as to why this app is being developed.
How might we relieve the stress of travelers determining weather in their current location? and
How might we give better warnings about severe weather approaching?
SITE MAP
Once the HMW statement was created it was time to start visualizing how the hierarchy of the site would be laid out. A visual diagram of the top-level feature pages that appear in the navigation bar all the way to subpages that are reached through one of those top-level features. This information was taken from the affinity and empathy maps of the insights, observations, and quotes.
USER FLOWS
After building the hierarchy of the site through a site map next was to consider all possible ways a user could navigate through the app by identifying red routes which are the user flows essential areas. Building out the essential red route would give a clear path of how the user would navigate through the app by using key symbols to represent actions/decisions, input/output, pages and skip areas.
low fidelity sketches
SKETCHES
After building out the user flows it was time to create low fidelity design sketches. This makes ideas more visual so they can be tested and adjusted using guerilla usability tests. Before making higher fidelity designs. The guerilla testing is able to flag certain aspects of the design that need to be adjusted or didn’t make sense. While conducting the guerilla test the participants established that the screen placement needed to be adjusted for the app to flow easy for the user.
high fidelity sketches
WIREFRAMES & WIREFLOWS
Once high fidelity sketches were tested building wireframe and wireflow were next. Wireframing is a digitized version of the sketches that would define the hierarchy of how to map out the screen's content. Then wireflows showed what the user will do on each screen in detail.
MOOD BOARD &
STYLE GUIDES
While conducting research it showed users like to see graphic icons represented in weather apps to determine their weather at a glance. Also blue seemed to be a user preference while indicating certain weather patterns. Most users expressed in the interview process they rather see a clear simple layout with not a lot of information on one screen more spread out between screens. Interstate was used as the font for TravTemp because of having many font weights and being very clear font.
PROTOTYPE
Went through a couple rounds of prototypes, first initial screen were a little big not much white space was provided. After reviewing, high fidelity prototypes were created with smaller fonts, less font sizes, a clear hierarchy was provided, icons were brought down to a better size and labels were added to clarify were needed.
Initial Screens
Revised Screens
USABILITY TESTING
Was able to test a total of 6 participants, one being in-person and the rest were fully remote. While conducting the usability testing participants were given 4 tasks to be completed. This was to determine the ease at which the user can navigate through the app to accomplish these tasks. Also to observe the path in which the user took while conducting these tasks and observe any frustrations or obstacles the user might face while completing each task. After completing the usability test a report was done with all noted observations. Testing did find that users were able to complete all tasks given. Participates did have some confusion on colors used for day and night representation. Also some wanted to see the road section with more detailed information showing exactly where road conditions were impacted due to weather while driving.
NEXT STEPS
After a few rounds of usability testing I will be taking all observations into consideration and will be implementing resolutions for all issues that arose. More usability tests will be done until all implements are proven to have changed the outcome for the better.
