Hop In —App project
Our final project: going through a full design process in only two weeks
I’m an extremely curious person. I love to learn and try new things. So when asked to make my project about something I am really passionate about, I had a hard time. Eventually, I decided to make my project about events, because they can literally be about anything. And that is, on its own, fascinating.
“Hop In” was born from the need of direct transportation to events. Often times, events are remotely located and hard to reach, but hundreds or thousands of people are traveling there, all with a common goal and a common interest, so why not connect them?
Analysis
I began my project with a Lean UX research. A good understanding of the problem is 90% of the solution. I set the goal to create a product that people would understand, use, recommend and that would solve a real transportation problem.
I researched the current situation and made surveys and interviews, and came with good supporting data.
- Events move millions of euros and thousands of people every year.
- Festivals like Primavera Sound, BBK Live or the International Movie Festival bring up to 200.000 people together.
- 44% of people who go to events have to plan a trip, with transportation and accommodation.
- Also, 76% of people had stopped going to an event they wanted to go because they didn’t find someone to go with, and an additional 14% because of transportation issues.
- And 68% of people said they were interested in meeting people this way, while the remaining 32% said they might.
Great!
We also found three beneficiaries for the project:
Events —They benefit economically from a higher number of assistants, and logistically from having full cars. Our business plan is to make sponsorship agreements with them.
Guests at events — Our main beneficiaries and the ones we will focus on.
Employees at events —Might have different needs, and we will leave them out of our MVP and for future improvements.
User personas
When coming to user personas, I found many possible archetypes but focused on three types of guests based on the frequency they attend events.
For this project, we will take Thomas as our main Persona: the superfan. He loves to go to 80s revival events, doesn’t miss a gig of his favourite artists. But has trouble finding people in his surroundings that are as enthusiastic about it as he is.
This personas will help us keep the focus on the user and support our design decisions.
Definition
For the definition stage, I worked with a Lean UX Canvas, mind maps, storyboarding, affinity mapping and user journeys.
The Lean UX Canvas helped define a business strategy: who we are, how we are different from other travel or event platforms and why should users choose us.
- We place our value proposition on community and human connections, we are different because the project value is based on the personal growth that happens during the trip, when you meet people with similar interests to go to an event together.
2. We promote culture, giving visibility to smaller and less known events.
3. And we encourage a more sustainable transportation.
With the user journey, I placed myself in the shoes of a driver who, after exchanging a few messages with a possible candidate, figures out it’s not the kind of company he wants. It doesn’t match his travel style.
How could we help users figure out the kind of traveler they are going to share a trip before this message exchange takes place?
I also used BlaBlaCar’s conversational technique, where you put yourself in the place of the user to ideate the way your App responds. It’s quite fun and helped me think about the flow and needs of the user in every step. I ended up using some of the dialogue as copy.
To sum up the definition stage, I made a User Story. There can be many user stories aligned with different users and functionalities, but for this one I defined the main goal:
As an 80s revival superfan, I want a place to communicate with other fans so that we can set up a common transportation to reach remote locations.
There is an emphasis on communication and collaboration.
During the definition stage, I also made benchmarking to find what other platforms are doing well, and what we can already use. We save time by learning from others and acknowledging our user’s mental models.
Ideation
After the definition exercises I had a flow that looked like this:
We are designing for our users, so we need to take in the problems identified during the research stage. I realized each moment of the process could be matched with different pain points found during the interviews:
1. Before:
Most of the worries of our users were related to who they are traveling with, whether this person matches my tastes/ideology/travel style, etc. We had to deal with how to know this person before an exchange of messages takes place, so you can choose between one trip or another from something more than the price and picture of the user.
For this, we used iconography indicating travel style (party-loving, relaxed, touristic…), and added some info on the profile such as tastes and a wishlist of events.
2. Just before:
The second pain point we found was related to uncertainty and the possibility of last minute cancellations. We wanted to give security to both passengers and drivers.
The payment can be made through the App since our users said they’d appreciate this feature. But passengers will be able to join a trip without paying beforehand. This way, we want to eliminate the barriers of joining a trip. However, they will be asked to pay their part a few days before the trip takes place. This way, we want to avoid people bailing out at the last minute.
3. During:
Many things can happen during the trip. We want to give that flexibility and convenience through our app by including collaborative features such as adding additional expenses (ex. parking) or being able to communicate with other drivers to manage micro-trips inside the event.
4. After:
After the trip takes place, we want to tackle the user’s need to be able to review their experience and keep a communication with their peers.
I then worked on Architecture Information and immediately after I was making paper wireframes to draft the composition and content of each screen.
I made three flows for this: a user who logs in, makes a search, and joins a group. A user who publishes a trip as a driver. And the navigation inside a group: payment, routes, and chat.
Since I come from an architecture background, I know that hand-sketching before jumping into Sketch can save you a lot of time in the long term. It’s easier to think with your hands and you can try different ideas faster.
I also used this sketches as a prototype to do a quick testing.
I then translated them to low-fidelity wireframes on Sketch App, where I started putting a bigger focus on details, structure and hierarchies, but still without thinking about visual design or aesthetics.
Visual Identity
Before jumping to the prototype, I worked on the visual identity of the project. I defined a set of brand terms: popular, fun, casual, modern, ecological, young.
I had already decided the name: “Hop In!”, the act to enter a car or vehicle on a cool, friendly tone. For the visuals, I was inspired by the colorful and expressive design of event posters. I finally ended up with a design system containing typography, iconography, colours… and worked on the logo too.
And I started designing the high-fidelity wireframes to get a sense of the look of the App. I left the login and publishing actions out as to focus on the main features, explained later in the prototype.
Prototype
When designing the prototype I sent my high-fidelity mockups into Flinto to design flows and microinteractions as a way to quickly test our ideas with potential users later in the process.
For this MVP, I focused on three main functionalities:
1. Explore
For any user who enjoys going to events, but doesn’t have a specific event in mind, it’s possible to check out the trips other users are organizing.
The Homepage encourages this exploration by presenting events in different ways: first, a header with sponsored events, next, trips that are coming soon and still need travelers, then trip recommendations according to your selected interests, and finally the possibility to explore different categories by topic.
The user can then save trips for later or share them on Facebook to get more attention.
2. Request
For those users who know exactly what event they want to attend, they can use the search option with different filters.
The results are always trip cards published by other users with the location and departing time, user info and differentiating attributes such as the style of the trip and whether this person has bought a ticket yet or not.
The trip details focus on transparency, where every user knows the total estimated cost of a trip, and on that social value, with a short description or motivation for the trip. Once the user finds a trip they are interested in, they can check the profile of the user they are going to travel with, message them or request a seat.
3. Groups
As a solution for the uncertainty that can come out of traveling with strangers, once the seat has been accepted, a group is made for all the members to organize the trip together, manage expenses, routes and communication between all the passengers. They can share pictures, add expenses, indicate a pickup point and make payments through the app.
This way, we intend to generate implication and activity between members as well as solve their needs during the trip, such as contacting other travelers.
The route and costs information would be made with an API with ViaMichelin, which estimates the travel costs depending on the driver’s car, info that would be asked when users are publishing a trip.
You can also check the InVision prototype here!
Testing
The final stage of a Design Thinking process is testing. This allows us to check our design ideas with real users, identifying mistakes early in the process. Testing is usually very revealing as we can see whether the users act in the way we expect them to, and confirm or deny our thinking process.
Testing is probably one of the most amazing parts of UX design, it allows us to share the experience with others, teaches us how important it is not to get attached to our designs, and allows to improve our products in a healthy, user-oriented way!
Our projects were presented to an audience inside Ironhack’s campus, where we summarized them into 7 minutes of glory.
Thanks for reading this and to everybody who has helped me through this process. Especially, thanks to Alejandro Martinez and Itziar San Vicente, our amazing TA’s who were always optimistic and helpful, to our incredible coach AlejandroArribas, who is an insatiable energy of positive criticism, and to Chucho Lozano, Samuel Hermoso and Óscar SP for all their support and wisdom.
Please feel free to comment, ask or suggest. I’m always available at celiaviudes.arq@gmail.com if you wanna say hi or drop a line!
