TRIO

Project Overview

The Process

1. Define the User

When determining the user, I examined the existing car rental systems, conducted interviews with users to determine their needs of users, prepared empathy maps, and identified the appropriate personas for the application.

1.₁.User Interview

I conducted user interviews to determine the characteristics of the target audience and determine the needs of users.

I have prepared open-ended questions to determine user needs. I asked these open-ended questions to three people and got their answers from them. At this stage, I have prepared questions that will make them tell their own stories in order to get answers that will satisfy my need from them.

From the link here, you can see the drafts of the questions I have prepared and the results of the interview with three people.

As a result of these interviews, I have created the appropriate persona for the application I will be designing.

I identified the needs of the people I interviewed and made these needs an item.

User Needs

• He needs a scooter for quick transport in traffic. (Interviewer 1)
• He loses a lot of time on the money loading part, he has to start over every time he loads. When loading money, the card must be saved and the design simplified. (Interviewer 1)
• The flow of the application should be simplified and its use should be facilitated. (Interviewer 1) (Interviewer 2)
• By adding live help, instant solutions to problems that occur within the application can be found.(Interviewer 2)
• The ability to rent multiple scooters with one phone. (Interviewer 3)

1.₂.User Persona

I created a persona to focus on the target audience where we produce the product. I took the research I did while creating a persona into the center and created a persona that fits it.
My staff is a person who has a regular working life in general and whose time is valuable to her. That is why she is a persona who wants to devote time to his family and friends, saving her time in all spheres of her life.

1.₃.User Journey Map

I’ve mapped the user’s journey. I used the persona on the user journey map. Thanks to this user map, I have seen where the customer will interact with the product. Thanks to the user journey map, I can see how the customer’s feelings change when using the product.

2.Ideate

2.₁.Ideation Concepting

I have collected all the problems faced by users during the idea stage. I’ve made a list of these problems. I have chosen the most necessary problems in order to find solutions to the most necessary problems. I have been looking for solutions to these problems in the HMW section.

2.₂.HMW Questions and Choose Best Ideas

Insight: There may be a solution to rent multiple scooters on the phone.

HMW Question: How can we add multiple scooters with the same device?

• There may be a separate section in the menu section and a section for adding new scooters.
• On the registration page, the user may be asked how many scooters to rent.
• By granting two or three half-sign-in rights, such as Netflix, it can be ensured that different people can rent from the same device.
• You can go to the second scooter rental section with a small sign next to the first rental on the main screen.

Insight: I would like to solve problems with the application or scooter at this moment.

HMW Question: How can we provide live assistance?

• It can be opened with a tab during travel.
• A button on the main screen allows you to switch to the live help screen.
• The live help tab can be added inside the menu section.
• The live help system can be both by phone call and by messaging.

Insight: The bicycle renting system directs me to google Maps to rent a bike. It’s hard to Decouple the connection between these applications.

HMW Question: How and where will we rent the scooter?

• The user can rent the scooter by going to the scooter he found on the map.
• The user can start the rental process by reading the QR code when renting the scooter.
• When renting a scooter, the code on the scooter can be entered into the application and start the rental process.
• The map where the scooter is located can be directly on the home screen.

Insight: The application is a bit complicated to use.

HMW Question: How can we go to simplification in design?

• It can be simplified by using fewer steps to rent.
• Excessive and unnecessary partition usage can be avoided.
• When designing the UI, the design should be made that does not distract the user’s attention.

I decided to use the solutions highlighted in green on the top when designing the application. I used these solutions when creating the flow of the application.

2.₃. Flow

3. Prototype

At this stage, I determined the flow of the application, made sketches, designed the Ui and created the prototype.

3.₁.Wireframe

Sketches

As a result of the research, I moved to the design stage by making sketches. I started the design phase with sketches and easily made a road map for myself. I use hand sketches in all my designs because hand sketches are the fastest way to reflect what we have in mind.

Mid-Fidelity Wireframes

I used Miro application to prepare wireframes.

After making the hand sketches, I prepared wireframe for quick transfer to a computer environment. I have determined the location of images and articles with the wireframe I have prepared. I have determined the layout of all the pages. I’ve already made preparations for the prototype.

I connected the wireframe together. In this way, I can see how the flow of the application will be. I made a low-quality prototype that I made for users to test. I have made changes to the application according to where users are forced.

3.₂.Uı Design

I have referenced user interviews and research I have done for user interface design.

As a result of my research as a typographer, I decided to use Spline Sans. At this stage, I referenced my research and other brand reviews. In the typography research, I have done on the Internet, I have preferred the most useful and simple one.

As a result of a simple and convenient design for user interviews, it was effective in my interface design. I didn’t want to include unnecessary elements in my design. I wanted the user to do the operation they wanted to do as soon as possible.

I referenced the scooter in choosing the color palette. I have created 4 different color palettes for this selection. The color palette in the Ui set below was the last color palette I decided on. At the same time, I wanted to create a choice of color plates with nature, since the electric scooter system is useful for nature.

I wanted to illustrate the section describing how to use the scooter in the application myself. I started the design with a very quick hand sketch. After scanning this sketch, I transferred it to the computer. I turned this sketch into a digital product using Adobe Illustrator and Photoshop.
Using self-produced illustrations when designing a mobile application will improve the quality of the work we have created. That is why I have prepared these illustrations.

I have made the illustrations I have prepared suitable for the mobile application. I have placed these illusions inside the mobile application with the Figma application.
On the bottom side you can see the appearance of these illustrations in the application.

3.₃.Prototype

When I got to the prototype stage, I transferred the frames I had prepared in Miro to Figma. I created all the frames one by one for the prototype. After that, I connected the frames with the feature of linking the frames in Figma. I revealed the first prototype of the product I designed. You can check out some screenshots below.

You can reach the prototype I made at the prototype stage by clicking the button below. You can tell me your thoughts about the prototype by contacting me.

4. Test

4.₁. Usability Test

Test Purpose

I moved on to the testing phase of the product for which I designed the MVP. My goal at this stage is to give a specific scenario to people who will rent scooters and to identify where they have difficulty in this scenario.

Find Target User

While determining the persona, I did a reusability test with the people I interviewed during the design phase of the application. I tested these people for usability with guerrilla tactics.

Prepare Scenario

I gave the interviewees the task of finding a scooter and renting it.

Observe and Collect Data

You can review the notes I took during the interviews in the section below:

• I realized that fast loading options can be added in the system money loading section.
• I realized that in the live help section, help can be made with a telephone connection.

4.₂. Optimization

I added a quick money loading option to the wallet section of the app. From now on, they will be able to add a certain amount of money with a single click.

In the live help section, I saw that people had a hard time texting, and I realized that they could get help more easily with the call option, and I added a phone option to the live help.

Final Thoughts

With the last prototype created, I followed the project flow that I prepared at the beginning and finished the project. I made the MVP version of Trio ready for broadcast.

You can see the other projects I have prepared in the section below. You can reach me below to contact me.

View Other Projects

• LinkedIn
• Behance