Image
Top
Navigation

Client
Personal Work

Created at
DePaul University

Project Teammates
Rui Bi
Philip Miller
Parnika Raskar

About the Project

This project is a proposal for a multi-channel service that would help users decide what types of activities to do in their spare time. The below highlights the user experience design process of my teammates and myself throughout this project.

 


 

Initial Ideas/Brainstorming

For the first stage of this project, our group brainstormed individually what features we may want the app to have and what it may look like. We each sketched basic ideas, then collaborated to select our collective favorite features and design low-fi mockups of what a handful of screens may look like.

We each also contributed ideas to a mood board to influence the look and feel of the interface going forward—we wanted something that felt whimsical, active, and outdoorsy.

 


 

Sketches

Sketches

Sketches

 

Mood Board

Mood Board

 

Style Guide

Sketches

 


 

Digital Narrative Prototype

We needed a convincing argument as to why someone would want to invest in the creation of this kind of app. One facet of this was creating a realistic looking version of the homepage to convey a polished vision of what the end result could be, and the other facet was to tell a story of how an average user would interact with the mobile app.

An “average user” was created out of personas based on our target audience—we made two personas (a young person seeking to be more active in the outdoors; a middle-aged family man trying to find activities for his entire family to participate in). The scenario we walked through was based on the second persona.

 


 

Personas

Persona 1

Background:
Age: 25
Gender: Female
Activity Level: High

Level of Mobile Expertise:
Uses several social media apps to be connected with friends.
Uses mobile for sending texts, browsing & listening to music.

Goals/Motivations:
Wants to find new random routes to make running fun.
Wants to read reviews before trying out new routes.

Frustrations/Pain Points:
Always going on the same day trips/seeing the same places.
Being disappointed with new places that she finds online.

Description:
Jess runs several miles every other day regardless of weather, and goes hiking when she has extra time. While not at work, she enjoys being outdoors and exploring new hiking trails, though she hasn’t found any new ones in a while.

Persona 2

Background:
Age: 38
Gender: Male
Activity Level: Moderate

Level of Mobile Expertise:
Uses mobile for sending texts and calling.
Still getting an understanding on how to use apps.

Goals/Motivations:
Wants to spend more time with family.
Loves to explore new places for picnics and hikes.

Frustrations/Pain Points:
Changing family schedules makes it hard to know what activities they have time to do.
Finding activities that everyone can do and will like is hard.

Description:
Dave lives in the suburbs with his family and is a little bored of the day-to-day routine. He is family man and likes the outdoors and exploring but sometimes finds he doesn’t have the energy for a full hiking trip. It’s been awhile since his family has gotten out together for fun and he’s not sure what kinds of activities are available to them relatively nearby.

 

 

Digital Prototype – User Path

Step 1: Dave Opens AppDigital Prototype - Step 1

  • He has free time today, and wants to drive out to have a one-day trip.
  • Opens Route Roulette.
  • On the homepage, He sees 3 recommended trips provided by the app that fit his preferences. Below these 3 trips, he also sees the most popular and nearest trips around him.

 

 

 

Step 2: Dave Selects “Random Trip”Digital Prototype - Step 2

  • Since he cannot decide on what to do, Dave has chosen to view a random trip.
  • The first choice that comes up happens to be a featured activity with discounts for visitors.
  • Dave reads through the details and comments, then determines it sounds great.
  • He then chooses the “Select” button to start his trip.

 

 

 

Step 3: He Chooses to Start the TripDigital Prototype - Step 3

  • Dave reviews the details of the trip and swipes through each potential stop on the way.
  • Each stop is highlighted on the map as he views them.
  • When he’s ready to start navigating, he taps on the map to get going.

 

 

 

 

Step 4: He Taps on Map to ExpandDigital Prototype - Step 4

  • Dave uses this page to navigate to his next stop on the trip, and also to get a better look at what’s nearby.

 

 

 

 

 

Step 5: Dave Completes the Trip and Taps FinishDigital Prototype - Step 4

  • When he finishes the trip, he rates his overall experience.
  • He enters in his comments about the trip based on how he rated it.
  • Once everything is filled in, he taps the Submit button and the trip is complete!

 

 

 

 

 


 

Mid-Fi Prototypes & Test Plan

With a basic idea of how the app should work in mind as well as low-fi mockups of the interface, we created a mid-fi prototype that was clickable when following a small number of common task flows, both on a mobile interface as well as a desktop web interface.

A test plan was created to interview four users and ask them to perform those tasks in our interfaces in order to get feedback on the design’s usability. Tasks included exploring available trips, changing the user’s preferences, and following a “random trip” from start to finish.

With feedback from user testers, we made edits to the layout and content in a few places in order to improve clarity and align some content with user expectations.

 


 

Test Plan – Overview

 

Test Goals:

  • Establish usability of basic app functions
  • Can users make it through tasks without difficulty?:
    • Complete a random trip from start to finish (app)
    • Edit preferences in the app (app)
    • Edit preferences on desktop (web)
    • Explore different trips and filter results (web)
  • Get overall feedback on the website and app—best/worst parts of each
  • Get feedback on if anything is missing or there is too much information

 

Test Methods:

All four team members will conduct one test each. The tests will be conducted using the website and mobile app prototypes on a computer. They will be documented by screen recording with audio.

 

Target Participants:

Individuals who already enjoy exploring their city, going on road trips, and traveling.

Being under time constraints, we have recruited these participants by asking people we know if they fit the description of our target participant and would be willing to volunteer or if they know someone else that would fit our target.

 

Test Plan – Script

Introduction

My name is <your name>. Thank you for meeting with me today. I’m working with a group on an application that would let users find activities to do near them, and help them navigate from place to place during the activity. I would like to know more about how you interact with the app and website we have created to find a trip and navigate to each location.

There are no right or wrong ways to carry out an activity, or right or wrong answers to my questions; I just want to watch what you do and hear what you have to say. As you perform the activity, your actions and comments will be noted and you will be asked to describe what you are doing. You may be asked questions before, during, or after performing the activity. We’re testing the interface – not you.  This meeting should last about 30 to 45 minutes.

This activity is voluntary. You have the right not to demonstrate any activity or answer any question, and to stop the inquiry at any time or for any reason. Your actions and responses will be confidential and used only in connection with this class assignment. Only your first name will be used to identify you. If you wish, you can use a pseudonym rather than your real name.

Is it OK for me to begin with my requests and questions?

Warm Up

I’m interested in how people find things to do in their free time.

  • How do you find new things to do in your free time right now?
  • How often do you try to break your routine and try something new?
General Inquiry/Task Prompts

We’re going to start with the website prototype.

  • Could you show me how you would set your preferences for trips?
  • Could you show me how you would browse what trips were available to you?

Now we can switch to the mobile app.

  • Could you show me how you would take a random trip, all the way to completion?
  • How would you edit your trip preferences here?
Deeper Focus Questions

(Ask about things that stuck out during testing that you want to know more about)

Retrospective
  • Did the functions in the website make sense?
  • What about the functions in the app?
  • What were your favorite parts of each?
  • What were your least favorite parts of each?
  • Was anything missing?
  • Would you take anything out?
  • If you could do one thing to improve your experience in finding things to do, what would you improve?
  • Are there any other thoughts about the experience of finding new activities through this service that you’d like to share?
Wrap Up

That’s the end of the activity. Thanks for your time and for agreeing to help me out with this.

 

 

Mid-Fi Prototype Screenshots – Website

 

Mid-Fi Ptototype - Website

Mid-Fi Prototype Screenshots – Mobile

Mid-Fi Ptototype - Mobile

 

Test Subjects

Subject 1

Krystal – Female, 24 years old

Fits target audience because: She has free time on the weekend and wants to find some interesting places to go. Her boyfriend and she like driving to nearby parks to walk when they have leisure time.

(Moderator – Rui)

Subject 2

Nithyanandh – Male, 25 years old

Fits target audience because: He is usually a busy guy and gets a week off at month’s end and wants to find some interesting places to go. His friends like driving and exploring new things and activities.

(Moderator – Parnika)

Subject 3

Brian – Male, 43 years old

Fits target audience because: He likes to explore the city he lives in and find new things to do, but then also likes establishing a routine and revisiting locations he likes the most. He enjoys traveling to other cities and finding popular activities to do.

(Moderator – Stephanie)

Subject 4

Anna – Female, 23 years old

Fits into target audience because: She tries to find new things to do in the city at least once a week, and enjoys being active in her time off from work.

(Moderator – Philip)

 

 

Key Findings

Where Users Struggled:

Website Prototype

– Some users went to the footer menu instead of using the top nav menu
– Confusion about what the term “Explore” meant
– Having “Trip Preferences” under “My Account” caused confusion with one user

Mobile App Prototype

– Some users had questions about the search bar, i.e. What type of terms would be searchable?
– Issues with there not being a button to “Enter” or “Start” search

 

Positive & Negative Feedback:

  • The overall layout of the website and mobile app was liked by most users
  • Generally “things made sense” to users
  • Should include price ranges in filtering and emphasize estimated prices more for each trip
  • Should add options for other modes of transportation for people without cars
  • Liked random being easy to find
  • Random button could be completely random without preferences included

 

Recommendations

  • On trip thumbnails and in preferences or filter options, include price range to enable users to more conveniently make a decision if price is a factor
  • Include search bar at the top of the page across all the desktop pages
  • Include guiding text in search bar, e.g. “Search (hiking, 4 hrs, $0, Chicago, etc)”
  • Make it clear how to initiate a search after entering search terms
  • Change verbiage of “Explore” on desktop version to make the purpose more clear
  • Include a way to change the user’s mode of transportation (car, public transit, walking, biking, etc)
  • On the desktop interface, find a way to make Trip Preferences more obvious at the top of the page

 


 

Hi-Fi Prototypes

Once we iterated the design based on user feedback, we got to work creating high-fi prototypes of the interface, which included adding a payment information page as well as sign in/sign up pages, and cleaning up the appearance of all the pages in the mobile and desktop applications.

Design elements that were added were all based on a style guide that helped provide a uniform experience across pages in both the mobile and web channels.

 


 

Hi-Fi Prototype Screenshots – Website

Hi-Fi Prototype - Website

 

Hi-Fi Prototype Screenshots – Mobile

Hi-Fi Prototype - Mobile

 

View the High Fidelity Prototypes by Clicking on the Buttons Below

Website Prototype Mobile Prototype