A UX case study, from research to a mid-fi prototype.

My first individual project for my Ironhack UX/UI bootcamp was about creating a concept for a habit tracking app to improve people’s lives.
These are the instructions that we were given by our lead teacher:

The topic

When I thought about an audience that I wanted to reach out to for this project, it only took me a few seconds to decide: I knew right from the beginning that I wanted to help people who struggle with mental disorders and that I wanted my app to provide support for when they need it the most.

What’s the definition of mental disorders, though?

Mental disorders (or mental illnesses) are conditions that affect your thinking, feeling, mood, and behavior. They may be occasional or long-lasting (chronic). They can affect your ability to relate to others and function each day.

If you’re not familiar with them, some examples of mental disorders are:

• Anxiety disorders, including panic disorder, obsessive-compulsive disorder, and phobias.
• Depression, bipolar disorder, and other mood disorders.
• Eating disorders.
• Personality disorders.
• Post-traumatic stress disorder.
• Psychotic disorders, including schizophrenia.

The process

For this project I followed the double-diamond scheme, which features four different stages of design thinking (Discover, Define, Develop, Deliver) where divergent and convergent approach alternate. They are structured as follows:

If you want a detailed overview of my process, have a look at this Miro board!

Step 1: Discover

The survey

First of all, I needed to gather enough data to get an idea of what kind of habit linked to mental health status I wanted to break or encourage. In order to do so, I had to reach out to as many people as possibile, so that I could learn more about my target users. The fastest way to do this was through a survey.

Having this Lean Survey canvas as a guideline and using preliminary research data as a foundation, I came up with a 10 questions’ survey and got 267 responses. You can find the survey here.

Here are the major insights that I got from my survey:

• 21.3% of the people who responded suffer from mental disorders and also know someone who does, while another 35.2% don’t but they know someone who does.
• Anxiety is by far the most common disorder among them, and is followed by depression and eating disorders.
• Only 32.8% of people who suffer from mental disorders get professional help, also 52.4% of those who know someone who struggles with disorders said that this person gets professional help.
• Even though they have someone to talk to, 29.3% of them said that they feel very alone.
• On a scale from 1 to 5, when asked how often they tend to feel judged or misunderstood because of their problem, 23.7% of people voted 4, while another 13.6% voted 5.
• 16.9% of people who responded said that they used to rely on toxic substances to cope with their disorder, and another 22% still do.
• Many said that they tend to isolate themselves when they are at home (49.2%) or at parties (25.4%).

Interviews and Affinity mapping

Once I gathered all the data from both the italian and the english version of the survey, I came up with some questions that I wanted to ask during the interviews and I moulded them into prompts to encourage my users to tell a story.
I conducted a total of 8 interviews: five of my users were women and the other three were men, ranged between 22 and 35 years old. They were all students except for one who was a B&B receptionist.

All the insights that I got from my interviews were collected on sticky notes in the Miro board: this way I could easily have an affinity mapping session where I gathered all the insights that shared commonalities under the same category to find the major pain points in my users’ experience.

Step 2: Define

Pain points

The Affinity mapping brought to my attention 5 major pain points:

• Users need to engage in some activities and set goals in order to find motivation, otherwise they tend to feel powerless and get overwhelmed by their negative feelings.
• Users are scared of being vulnerable in front of others, they don’t want their peers to know about their struggles because they want to convey a “perfect image” of themselves who is in control of their emotions and doesn’t need any help.
• Users tend to overthink the most when they are alone and sometimes they don’t know how to get out of their head (even though many of them mentioned that yoga and meditation help).
• Users would like to see more empathy and raise awareness about the topic, but their fear of coming out of their shell and talk about their issues prevent them from contributing to the cause and make a change.
• Users’ mental status has been highly influenced by the ongoing pandemic.

Key Insight, “HMW” question and Problem Statement

After I found the major pain points that affect my users, I used Design Lib’s template as a reference to define a key insight, a “How Might We” question and a Problem Statement.

It is worth mentioning that the first time around I focused those on the theme of isolation, but on later steps in the Define stage I found out from my users that I was walking down the wrong path because company and understanding are not their main priorities: what they really need is to take control over their emotions so that they can focus on their life goals.
Once I realized that, I took a step back, had another look at my findings and came up with the following:

Persona

You might be wondering who is this Fiona that I mention in the Key insight.

Well, Fiona is my persona, that is a reliable and realistic representation of my target user. A persona helps designers maintain the focus on the user while approaching the development phase of the project.

The “Crazy 8's”

The “Crazy 8's” are a great technique used by designers to quickly sketch their ideas. This is the stage where I found out that my previous conclusions in terms of problem definition were wrong.

In fact, as you can see from the picture above, my ideas were all over the place: there were many options that I wanted to include in my prototype, but they were all different from one another and I couldn’t possibly implement all of them. At this point, I started feeling a bit lost and confused, I didn’t know how to narrow those possibilities down and choose some to prioritize.

The thing that helped me overcome this roadblock was the group crits (aka “group critique session”): my classmates and I had been divided into three groups of five to present our work in progress, get first impressions and receive feedback on our work.

Each student had 15 minutes available, and our lead teacher and teacher assistant were also present to facilitate the conversation and give their two cents on the project that were presented. When my turn came, I talked about this issue and my lead teacher Nevan suggested that I should rely once more on my users to see which of these options were most needed.

Following this suggestions, I reached out to 11 users and asked them to rate these options from their most (1) to their least favourite (8). Here are the results of those ratings:

The options that ended up on the podium were weekly goals [F], meditation and mindfulness exercises [C] and daily mood check-ins [E]. These results made proved that isolation was not as relevant and users’ need for control over their lives.

Step 3: Develop

Lo-fi prototype

At this point I had a clear idea of where my project was headed, but I needed to visually represent those ideas into a first draft of a paper prototype. At this stage I already came up with a name for my app: Self Care.

Here you can see a first concept for the user flow of my app, from the daily mood check-in to the completion of meditation and mindfulness exercises.

Mid-fi prototype

From there I quickly moved onto mid-fi prototyping using Figma.

Before we start digging deeper into the design choices that resulted from 3 sessions of usability testing and iterations, I’d advise you to have a look at my interactive prototype so that you can get a better understanding of the concept. You can play with it here:

Usability Testing and redesign

As you can imagine, it took a lot of tests and iterations to develop the first draft of paper prototype until the latest version of the interactive mockup.

I conducted a total of 8 usability tests divided into 3 different sessions, so that I could alternate test and iterations in the design.

Here are the major changes in my design:

The Daily Mood check-in

The Home Page

The Exercise Completion message

The Help Center

Step 4: Deliver

Presentation

After my project was done, it was time to present it. I created some Google slides where I put all the most relevant information to give a quick, yet complete overview of my process.

The presentation had to be 8 minute long, but I ended up taking 4 extra minutes — even though my storytelling was engaging enough that I didn’t lose my audience attention, so that’s something!

You can have a look at my presentation here:

Conclusion & Retrospective

What I think I did well

• I followed the Design Process step by step, from Discover to Deliver.
• I engaged with my users for the entire duration of the project and relied on them during each and every step.
• I acknowledged that I was wrong about something and took a step back, had another look at my gatherings and found a better solutions that was coherent with my users’ needs.
• The storytelling during my presentation was pretty good, I didn’t lose my audience attention and I explained my process in a clear way.

What I need to improve

• I need to trust the process and believe that everything will eventually work out.
• I need to make more sketches and paper prototyping before jumping into Figma, despite how tempting it can be.
• I need to make the first draft of a mid-fi prototype quickly and prioritize starting usability test as soon as possible over having a detailed prototype to show: at the end of the day, my users will tell me what to do and details will come up as a natural consequence of the feedback that I receive.
• I should refine my presentation skills.

Thank you for your time, and feel free to leave a comment with your thoughts!
Feedback is highly appreciated! 😃

In 2017, the world voted for the seven wonders of the new millennium. These are places of unique beauty which attract tourists from all over the world; they also offer services aimed at enhancing the experience for the people who visit them.

My task for this challenge is to conduct a usability case study to improve a mobile app or website through six crucial steps: define a user type, research, do some benchmarking, test, write down valuable insight and redesign wireframes.

1. User Type

First things first: let’s find out who our target users are going to be!

We were given six different user types to choose from. This is the one that I chose to go with:

Young group — 20–40 y/o (4 people)
You and your friends have decided to invest and spend some quality time together. You are planning your trip one year in advance to really make it happen and accommodate everybody’s schedules and needs. You’d like to share as much time together and plan for a lot of fun. You’re interested in a mix of culture and leisure. You have all saved for the last year for the trip so, while you’re still price-conscious, this is the opportunity to spoil yourselves.

But where is our young group headed? After some brainstorming, the winner was Petra, Jordan!

2. Research

• Nearest airport/most convenient airport to destination: King Husein Airport (Aqaba), 2 hours drive from Petra.
• Currency and exchange from your own currency: 1EUR = 0.78JD (Jordan Dinar).
• Vaccinations:

- Measles, Routine Vaccines [all travellers];

- Hepatitis A, Typhoid [most travellers];

- Hepatitis B, Rabies, Yellow Fever [some travellers];

• Visa: Tourist Visa.
• Wardrobe recommendations: Clothing which covers legs and shoulders is the best option for this trip — Jordan is a Muslim country and bare legs or shoulders can be seen as offensive; they should also be light so you don’t overheat. Don’t forget to carry a light sweater and a wind-proof jacket for the evening, when the temperatures start dropping. It is also recommended to wear sturdy shoes such as hiking boots — the desert is tough on shoes made from cloth.
• Days needed to visit attraction: 1–2 days.

Overall itinerary example:

• Day 1: Old City Amman + Jerash
• Day 2: Madaba + Mt. Nebo + Bethany
• Day 3: Petra
• Day 4: Wadi Rum + Dead Sea
• Day 5: Departure from Amman

3. Benchmarking

This is the step where we were asked to go to Kayak, Skyscanner, Trip Advisor and Hopper to conduct Usability Heuristics evaluation with Nielsen’s Principles, comparing at least three of these tools.

Once we identified the one that performs better for our selected user type/scenario in terms of accessibility, value proposition, features, etc. we’ll be performing usability testing to understand how it could get even better and help people travel the world!

After a meticulous analysis, these are the main issues that I experienced while interacting with the tools that I ended up discarding:

Trip Advisor (web)

• There is no sectioning that shows the cheapest, shortest or best value flight like other competitors: you have to manually select the chosen filter from the dropdown menu — the default filter is “best value”, which may work for a large portion of users, anyway.

Skyscanner (web)

• The website provides pre-made combinations of flights without the ability to mix and match flights from different offers, forcing the user to scroll down the list until they find the most suitable option for their trip, thus making the experience frustrating and error-prone.

Hopper (mobile)

• It’s mobile-only.
• When using the app, the interface gives you no clue whatsoever as to which section you’re in, so you may get lost in the process.
• The app won’t let the user pick departing and return flights at the same time: they will have to interact with multiple screens to select all the flights required by their trip.
• You can only change some of the criteria during your search: for example, if you wanted to select a different number of travellers for your trip, you’d have to go back to the first screen and start over.
• Info is displayed in a concise manner, however it may be incomplete on certain screens: for example, after selecting the number of travellers, the user will no longer be able to see this info when selecting flights, so in case of uncertainty they’ll have to go back to the first screen to make sure they typed the correct number of travellers.
• Search options are not intuitive enough.
• It’s not easy to access the help centre in the upper right corner menu, because this will only appear in the “Trips” page.

I found Kayak (web) to be the right choice for the project since it’s easy to use, the booking process is clear, linear and straightforward and criteria can be customised during the search to satisfy everyone’s needs in terms of booking a flight or a hotel accommodation.

4. Testing

For testing I need to target at least 3 users (5 would be ideal ) who are consistent with my selected user type and ask them for a 20 minutes test and interview.

To setup the interviews, I must design the task for my users, which should be adjusted in accordance with the information I have about my target.

What kind of budget do they have?

We’re talking about an intercontinental trip for which the group has been planning and saving for months, which means that they’ll need to cover expenses such as flight tickets, 5-day accommodations, transports and/or rental car, the budget will probably be around €900 each.

What kind of accommodation do they need?

They are going to need a comfortable and spacious accommodation inside a nice — yet not super expensive — hotel, suitable for all four of them. They’re young and adaptable, so they won’t need more than a suite consisting of two rooms with single or double beds.

How would they move around?

Car rental in Jordan is one of the most convenient ways to explore the country, with over one hundred car rental companies based in Amman alone (visitors can also pick up rental cars from Aqaba Airport). On average, visitors should expect to pay around 25–30JD (30–36EUR) per day for a new model with air conditioning and insurance. A car ride from Aqaba to Petra will take approximately one hour and 50 minutes.

Alternatively, since Petra is a world-renowned tourist destination, Jordan operates an excellent bus network which connects visitors from the cities of Amman and Aqaba. The journey takes just under two hours and costs 12JD (14.50EUR) one way or 20JD (24EUR) for a return ticket.

Do they have any time restrictions or is their schedule flexible?

My users are young professionals who work for most of the year, but they are likely to find a good compromise at work for just a few days OOO if they book their trip early enough.

Do they need special care/services (accessibility, day-care, etc.)?

Our young group has been saving up for a short yet packed experience, so they won’t need special services for their stay, since they will be spending most of the time away from the hotel. They will only need daily cleaning and optionally a shuttle to reach the airport and other points of interest.

The tasks:

• Book a round-trip ticket from Bologna (Italy) to Aqaba (Jordan). Spring is the best time to visit Petra, so our time window will be the month of April.
• Book an accommodation: most of the budget is for flight tickets, so we need to find a cheap yet comfortable 3-4 star hotel room in Aqaba.
• Rent a car for the entire duration of the trip.

The interviews:

Before each interview, users will also undergo a 5 seconds test to collect useful data about the look and feel of the website. It is structured as follows:

• Give the user 5 seconds to take a look at the home screen of the metasearch you selected. After 5 seconds, cover the screen and ask them: What did you see? What can this tool do for you? Where would you search for a flight?

After answering these questions, we can move on with the real test which will take place remotely, with users sharing their screens (it will take up to 15–20 minutes). Starting from the homepage of the website, I will observe their interactions and collect data about their experience, keeping notes about the issues that they face while completing the tasks. This way I’ll be able to come up with useful insight to build my own redesign concept.

5. Insight

I interviewed six targets from my personal network. Here are the major pain points in user experience that I aim to solve:

1. Most of my users had a hard time finding the dropdown menu for number of passengers/guests selection, which went unnoticed.
2. In baggage selection, hasty users tend to overlook the annotation that specifies “Baggage per person” and end up asking why they can’t select more than one cabin bag and two checked bags.
3. The upper bar containing flight search criteria selected by the user disappears while scrolling.
4. The “Cheapest”, “Best” and “Quickest” flight sections provide a price and a duration for flights. At first it isn’t clear what that duration represents, but after some analysis I figured that it must be the average between the duration of the departing flight and the duration of the return flight for the featured offer. While this piece of information may be useful, nowhere is it specified that the number represents an average.
5. It’s not clear whether the prices refer to a single passenger/guest or to the entire group.
6. Users didn’t know where to find more info about the flights they were considering (they eventually realized that they had to click on the box with the flights, not on the “View Deal” button, and felt frustrated).
7. When selecting a flight, users don’t immediately recognise whether the website registered their choice or not, because the checkbox doesn’t stand out.
8. Users don’t get info about the accommodations that they are considering until they click on the offer.
9. In the accommodation description, amenities are listed randomly and with no sectioning whatsoever, making it difficult for the user to gather the info they need.
10. In the rental car section the “passengers” filter includes the “number of bags” selection, which should have a filter of its own.
11. Car photos don’t match the model description. Some users deemed the service unreliable.

6. Redesign Wireframes

Now we have everything we need to come up with those wireframes for our redesign! Here are some wireframes that I made using Sketch where I commented my design choices:

You can play with the interactive prototype that I made with Marvel here:

Final Words

This was the last project for my Ironhack prework, and I can honestly say that I learnt a lot throughout this journey, and I loved how each challenge pushed me to test my skills and, sometimes, to develop new ones.

What this last challenge taught me is that everyone uses websites differently (most of my users didn’t use filters during their search! That hurt me deeply!) and that’s why we should give them as much freedom as we possibly can while designing.

I learnt that tests are a powerful tool, capable of pointing out many issues in user experience that couldn’t be predicted otherwise. I can’t believe all the insight that I got after the interviews, that really opened my eyes to the beauty of engaging with users and listening to their experiences to improve a product and make it more enjoyable.

Another cool thing that I am now aware of is how even a teeny tiny element in the website interface can make a huge difference in the user experience: imagine how counterintuitive it would be to have the login button in the bottom-right corner of the screen, or to represent the search bar with an icon that isn’t the magnifying glass!

Well, now that my bootcamp is about to start, I can’t wait to delve deeper into UX/UI design and learn as much as I can!

Thank you for your time, and feel free to leave a comment with your thoughts!
Feedback is highly appreciated! 😃

Ironhack Challenge 3: Usability Evaluation and Site Redesign was originally published in Evolve You on Medium, where people are continuing the conversation by highlighting and responding to this story.

For the second challenge of our prework, we were asked to ‘reverse engineer’ one popular app Interaction Design and User Flow.

My task is to create a wireframe version of the user flow of the chosen app based on screenshots or high-fidelity prototype screens, and the layout of the screens should be the same as the one implemented in the original. I will be simplifying the design to its bare wireframe state, placing boxes and placeholders when needed to represent different UI elements.

What is a wireframe, though?

“A wireframe is a skeletal mockup of an app or website, typically used for designing the barebones structure of the user interface, content, and functionality. Instead of visual elements such as colours and typography, wireframes are usually monochromatic, with a focus on usability.”

The reason wireframes should be done in black and white and with minimal details is to avoid distractions from the goal, which is to create a simple representation of the flow.

The app that I chose to work on is Netflix: not only am I a big fan of the service provided by the app, but I also admire the great design work behind it.
What makes this product so effective is the simplicity of its interactions: they are so intuitive that even those who are not fond of technology can easily use it.

The inspiration for this choice came from personal experience: even though my parents are still struggling with phones and computers on a daily basis, when they tried Netflix for the first time everything just felt natural and straightforward to them, it only took them a few minutes to get acquainted with the interface and start interacting with it.

The user flow

First things first, let’s set a task for this user flow: the one that I referred to is the same that my parents performed during their first experience, which is “Watch a thriller TV Show on Netflix”.

This flow starts from the very launch of the app and consists of 7 steps:

1. Enter your email/phone number and password and click on “Sign in”;
2. Click on a profile;
3. Go to “TV Shows” on the upper left portion of the screen;
4. Open the “All Genres” dropdown menu;
5. Select the genre of your choice from the list — in this case, thriller;
6. Choose a TV Show from the featured categories;
7. Click on the play button or select an episode.

Now you’re ready to watch! Here’s the wireframe that I made using Sketch and Lucidchart:

You can also play with the interactive prototype that I made with Marvel here:

What I’ve learned:

In the making of this project, I learnt that each and every app or website that we commonly use needs a solid structure in order to be effective: focusing on usability rather than the look and feel in the early stages of production will guarantee a higher chance of leading the users to a “happy path” while completing a task using the service.

Also, wireframes help designers understand what needs to be there and what doesn’t, avoiding superfluous features that might prove useless and overwhelming to users, thus worsening their interactions within the interface.

Thank you for your time, and feel free to leave a comment with your thoughts!
Feedback is highly appreciated! 😃

UrbanGo is a public transit and mapping startup based in Silicon Valley. Their goal is to solve the problems of urban mobility by providing the quickest and cheapest public and private transport routes to their users.

UrbanGo has already developed a mobile application that lets users select a starting point and a destination and provides different multimodal routes with the estimated time and cost.

My task for this first project of my prework is to create a feature for this app that solves the pain of having to purchase different public transport tickets through different channels.

Premise:

• Users already have all their information on the app, they will neither need to login nor enter any data when making a purchase/checking-out;
• Security issues and other limitations have been overlooked. The focus, for now, is on finding a quick and user-friendly solution.

Before we get into the details of the project it is worth mentioning that, since the app UrbanGo wasn’t available in my country, I used Citymapper as a reference because they share similar features.

1. Empathize

The first step of the Design Thinking Approach defined by IDEO is to get familiarity with the product and, most importantly, empathize with the target user. We were asked to start with a personal introspection that aims at finding the answers to four pivotal questions:

“What problem are you solving?”

With this project I aim to solve the issues that some users experience when using the app: even though it offers a good mapping service, having to switch to a different app or channel in order to purchase tickets may result quite jarring to those who feel the need for a single app capable of checking for routes and purchasing tickets at the same time.

“Who is your audience?”

My target audience consists of tourists and travellers — ranging from 18 to 50+ years old — who like to know their way around when it comes to transfers.

“Who is your client’s competition?”

My major client’s competitors are Google Maps, Moovit and Trainline.

“What’s the tone/feeling?”

The app is aesthetically appealing and easy to use. It provides the user with many different filters and options to make sure that they get exactly what they need, plus it notifies the user about the current state of transfers (delays, cancellations, etc.), resulting in a fulfilling experience during the search.

Now it’s time for the interviews! We were asked to reach out to 5 different users that have used public transport, especially abroad, to garner some interesting insight from their experiences.

Click here to see the Google Sheets file containing those Q&As.

2. Define

Now we move onto the next phase where we have to write down our findings and define a problem statement, focusing on the user’s viewpoint. The task is to detect the main problem that we want to solve.

On page 2 of the previous document, named “Findings”, is where you’ll find the insight that I got after reviewing my users’ answers.

These interviews brought up several issues that users experience while using public transports, and they mainly have to do with how convenient, functional and straightforward the system is. After some reasoning, I set efficiency as my priority, because many negative experiences that the users shared during the interviews could be improved by a more responsive and efficient system.

Problem Statement

An actionable problem statement combines user, need and insight. The following is the one that I came up with:

“Travellers need a way to purchase tickets easily and quickly through a simple interaction within the system, because the need to get them through a different channel would make the process confusing, slow and annoying.”

3. Ideate

During the ideation phase designers use brainstorming techniques to generate a lot of ideas to solve a problem. The goal is to come up with as many solutions as possible and then picking only two or three of them based on our findings. A good practice is to draw a simple mind map to get a better understanding of the product we’re designing.

• Digital tickets: of course the first thing that popped into my head is the implementation of an in-app purchase system that allows users to get a digital version of their tickets so that they won’t have to deal with queues and vending machines another day in their lives! [see Elisa qn. 10; Anna, qn.6–10; Riccardo qn.10].
• Card: another option that was frequently mentioned by users is an hourly/daily/weekly card that simplifies the process of purchasing multiple tickets [see Emanuele, Ylenia, Elisa, Anna, Riccardo, qn.8]. You can easily purchase one in-app and then collect it at the booth and enjoy hopping on and off transports as much as you wish!
• Digital Card: I quickly realized that, since a digital alternative to physical tickets had been greatly appreciated by users during their past experiences, the same must be true for cards as well! Being able to use transports freely for as long as you want through a single QR code or barcode on your smartphone sounds pretty sweet, huh?
• Prepaid System: some users might prefer a system that deducts the ticket’s cost directly from their credit on the app, just like using a credit or an ATM card or a PayPal account that one can easily top up according to their needs [see Elisa, Ylenia and Riccardo, qn.9].

After coming up with some ideas to solve the main problem— and having a good time while doing so! — I felt like going a little further: adding features to the newly developed purchase method would give the app that extra oomph to take on competitors, so why not have a little fun with it and think about what users might like to see in the app in the future? To do so, I turned once again to the insight from my interviews to come up with valid solutions:

• Turnout Statistics: some users complained about past experiences pertaining to chaotic and overcrowded stations [see Emanuele and Anna, qn.4]. A nice workaround to help them avoid busy hours would be to provide turnout data so that they may choose the most convenient option, which is more unlikely to yield unpleasant surprises.
• Reviews/Ratings: implementing ratings and reviews for each transfer would be a good way for users to share their experience and read about other people’s stories. This way the app might prevent them from experiencing confusion and frustration due to lack of user feedback [see Emanuele, qn.6; Ylenia, qn.4; Elisa, qn.7].
• Ticket Library: another cool addition would be some sort of library to store tickets for those who like to plan ahead and purchase tickets beforehand [see Ylenia and Riccardo, qn.9], providing users with an easy and quick method to retrieve them when needed.
• Chat: who said that mobility apps can’t have a social feature? How many times did users have to seek help from residents? — Many, I tell ya! [see Ylenia, qn.3; Elisa, qn. 3; Riccardo, qn.4]. By adding a chat to the system, users would be one text away from reliable information delivered by residents or travellers with first-hand experience.

4. Prototype

For the fourth and last stage of the project, we had to pick one of our top solutions and develop it in a few hand-sketched screens: the goal is not to create a beautiful drawing, but to be able to shape our ideas into a paper prototype.

Since the main objective of the project is to come up with a way for users to purchase tickets using the app, I chose to focus on the first four concepts — the others are nice additions best taken into account only after the purchase system is implemented, so I decided to set them aside for the time being. Then I thought about combining digital tickets and a prepaid system, because I’d rather prioritize the purchase of single, digital tickets over multi-day cards for the launch of the new system — I feel like tickets are a necessary first step which multi-day cards would most likely follow up pretty quickly— and because I really liked the idea of a credit-based system.

Note: after I started prototyping, it just made sense to me to also have a ticket library — which will be referred to as the “My Tickets” section in app — to collect purchased tickets, so I ended up adding this feature as well.

The user clicks on the search bar in the home page (#1) — note that we also have two new icons on this page, which will be presented later on — then selects a starting point (#2), such as their current location, and a destination (#3): in the example that I made, the user would tap on the search bar, thus causing the keyboard to pop up, and then input their destination.

Once the user has selected both a starting point and a destination, the app will load all available transfer options (#4). The user selects one and is then prompted to the route screen (#5). By clicking on the newly added “Tickets” button, a new screen will appear with the total number of tickets — and their respective cost — that will be needed for that itinerary. They select one or more to purchase and then click on “Next”(#6).

Now that tickets have been selected, the user will need to choose a payment method (#7)— in this case, “Pay with Credit” — and then click on “Next”; then a detailed review of their fare would be displayed for payment confirmation (#7) and once they click on “Confirm” they can either review the purchased tickets, go back to the home page or to the route screen.

As mentioned previously, there are two new icons for both credit and “my tickets” sections in the home page. It just made sense to me to have those displayed right in the home screen, and I will briefly explain what the look and feel of these features are going to be like.

By tapping on the “My Tickets” icon, two lists with both purchased and validated tickets will appear (#1)— if there are any. By tapping on the eye icon, the user can visualize the QR code or barcode for the chosen ticket (#2): once they scan it to get on transports, they will be automatically prompted back to the previous screen, and the used ticket will now appear in the “Validated” list.

By tapping on the credit icon instead, users will land on a screen showing them the current credit (#1). By tapping on “Recharge!” they can either opt for a single recharge (#2) or for an auto-recharge option for which they will choose the frequency (#3). In both cases, they will be able to select their desired amount and their preferred payment method.

After their desired options and clicking on “recharge”, users will get to a payment confirmation form (#4). Once they click on “confirm”, they will receive a “thank you” message stating that the credit has been added to their account and they can either go back to the home page or to their credit section by clicking on the respective buttons (#5).

Final Words

This project was my first experience with the Design Thinking approach, and I must say that I had a lot of fun with it!

I enjoyed every single step of the process, but I can honestly say that envisioning and sketching out the mind map, as well as the paper prototype, really had me glued to my chair for hours; I could really feel my wheels turning while trying to come up with creative solutions to my users’ issues.

Being a perfectionist, the hardest thing that I had to learn was to focus on content more than the look and feel of the prototype, but I’m sure that I’ll get more and more used to this approach during the bootcamp.

Thank you for your time, and feel free to leave a comment with your thoughts!
Feedback is highly appreciated! 😃