ADD A FEATURE: User-based research approach to incorporate a new feature in an existing app.

Design Thinking Approach — Case Study

Charlotte Botermans
Feb 4 · 7 min read

After almost a month at Ironhack and already many projects behind us, we were on-boarded on our second individual project, which consisted in adding a new innovative feature to an existing app, either on Android or iOS, in only 4 days.

SCOPE

The briefing for this project was the following: “ Add a budget selection in Hopper”. I first needed to validate the hypothesis and determine if there was a real need for this new feature to be incorporated in Hopper.

To tie back the feature/solution to a real issue, I conducted some user research, using interviews and a short survey. On top of that, I analyzed the market to evaluate the competition and its offer. Once these insights gathered, I could develop and design the new feature and build mid-fidelity prototypes, that I tested among users.

After that, I moved on to building high-fidelity prototype on Sketch, that I tested again to assess the multiple design variations. Ultimately, I used InVision to make the prototype interactive.

PROCESS

Similarly to my previous individual project, I used the Design Thinking Framework to guide me in the process, and thus followed 4 main steps: Discover, Define, Develop, Deliver.

1-DISCOVER: RESEARCHES & RESULTS

As I was handed an already settled feature/solution, which is supposed to happen in phase 2 (Define), I had to make sure there was a need for it. Therefore, I went back to the first phase (Discover), ran some qualitative interviews (5), and sent out a short survey (70 respondents), inquiring about traveling habits, vacation planning and decision factors when looking for a flight. This allowed me to gather valuable insights and pinpoint real problems using an affinity diagram to cluster all the information: people are price-sensitive and struggle in finding the best deal/price, because they want to enjoy their experience while on vacation.

Interview & Survey’s insights

Indeed, most of the respondents state that price is a decision factor when looking for flight. Also, people mentioned that they usually plan a trip based on a predefined destination, but in the case they don’t find any flights on their budget, they would consider changing dates or destinations to stay within the budget. And most importantly, the majority of the respondents confirmed that, having the opportunity to set a budget constraint before starting their flight search would definitely help them in making easier and smarter decision. Knowing this I was thus able to link the feature to their needs: add a field to define a budget before the search, and give alternatives (in terms of destinations) within their budget range, if there are no flights for their destination.

2-DEFINE: USER PERSONA & PROBLEM STATEMENT

Having analyzed and synthesized the results, I moved on to creating a user persona, characterizing the target group I will be designing for. I have thus created Lola, who I kept in mind as a reference during the whole designing process to see how I could help her achieve her goals and address her frustrations. She wants be able to travel with her friends/family and enjoy her experience while abroad.

After that, I was able to make a clear problem statement:

People/Travelers need a way to plan their trips based on a specific budget because they want to enjoy their experience on vacation.

It guided me in throughout the whole designing process, by keeping in mind the main pain points I was addressing in this project.

3-DEVELOP: SOLUTION, PROTOTYPE & TESTING

As my researches validated the initial hypothesis, I jumped into sketching and designing the new feature into the existing design of Hopper. I first made some low fidelity paper prototypes, which I tested and iterated, then moved on to creating high fidelity prototypes, which I tested as well, in order to gather more realistic feedbacks. I decided to skip mid-fidelity prototypes, because I felt like I had a good brand feel already, and that high-fidelity prototypes would bring me more valuable insights.

No need to say, it was a real challenge to work on an existing design, as the incorporation needed to come in smoothly. Therefore, I analyzed the look and feel of the interface to get a better idea of how I was going to proceed. Also, I decided to focus on designing on an iOS system because most of the people interviewed were iOS users.

In order to make a valid choice in terms of design, I analyzed the apps of the competitors, such as Kayak, Expedia, Booking, etc. as well as other businesses offering a somewhat similar service as Hopper.

First observation, is that most of the competitors’ apps, don’t have the feature, and thus don’t allow budget definition at the beginning of a search. This being said, digging a little further on how the competition was displaying a budget/pricing option, I noticed it usually uses a sliding scale, but hidden within the filters.

Having these informations in mind, I decided to add the budget definition feature at the very beginning of the search in Hopper. I went for a sliding scale, keeping the original color scheme and feel of the app, because it seemed the most appropriate and common way to incorporate such a feature.

On top of this feature, I decided to incorporate a destinations suggestions feature, because it was one of the main insights I gathered from my survey. If they cannot find flights for their target destination within their budget, people would consider changing destination if it remains in their price range.

The ideas being more clear and concrete, I started sketching and testing my prototypes in order to gather feedbacks from my target group. This allowed me to test different designs and layouts, which helped me in making an established choice for my final prototype.

You can see below some iterations on the Search page, where I decided to integrate the budget definition feature. Indeed, my initial design did not really fit into the design of the app and did not comply with users’ expectations either. Therefore, after many tests I managed to create two features that blended into the flow.

First, I tried various options to display the budget selection feature; going from a drop down, to a round sliding scale, to in the end choose a squared sliding scale, which was more consistent with the existing design of the app.

Low-Fidelity prototypes — Budget Definition Feature
High-Fidelity prototypes — Budget Definition Feature

I also tested the second screen, which included the destination suggestions feature, many times. The usability tests also allowed me to improve the flow by adding information to guide the users and at the same time enhance their experience. Indeed for my second feature, I had to give the most information possible to users in order to make the navigation fast and easy. You can see on the screen on the right, that I decided to combined my two ideas into one screens giving better guidance to users. Also I have played with the white spacing and alignment of the elements of the screen, in order to have a smooth blend into the existing flow. Lastly, I kept the informal writing, using emojis and laid back formulation, to really stick to the app feels.

High-Fidelity prototypes — Destinations Suggestions Feature

4-DELIVER: THE FINAL APP

After testing and iterating, I was able to come up with a final High-Fidelity prototype (see below).

The scenario used to develop the flow of the prototype is the following:

You are Lola, and you have to book a flight for Paris because you want to surprise your brother on his birthday, which is the 23rd of February. But, in order to enjoy your stay in beautiful Paris, you want to keep a low price for your flights. Therefore, you set a target price of 80€ before starting your search. Unfortunately, Hopper couldn’t find any flights for Paris on that price, and then suggests you to either change your budget (mentioning the next flights is at 85€), or to change destination. Since you really want surprise your brother, you decide to increase your budget up until 100€ in order to have more flight options, but not blowing your budget. With the help of the color code, you are able to see which days are the cheapest, therefore you decide to take the outbound flight from the 21st of February at 45€, and the return on the 24th at 43€. Then you finish the purchase.

LEARNINGS

Throughout this project, I really realized the importance of a change, even if minimal, on an interface. Indeed, changing a layout or the feel of an app can drastically impact user experiences. Each detail counts and that is why it is of prime importance to keep the target group in mind all the way, but also to test and iterate as much as we can, because users are our databases.

Also, market research are extremely helpful to determine what the market/competition offers already, and how do they offer a service/product.

In the next steps, I think would need to test all potential scenarios in order to make sure the app answers users’ needs in every situation.

Charlotte Botermans

Written by

UX/UI Designer, previously e-Business Analyst in a Data Driven Digital Media Agency

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade