TWSTY

An iOS app that simplifies social enthusiast driving
Problem:
Enthusiast Drivers want an easy way to plan, find, and share fun driving roads. Current solutions are either too general, or have deal breaker limitations.
Solution:
TWSTY provides tools to ensure that every drive can be a fun drive. Whether it's running an errand or planning a multi-day rally with friends.
My Role
Concept
UX Research
Branding
Prototyping
Interaction &
Visual Design
Duration
2 Months
Team
Self
Design Mentor
Tools
Figma
Illustrator
Marvel
Miro
FigJam
AirTable
Photoshop
InDesign
Background
In my personal life, I'm deeply passionate about driving classic sports cars, and being involved in the social scene surrounding them. It's been a frustrating experience on the planning and navigational side of things.

Most rally planners revert to printing out paper routes, either requiring a navigator, or a very distracted driver. There are some existing solutions, but they have deficiencies that make them less than ideal for this purpose, and thus rarely get implemented in regular use. My experience in this activity obviously makes me a very likely User of this product, and I will have some perspectives of my own, so this will be a great opportunity to show how much more can be added to the perspective of a single designer by the UX process.

Research

Tools Used: Market Research | Competitive Analysis | Provisional Personas | User Interviews

Before beginning to design, I sought to first learn what I could from existing sources of information, as well as directly from potential users of the product. This will ensure that our resources are being used to their maximum.

I then outlined our Research Goals, Methodologies, Participants, Timeline, Assumptions, and the questions we sought to answer.

My Research Goals were as follows:

- Learn about current trends in the navigational app space
- Understand gaps in current offerings/solutions
- Understand current user demographics, habits, needs, and motivations

My initial Research Questions were:

- Who are the players in the current marketplace, direct/indirect?
- What are the priorities/needs of my intended User?
- Where are there gaps in the current offerings that can be capitalized upon?
- Do Users want to connect socially with a navigational app?
- How do Users currently meet this need?

Once I understood what the goals were for my research, I moved forward with collecting the primary and secondary research that would be needed to answer them.

Secondary Research: Market Research
Prior to generating my own data via User Interviews, I sought to learn what I could about the current navigational and social solutions aimed at automotive enthusiasts, and see what information existed about my potential User base.
Travel Trends:
It was a particularly interesting time to be searching for current travel statistics and individuals thoughts on travel, given that it was the middle of the Covid-19 pandemic. There were some definite surprises to be found, and it would be worth revisiting some of these thoughts down the road to better understand if behaviors and feelings will return to "normal", or if some of these changes will prove to be longer lasting.
  • 27% of those who said they would be flying less stated they would be flying less because they would be traveling by car more
  • 58% say that they plan to continue taking more road trips post COVID
  • 73% responded that road tripping is more fun than flying
  • In the first two weeks of August 2020, there was a 37.6% increase in road trips that ranged between 100-500 miles
  • 41% said with the increase in their road trips, they are traveling more than ever
  • 26% said they would travel significantly less by plane after the pandemic, 17% said somewhat less, 43% said it would remain the same, and 14% said they would fly more than before
Mobile Navigation Trends:
  • Google has a considerable lead in mobile navigation. They have 6.2x the usage as Waze, and 6.7x as much as Apple Maps
  • ⅔ of smartphone owners under 50 will use navigation at least once a month
  • 14% of smartphone owners say that they have never used another navigation app outside of their preferred app
  • 87% of Users use their navigation app primarily for driving
Auto Enthusiast Demographics:
  • 66% of auto enthusiasts are male
  • 35-44 is the largest age grouping according to one study, another states that the largest group of auto enthusiasts are Millennials, and that they are the most likely to identify as an automotive enthusiast
  • They have a net worth 50% higher than the national average
  • The 25-34 age range is most likely to modify their car, at 34%
  • Enthusiasts take on average 5 domestic trips per year. Twice the national average
  • 79% of young enthusiasts say that their vehicles help them stay closer to friends
  • One in four 16-24 year old drivers belong to a car-related group on social media
Secondary Research: Competitive Analysis
I sought to learn what I could about the current navigational and social solutions aimed at automotive enthusiasts. I want to understand what the main competitors offered in terms of functionality, both positive and negative. I performed this initial research on some key direct and indirect competitors, and continued to benchmark against them throughout the design process.
Direct Competitors
Strengths
  • You can import .GPX routes
  • You can record a drive to share or use again
  • You can download drives for offline use
  • Partnership with Butler Maps for routes
  • Share your location with friends and family for safety
  • Works with Apple Carplay
  • There is a desktop app to create routes
Weaknesses
  • You can import .GPX routes
  • You can record a drive to share or use again
  • You can download drives for offline use
  • Not able to custom tune routes, only via waypoint
  • Doesn’t work well out of cell service
  • Cant play music and use navigation at the same time
  • Reviews state features don’t all work as planned
  • Cant play music and use navigation at the same time
  • Everyone in the group has to be a paid member $10/month to use the features
Strengths
  • Make Custom Routes in App without waypoints
  • Public or private event creation
  • You can download drives for offline use
  • Hagerty offers routes via drive packs
  • Users can share routes
  • Turn by turn Navigation will function when offline
  • Ability to create events
Weaknesses
  • Distance is limited even in paid versions of the app (300 miles)
  • Number of participants limited even in paid versions of the app (15 Member Level) (50Pro)
  • Number of participants limited even in paid versions of the app (15 Member Level) (50Pro)
  • Can’t tell if paid routes are worth paying for, and they are expensive
  • Can’t import/export routes
  • Sharing isn’t straightforward
Strengths
  • Can Import routes
  • Has a companion Web App
  • Shared and rated routes by members
  • Will log route, speed, elevation for drives
  • Large community of Users
  • Automated curvy road suggestions
  • Excellent User Guides and User Forum
  • Maps function offline
  • Easy sharing: Friend doesn’t have to have the app to view
  • Track stats by vehicle
Weaknesses
  • No Apple CarPlay
  • Access to premium features is paid: $22.49per year or $80 once
  • Offline Maps are extra
  • Reviews state there can be a few bugs in the navigation
  • Doesn’t recalculate well when going off course
  • No traffic avoidance in navigation
Strengths
  • Owned and promoted by Porsche
  • Apple CarPlay support
  • Offers sharing for group drives
  • Users can share routes
  • Free
Weaknesses
  • Cannot Import routes
  • Only events listed were in Europe
  • Limited ability to change routes, have to enter names/addresses for waypoints
  • Can’t read the names of roads when there is a route on them
Strengths
  • Attractive, minimalist, UI
  • Able to communicate details to participants before the drive/event
  • Able to share route with QR code in person
  • Able to see friends on map during drive
  • Group Chat feature during drive
  • Push notifications to participants during meet/drive
Weaknesses
  • Not able to custom tune routes, only via waypoint
  • Doesn’t work well out of cell service
  • Cant play music and use navigation at the same time
  • Reviews state features don’t all work as planned
  • Everyone in the group has to be a paid member $10/month to use the features
  • UPDATE: App has shut down
Other Competitors
Strengths
  • Social media for Car Enthusiasts
  • Allows you to show yourself on a map to connect with other enthusiasts
  • View events and drives in your area
  • Instagram like photo feed - Auto specific
  • Able to “follow” individuals and clubs
  • Has very basic navigation
  • Ability to share roads, photo locations on a map
Weaknesses
  • The only community is in California at the moment
  • The basic navigation isn’t robust enough for real group use
  • Promising idea, but hasn’t yet taken off. Social media with no Users is difficult to value
Strengths
  • Able to plan long trips. 150 scheduled stops included
  • Collaborative trip planning possible
  • Curated, in depth points of interest along the routes
  • Mobile and desktop apps
  • Many vetted pre planned routes available
Weaknesses
  • Not catered to driving enthusiasts
  • No way to state preference for winding roads
  • Can’t import routes
  • Subscription required: $6.99/Month or$29.99/year
  • If you want to share turn by turn directionswith a group they all have to be members
  • I experienced difficulty with turn by turn directions in testing when out of cell range
Provisional Personas
Based on the studies that were referenced during the market research, two potential Users appeared:

One a bit older and with more financial resources than time. He most likely has a family, and uses his hobby both as an opportunity to bond with them, as well as for the occasional escape with his like minded friends.

The other uses their car as a way to connect and stay close to friends and to display his individuality. He didn't grow up learning about the automotive hobby, but with all of the resources available online, he's learned a lot. Many of his "car friends" are virtual rather living nearby.

I put together two provisional personas based on these personalities. These are the most likely users for our service, and will be used to narrow down subjects for the next step: User Interviews

Goals:
  • Discover new road trip adventures
  • Get some time away from family
  • To enjoy scenic views
  • To enjoy travel freedom
  • To bond with family
  • Have fun with their enthusiast car
Pains:
  • It doesn’t feel safe to travel to populated areas
  • Don’t have lots of time to plan
  • Most apps don’t show the best roads, just fastest
  • Getting time away is limited. Have to make it count
Goals:
  • Stay close to friends
  • Express their individuality through their car
  • Connect with other enthusiasts
  • Learn more about their hobby
  • Have adventures with like minded people
Pains:
  • It’s difficult to share routes with friends
  • It’s not easy to find other people near me with my interests
  • It’s hard to have fun with my car near home without attracting negative attention
Primary Research: User Interviews
It's important to learn directly from users of our product to understand their perspectives, pain points, and propensities in order to make better design decisions for their needs. I recruited a group of Driving Enthusiasts and asked a series of open ended questions to better understand how they are currently planning and sharing their drives, what their preferences are when it comes to driving solo vs in a social group, what stumbling blocks are in the way with the current solutions, and what (if anything) is preventing them from participating in the hobby as much as they'd like.

The statistics for the test participants are as follows:

-5 interviews were conducted 
-5 male
-Ages ranged between 38-47
-5 married
-2 self employed

DOWNLOAD .PDF
Research Synthesis

Tools Used: Affinity Map | User Persona

Affinity Map
The tool I chose to use to synthesize the data I generated is an Affinity Map. This helped me to organize the data into information that we can use to discover common themes, patterns, and similarities that appear most often and define the problems we're looking to solve. Below you'll find an image of the results:

The Affinity Map revealed a number of points stemming from our raw interview data. I began by generating Insights data to better understand commonalities among the responses. I then discovered some overall themes that led to the Insights, Goals, Pains, and Needs:
Insights Data:
  • 5/5 Identify as car enthusiasts
  • 5/5 are attracted to social car events
  • 5/5 prefer events to be at least 75% driving vs static activity
  • 5/5 mentioned using Google Maps for at least part of their drive planning process
  • 5/5 mentioned frustrations or hacks they’ve had to use when using Google Maps for planning/sharing fun routes
  • 5/5 mentioned unprompted that they want the ability to record/save drives to refer to later
  • 5/5 Mentioned most of their fun drives were close to home
  • 5/5 Find value in shared driving
  • 4/5 Enjoy the mechanical aspect of the car hobby
  • 4/5 mentioned using group texts as their primary way to plan drives and share routes with friends
  • 4/5 state they’d prefer to drive on roads they’ve never driven before
  • 4/5 have not yet tested any specialty driver focused navigation apps
  • 4/5 mentioned resorting to paper maps or printed directions
  • 4/5 mentioned that the planning/scheduling involved with a social drive is a stumbling block
  • 3/5 mentioned age of members (older) being an issue that kept them away from car club events
  • 3/5 volunteered that they don’t do as much fun driving as they’d like to
  • 3/5 volunteered worries about people driving either too fast for their comfort level or too slowly on social drives
  • 3/5 have made real life car enthusiast friends via Instagram
  • 3/5 have made car enthusiast friends on car rallies
  • 3/5 volunteered that although they like driving in groups, they should be small (10)
  • 3/5 mentioned having some concerns about driving socially with incompatible people/cars
  • 3/5 Met driving friends on social drives
  • Driving enthusiasts want to drive new routes, but wind up doing most of their fun drives on close, familiar roads due to not having time to do research
  • Social driving is preferred to driving solo, but scheduling is a stumbling block
  • Enthusiast drivers are resorting to hacks (screen shots, printing maps, typing directions) to try and force Google Maps work for sharing their routes
  • Driving enthusiasts have trouble remembering routes they discovered in person, and would like to be able to record them for later reference
  • Discover new routes in my chosen area easily
  • Make scheduling social drives simpler
  • To be able to text a route to my friends and have it appear as planned
  • I want to drive new routes with my friends
  • I want to be able to record my routes while on the road to refer to later
  • I want to share my hobby with like minded people
  • Google Maps isn’t built to map and share enthusiast driving routes
  • Everyone wants to go on a drive, but no one wants to plan one
  • I want to drive new roads, but most of my fun driving takes place on familiar routes because the research takes too long
User Persona
Meet Jeff Wilson. After synthesizing my research, I generated a fictional representation of a target user guided by the findings. Putting a face and name to our user reminds us who we’re designing for.

Define + Ideate

Tools Used: POV Statements + HMW Questions | Solo Brainstorming

Defining the Problem
To further clarify the problems that we will design to solve, I translated the insights and needs from my empathy map and persona into POV "Point Of View" Statements, and HMW "How Might We" questions.

Insights #1
Driving enthusiasts want to drive new routes, but wind up doing most of their fun drives on familiar roads due to not having time to do research
Needs #1
Discover new routes in my chosen area easily
POV #1
Jeff needs to discover new routes in his chosen area easily because driving enthusiasts want to drive new routes, but wind up doing most of their fun drives on familiar roads due to not having time to do research
HMW #1
How might we provide Jeff with an easier way to find new driving roads?
Insights #2
Social driving is preferred to driving solo, but scheduling is a stumbling block
Needs #2
Make scheduling social drives simpler.      
POV #2
Jeff needs to make scheduling social drives simpler, because social driving is preferred to driving solo, but scheduling is a stumbling block
HMW #2
How might we help Jeff more easily schedule his social drives?
Insights #3
Enthusiast drivers are resorting to hacks (screen shots, printing maps, typing directions) to try and force Google Maps work for sharing their routes
Needs #3
To be able to text a route to my friends and have it appear as planned
POV #3
Jeff needs to be able to text a route to his friends and have it appear as planned, because Enthusiast drivers are resorting to hacks (screen shots, printing maps, typing directions) to try and force Google Maps work for sharing their routes
HMW #3
How might we provide Jeff with a streamlined way to send a route to his friends? 
Brainstorming - Solo
Once I was armed with my HMW statements, I needed to brainstorm ideas on how to solve them. I chose to do mind maps for each of the 3 HMW statements to generate as many solutions as I could within a given timeframe.

Zoom In
Click anywhere to minimize image.
Strategy

Tools Used: Project Goals

Project Goals
Assembling the business goals from the design brief, and the user goals from my research, aids in determining overlap and competing priorities in developing site features. The easiest decisions to make are where both business goals and users goals overlap. Those move to the forefront when moving to the next step, which is planning a Product Roadmap.

Information Architecture

Tools Used: Product Roadmap | Appmap

Product Roadmap
With the shared goals in mind that I discovered in the previous step, I looked back to the brainstorming step in the process to see which ideas addressed those priorities. The features that align with the shared goals move forward first, followed by other features that will separately address User and Business needs.

Features are further organized by which HMW question they address, how difficult they would be to implement, and my confidence in the feature directly addressing a stated need.

App Map
Once the initial feature set has been been decided, I laid out the architecture of the app with an app map:

Interaction Design

Tools Used: Task Flow | User Flow | UI Requirements | Low Fidelity Wireframes | Medium Fidelity Wireframes | Medium Fidelity Prototype

Task Flow
Informed by the Sitemap, I built a Task Flow in order to test some specific tasks that a User is likely to perform.

User Flow
I then created a User Flow to ensure that all of the user decision points are thought through, that the flow is an efficient as possible, and that all of the necessary pages and features are accounted for to accomplish specific scenarios.

UI Requirements
Referring to the documents just created, I mapped out all of the pages and high level requirements that I will need to design in order to complete the set tasks/scenarios. You can access that file at the button below:

Low Fidelity Wireframes
Since we're starting from scratch here, I decided that beginning with low fidelity sketches would be prudent, and I could go through some ideas and iterations more quickly than if I had jumped straight into software. This also has the benefit of making me less attached to the design at this stage since fewer resources were used in creating it. At this point I've done a lot of familiarization with the best in the segment, and have a firm understanding of what is an expected design pattern for Users. The biggest challenge with this design is making a powerful app straightforward to use.
Medium Fidelity Wireframes
Once the design was worked through in the sketches I took the next step to design the medium fidelity wireframes. Although I was using mainly design patterns that I've seen used successfully in other apps, I wanted to ensure that the more complex functions work in the way I've envisioned before committing to the high fidelity design. The medium fidelity prototype I believe provides for a more rigorous test for the design in this case, because I can't rely on color to guide the User where to go. If it works here, it will just become more clear when color is added in the equation.
Mid Fidelity Prototype
It's time to put my design to the test! I constructed the prototype to be functional enough to complete the series of tests I wanted to put it through. The prototype can be interacted with below:

Usability Testing

Tools Used: Testing Plan and Script | Usability Test | Affinity Map

Usability Test
Before testing I laid out the objectives, methodologies, script, and scenarios for the test.

I conducted a think aloud, moderated, usability test. All of the tests were conducted with the Marvel user testing features. They took place in person when possible and remote via Zoom when necessary. They went through the following four scenarios:
Scenario #1:
Scenario #2:
Scenario #4:
Scenario #3
You want to share a route with a friend to go on a drive together. Go to a place where you can share a saved route
You're out for a drive on roads you haven't been on before, and you want to remember them for later. Begin recording your route, and then navigate the steps to save it as a New Route.
You have a couple of hours to go on a fun drive nearby and want to Discover anew road. Discover a new nearby route that will take about 2 hours to complete, and begin driving
You'd like to begin setting up an event using a Saved Route. Go to a place where you would create a new Event using the Saved Route “Hood toHood Loop”
I completed my user testing with 5 individuals, aged 40-54, 3 male and 2 female.

I've created a timelapse of the video and screen taps recorded through Marvel that can be viewed below:
Following testing I completed a detailed document with user feedback and actions recorded. It can be downloaded below:
Affinity Map
In order to discover the most common issues users might have had during the testing I created an Affinity Map. The patterns created pointed out the items that need attention.
User Patterns:
  1. Create navigation with more conventional pattern that doesn't require a swipe to be visible
  2. Nothing. I believe the confusion was due to Marvels User test design. (They have a red stop button that was confused for being part of the prototype design)
  1. Not all users immediately recognized the swipe gesture was needed for route details on Discover screen
  2. 3/5 Users took a moment to hit “Pause” button to find the option to save route
Recommendations:
User Interface Design

Tools Used: Mood Board | Logo Design | Style Tile | High-Fidelity Wireframes | High Fidelity Prototype | UI Kit

Mood Board
I first thought through what the brand identity of TWSTY should be, and decided on some brand adjectives which can be seen below.

With those adjectives in mind I went looking for inspiration that would suit those ideas, and remain very usable.

Branding: Logo Design
I began the logo design process by doing some initial sketch brainstorming. I had already been doing some mental envisioning of a few concepts while completing other steps in the process.

Working in the "Twisty Road" signage icon into the concept seemed to be a strong fit for the concept especially since those signs inspired the name of the app as well.

I also thought of the letters simply as shapes, and played with how they could interact with each other. Turning the "S" around gave me an opportunity to evoke the road sign shape without being completely literal. It also improved the interplay with the "T" and "Y" in particular.

After the sketches, I began creating concepts in Illustrator. I went through a number of incremental tweaks that led to the final 3 concepts.

The final two concepts were difficult to choose between. They're quite different, and I was happy with both. In the end I was concerned with the legibility of #2 with the backwards "S", so concept #1 won the day. It felt up to date, but evoked some of the retro letter styles i was hoping to emulate.

Branding: Brand Color Selection
For color selection, I tried a few different palettes with inspiration from the retro styled images I selected while making the mood board. It came down to a cool, jewel toned version and the firey, warm gradient that won out. It fit with the Adventurous, Friendly, and Active brand adjectives much better. The jewel tone gradient was too formal.
Branding: Style Tile
High Fidelity Wireframes
Once the changes were complete from my post User testing iteration, and the branding was settled, I dove into the high fidelity wireframes. There were a few details that were changed in addition, but it was mainly adding in the colors in the appropriate places to ensure that the design is attractive, and that the colors do their part to guide the User through the experience. I also created a splash/registration screen, and introduced the "User" generated images into the design.
High Fidelity Prototype
The most recent iteration of the high fidelity prototype is available for interaction below:
UI Kit
I created a UI Kit for the items created during the design of TWSTY so any future reference/development will have a consistent library of components to work from.
Reflection + Next Steps
Reflection
I've personally been a frustrated User trying to find the best way to accomplish the tasks TWSTY was designed to tackle. The hardest part of being in that position is trying to stay as impartial as possible during the process while still remembering the valuable insight I have as a likely Power User of this product.

I still definitely found value in the UX design thinking process throughout the project. Interviewing other enthusiasts with strong POVs on the subject as well led me to develop features that I may have moved down the priority list, and also reinforced some of the ideas that I had bouncing around in the beginning of the process.

Another benefit of the process in this case was that it caused me to really cull down features in order to deliver a tight, functional, MVP. It would have been easy to hit project bloat, and lengthen the timeline if I were completely off the leash designing every possible handy feature I'd personally like to see.

This project also reminded me how valuable user testing is. My testers nearly universally had an issue recognizing a design pattern that I thought was well known. Finding this out early gave me the opportunity to launch a much better MVP.

Next Steps
  • Feature Build Out: I would like to be able to build out the "Schedule Your Event" feature on the Events screen. It would allow the planner to select a series of dates/times for a proposed drive, and the people that receive an invite to input their compatible dates/times. I believe it would be a useful addition, fulfilling the "Make scheduling drives easier" Want, but it was outside the scope of this initial project.
  • User Testing + Iteration: I'd like to see another round of user testing in order to confirm the revisions were a solution to the issues I encountered during the last round of testing.
  • Design Handoff: Once the user testing and iteration cycle is satisfactorily completed, design should be handed off to development with our documents and communication successfully bridging that gap.