Workflow

I usually use the D.School iterative UX method.

Empathise
Stakeholder interview
Market Research
User Interview
Define
Affinity map
POV
User personae
Ideate
HMW
User Map
MVP
Site map
Prototype
Sketching
Test
Wireframe
UI Design
High fidelity
Test
Problem Statement

Riders don't have safe spaces to park or charge their e-scooters

1.Lack of safety at the time of parking

2. Limited use of scooters

3.Riders are unable to do long distance trips

Empathise
Empathising with
the user
Once you see the darkness around, the light arises.
Quantitative Research

I conducted a quantitative research survey to validate our problem statement

We focused our survey on the use given to scooters and the limits at the time of using them.

Research
Survey
Tools
Google Forms
Participants (63)
E-scooters Facebook group members
Survey Results

Discoveries

With this survey we validated our assumptions; most users needed to solve battery and safety issues when using and parking their scooters, safety being the main issue.

Qualitative research

I talked with riders to empathise with their needs and POVs

To create the most accurate solution I needed to understand the POV, needs and frustrations of the users. So, I conducted a qualitative research interview.

Interview Focus

Scooter Use ·  Use Limits  ·  Use frustrations  ·  Use context

Interview
Semi-structured
Participants (4 people)
E-Scooter riders (20-45 years old)
Data and Analysis
Audio Recording,Transcriptions
Click to see the detailed interview plan

I learnt about the context of use and the users frustrations when using the scooters

After reading the interview transcriptions and analyzing the data by word codes I extracted these insights from user opinions.

Discoveries

1. Riders feel unsafe doing long trips with their scooters because of the danger of riding alongside cars

2. Riders feel their scooters could easily be stolen

3. Riders don't usually use their scooters on social ocassions becouse of the lack of spaces to leave the scooters

4. Riders usually have to carry safety ítems such as helmet or reflective waistcoast

5. Riders would love to use their scooters on every ocassion if they could

Quotes from the interview

Behaviour observation

I asked the users to perform some actions in order to study the manoeuvrability of the scooters

To find limits and confortable solutions for users I needed to see how they might act in manoeuvrability situations, I also needed to understand the timing of each action.

Actions performed:

1. Lift the scooter

2. Fold the scooter

3. Carry the scooter

Folding 1-3"

The folding task was easy and quick for users, which made me think of including that action in my UX.

Lifting and carrying

Average males users had no problem lifting their scooters to any height, but some females migh have problems doing so over their waist.

Users demonstrated that average scooters had a high-level of manoeuvrability

I discovered that users had no problems at the time of the manoeuvring with scooters, but it is true that extreme users might have them.

Market Research

I looked for competitors offering this services to find inspiration from their solutions and features

Looking around can bring inspiration, perspective and relevance. I analysed the competence using the criteria of functionality, safety and timing as reference.

Competence solutions comparison

I compared the main features to take the best part of each competitor and apply it to the design.

Main Inspiration

Bikeep, the timing approach

An amazing UX, taking just 10 seconds to park:

1. Put the scooter in the dock

2. Open the app or take out your card

3. Read the Qr code or swipe your card

4. Wait for a red light string to light up

5. Lock the scooter

6. Connect the charger & go

Quoob, the safety approach

A high level of safety, and usability. Takes 60 seconds to park:

1. Fold your scooter or bike

2. Open the app on the mobile phone

3. Scan the QR

4. Open the door

5. Place the scooter or bike inside

6. Connect the charger

7. Close the door

8. Use the app to close the locker

Patin Box, the space aproach

The best way to place the scooter and save space. Takes 60 seconds to park:

1. Fold your scooter

2. Place it inside the module

3. Raise the box up

4. Lock the box

Conclusion

I took the best parts of the designs to apply them to my design ideas.

Defining
Defining the problem
On a white board everything looks clear.
Affinity map

I clustered all the ideas and user quotes into groups to get an insight on the data

I extracted all the ideas and codes from the interview transcription, to understand the data and discover patterns and the importance of the ideas.

Final Clusters:

1. Scooter Use

2. Pains

3. Parking

4. Timing

POVS

I put myself into the users' and stakeholders' shoes to understand their POVs

This exercise was useful to explore perspectives and think out of the "designer's box".

User P.O.V.
User Personae

Personae creation allowed me to define and understand riders

User Persona

In this excersise I was trying to empathise with riders' unique perspective.

Problem aproach

After delving deep into the problem I had a pretty good idea of the needs and user requirements.

Ideation
Ideation
One idea lights a thousand candles
HMW

How might we create safe places to charge and park e-scooters?

A useful method to start the ideation journey, I especially enjoyed using it. It helped me ideate and order new features for the website that I had in mind.

HMW Questions

User Map

Understanding the users' processes is essential in order to develop your own.

From the discovery of the service to the goal action, each step was crucial for my understanding. I also mixed the HMW questions with the user map, and applied this rule: Where more questions are in place more focus is needed.

User Map

MVP

I created a diagram with all the ideas and features I came up with based on the research and riders' needs

I used the MVP method and classified the ideas taking as reference the impact and effort they would have by a diagram. This process made me discard some ideas and highlight others.

To make the table clear, I sorted the features and detailed them.

To ideate the final product, it was essential for me to see each feature in detail.

User Flow

I created the app and parking user flow

Once this was clear, it was easier to imagine how the user might interact with the app and how to approach the rest of the process.

Storyboard

After having ideated the software part it was time to think how the user might interact with the locker.

I created a storyboard to imagine the physical flow of users when using a garage.

Prototyping
Prototyping
Conversing with Ideas
Sketching

Knowing which features were needed from the product, it was time to start sketching.

I created sketches of the app and the locker to understand how the user might interact.

App Sketches

I sketched the whole flow to test the deisgn as soon as was possible in the process.

Locker Sketches

I sketched the E-garage itself with the features I had designed.

"Down the hall testing"

Before continuing I did some quick usability tests with friends and family with my paper sketches in order to quickly see if the flow was intuitive

Even though this kind of testing might seem useless, I discovered some mistakes in the flow of my sketches.

Draft Version

Based on the sketches, I created some wireframes and added some details to the locker sketches.

First Wireframes

With the first version I designed the flow of the app and created a usable prototype with XD to test it before designing the whole UI.

Locker draft version

I created a draft version of an E-garage based on the sketches.

Testing the flow

I ran a usability test to see whether the flow I had designed was working or not.

I asked coworking fellows to join me in the usability test.

Test stages:

  1. Introduction, Chitchatting
  2. User usage of the prototype, I asked them to "think aloud"
  3. User Feedback
Semistructured
Interview

Participants (3)
Coworking fellows.
Tools
Ipad, Video Cameras

Discoveries:

  1. The hierarchy wasn't clear. The texts contained in the UI didn't clarify where exacly the user was in the app
  2. The colour gerarchy didn't focus user attention were it neded to be, causing confusion.
  3. The scanner and location button had an icon that confused users.
  4. The onboarding wasn't  clear enough.
  5. The chosen outlay didn't fit user needs.
  6. The confirmation steps of the process confused users.
UI Design

Following the research bases I created the UI styleguide

I wanted to reach an elegant but also technological look in order to reache out to a huge range of audience.

UI Styleguide

High Fidelity prototypes

I asked to a 3D artist to bring the E-garage hardware into reality, or at least into a realistic render!

Having the renders and the usability test in mind, I created the app's high fidelity prototype and flow.

Launching main user flow

8. Door Closing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dolor turpis, dictum a efficitur in, aliquam eget velit. Sed efficitur eget risus nec tristique.

1. Login

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dolor turpis, dictum a efficitur in, aliquam eget velit. Sed efficitur eget risus nec tristique.

2. Garage Map

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dolor turpis, dictum a efficitur in, aliquam eget velit. Sed efficitur eget risus nec tristique.

3. Pick a garage

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dolor turpis, dictum a efficitur in, aliquam eget velit. Sed efficitur eget risus nec tristique.

4. Scan the Qr

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dolor turpis, dictum a efficitur in, aliquam eget velit. Sed efficitur eget risus nec tristique.

5. Payment & Confirmation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dolor turpis, dictum a efficitur in, aliquam eget velit. Sed efficitur eget risus nec tristique.

6. Door opening

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dolor turpis, dictum a efficitur in, aliquam eget velit. Sed efficitur eget risus nec tristique.

7. Park

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dolor turpis, dictum a efficitur in, aliquam eget velit. Sed efficitur eget risus nec tristique.
Prototype

Try the prototype yourself and help me gather data!

Learnings

This project taught me to pay attention to detail and context in my research.

Thanks to this project I discovered that context is vital in usability tests, and also that small details such as the colour selection can drastically change user experience. I have also learned the importance of collaboration in the ideation stage, it can upgrade the project to a high level. By doing the project from the start until the end, I really understood the depth of UX Design and the possible R.O.I. it can bring.

Introduction
Empathise
Define
Ideate
Prototype
Results