Project Details
Duration: 3 Months
My role: UI/UX Designer
Tools: Figma, Lyssna, Miro
Team members: Alyssa Welter, Karisma Zaragoza, Skye Harrop
This was a project for a ficticious trip discovery/planning app for the Fall semester course “CST 446: User Research and Experience Design” at California State University, Monterey Bay.
#1: Defining the Problem
The Problem
The problem we identified to base our project around was that when college students move to a new area for school, they need a way to find out about the attractions in the local area that they can visit in order to achieve higher motivation levels, deeper connections, better time management, and better mental health.
The Solution
The solution we identified was to create a mobile app which would allow users to discover locations in their local area and create itineraries based around them. The app will be gamified to keep the user engaged and will be personalized based on the user’s preferences.
#2: Observations
Our group did a total of 8 observational field studies to better understand our target users. We did 2 observational field studies using the “pure observation” method and 6 field studies using the “deep hanging out” method.
For my observational field studies I conducted 2 deep hanging out studies where I put myself in the shoes of a college student looking to find new things to do in the area around campus. I documented the research and planning process of going to Jack’s Peak Park in Monterey with friends and going to Vince DiMaggio Park in Marina solo.
Once all team members conducted their field research, we brought all the data we gathered together and analyzed it using affinity diagraming.
Observation Insights
- Types of Planning and Research
- Digital planning is an essential tool for college students to have
- Some students make loose plans but are still able to enjoy their experiences
- The strictness of a plan can influence motivation levels
- College students use a variety of different planning methods
- Lack and/or Surplus of Motivation
- College students are highly reliant on technology, discouraging them from leaving the house
- Students may be more willing to leave the house if there is some kind of task or incentive based around doing so
- Communication Between Peers
- Communication is an important part of the planning process
- College students feel more incentivized to leave the house if they are accompanied by a friend
- Communication through social media channels is important when planning outings with friends
- The comments section on social media is often where information about different locations is shared
#3: User Interviews
Our group did a total of 4 semi-structured user interviews with people within our target user base, which is college students between the ages of 18-25 years old.
For my user interview I interviewed an alumni who recently graduated the semester prior from California State University, Monterey Bay.
After conducting our interviews we used the thematic analysis method to synthesize our results and identify patterns.
User Interview Insights
- Adventure Preferences and Personal Interests
- Personal preferences and interests are what influence people’s activity choices for the most part, and factors such as mood can influence one’s personal preferences in the moment
- Planning Methods, Tools, and Challenges
- Many college students prefer a kind of “hands-off” approach to planning outings where they do very little planning or follow plans made by other people
- Varying Levels of Motivation
- College students often go on outings for the purpose of stress-relief or for their mental health in general
#4: Personas
After conducting and analyzing our user interviews, our group then used the data we gathered to craft personas which would be helpful in guiding our future design decisions. We crafted 4 personas, with each person completing one persona each.
Persona I made:
#5: Journey Maps
After we made our personas we used them to create journeys maps which mapped out the current experience of finding out about a location and planning a trip. These maps helped us formulate potential features to include in PinPoint to address the pain points of our users.
Journey map I made:
#6: Comparative/Competitive Analysis
For this next part we analyzed some of PinPoint’s potential competitors, as well as some products which might not be competitors but have features that can be compared to features we’ve brainstormed.
The competitive products we looked at were the website version of TripAdvisor, Randonautica, and TripIt. The comparitive products we looked at were Google Maps and Tinder.
We also conducted moderated user testing with one of the competitors, TripAdvisor. This would give us insights into the strengths and weaknesses of the current experience of using the mobile app and website versions of TripAdvisor, which would in turn influence our own design decisions.
Competitive User Testing Results
- Itinerary Building Capabilties
- TripAdvisor’s itinerary building feature is not well designed, doesn’t feel intuitive to new users in particular
- Difficulties with Locating and Using Crucial Features on TripAdvisor
- Navigation in TripAdvisor can feel confusing at times, and it can be difficult to identify what features are available when navigating through the different screens
- Reliance on Familiar UI Elements from Other Applications
- UI Elements within Tripadvisor are similar to those used in other apps which helps to communicate their function
#7: Conceptual Map
Our group created a conceptual map to visualize how the different screens we planned to have in our app would be connected to one another.
#8: Sketches
After mapping out our different screens in the conceptual map, we then decided to draft out how the screens might look visually. We used the “Crazy 8’s” method to come up with 8 variations of a screen and then picked one of the 8 sketches we made to refine into a more detailed sketch.
As a group we each chose different screens within the app to be the focus of our sketches. I focused on sketching the “discover” screen.
My crazy 8’s:
My refined sketch:
#9: Wireframes
Now it was time to create digitized wireframes, using our sketches for reference.
Skye Harrop and I focused on completing the task flow for finding a local attraction and adding it to a new itinerary. Alyssa and Karisma worked on another task flow.
The screens I worked on were the onboarding process which establishes the user’s preferences.
Task flow I followed:
Screens I worked on:
#10: User Testing
We conducted unmoderated user testing for our interactive wireframes using Lyssna, a platform for user testing.
We also conducted 2 moderated tests for our wireframes.
Wireframe User Testing Insights
- Some elements need to be resized
- The purpose of some screens isn’t clear, meaning there is a need for text/visual indicators
- The preference building screen is straight-forward and intuitive
#11: Prototype Iteration
After conducting user testing for our wireframes, we took some of the insights we gained into building a high-fidelity prototype.
Alyssa established the color pallette we would use across the screens and designed the logo for the app.
Screens I worked on:
#12: Final Iteration
After getting some feedback on the first iteration from our Professor and classmates, we refined our prototype again.
Skye Harrop helped me by making active states for the buttons and connecting the screens to other screens for the purpose of prototyping. He also recommended removing the navigation bar for the onboarding process.
Link to Final Prototype Iteration
Screens I worked on:
Learning Moments and Next Steps
Learning Moments
This was my first time doing a group UI/UX project of this scale, so there was definitely some learning moments to reflect on.
During the process of making wireframes and the high-fidelity prototypes, we didn’t communicate as much as we could have and ended up making duplicate versions of the same screens. We did our work remotely on our own time, so it would have been helpful to be in a Google Meet or Zoom Meeting to ask questions and clarify things so that there wouldn’t be confusion later on.
It was sometimes difficult for us to keep track of the findings we got from our research, as our results were split across multiple documents. In the future it might be helpful to keep some kind of document which records all the main insights and results of our research that we can easily look back and reference.
Next Steps
The steps that follow where we left off on the design would include making more iterations and adding more features that we planned to have but couldn’t implement due to time constraints. The visuals have not been tested/analyzed to see if they follow standards of accessibility, which is something that would definitely have to be done before proceding. More elements could be made clickable in the prototype and different button states as well as motion graphics could be added to flesh out the interactivity. Some more rounds of user testing would have to be conducted to ensure usability and intuitiveness.
Features that could be added in the future:
- Writing reviews
- More preference options
- Sharing itineraries
- Sharing locations
- Settings
- Changing your current location
- Creating an account