Perrin Anto. Design.

Aira-Old-2

 
Dribbble Mockup 1@4x.png

Aira: Commuting Through The Skies

OVERVIEW

We were tasked with the prompt to use autonomous vehicle technologies to solve a problem for people. Aira is an on-demand, autonomous, passenger drone service that solves the issues from multiple mode (multi-modal) transit, creating a seamless door to door commuter experience.

TEAM

Perrin Anto Jones / Jodie Clothier

ROLE

User Researcher, UX/UI Designer, Interaction Designer and Product Manager

TIMELINE

12 Weeks

TOOLS

Marvel, Abstract, Sketch, Adobe Illustrator, Invision, Principle, After Effects, Framer, Mapbox


OVERVIEW OF PROCESS

 

PROCESS IN NUMBERS

Aira Testing Methods.png
 

DESIGN PROCESS AND CONCEPT VIDEO

 

Phase I: Discover

OVERVIEW

For a project, we decided to focus on the opportunity area of commercial aerial autonomous vehicles as a means for multi-modal transportation. The “Air Taxis” utilise Electrical Vertical Take Off and Landing (EVTOL) Vehicles to easily maneuver cityscapes as well as reduce noise and air pollution. Through my user research, I wanted to understand how multi-modal transportation is used in the context of perceived efficiency, convenience, reliability and affordability and its effect on the door to door experience. With the actionable insights developed in the end, I could continue to the design phase with an aligned and informed problem.

RESEARCH METHODS

Research Methods.png

SYNTHESIS METHODS

Synthesis Methods.png
 

FOCUS GROUP PHOTO (INCLUDING DONUTS AND SNACKS!)

FocusGroup.jpg
 

KEY OPPORTUNITY AREAS

Trust — Through human connection and clear communication, trust is an area of improvement needed for new multi-modal transit solutions

Wayfinding — Helping people easily find their way from a drop off to a pick up, even if in the same station, is essential to people having a smooth multi-modal experience.

Payment — If payment for an entire multi-modal trip was payable at once, it would reduce stress and concerns changing between modes.

Reliability — This component which wasn’t in my original research goals is the key to people using your system. Be reliable and communicate it clearly. Always have a backup if something goes wrong so that you don’t ruin the user experience.

Efficiency — Clearly communicate with people the most efficient route. Also possibly include a ticker that stores the time they have saved with your service.

Choice — Give people the clear choice of how they get to different legs of a trip.

PROBLEM STATEMENT

Busy commuters need a seamless multi-modal transit solution because current transit infrastructure experiences “the last mile problem” with an inability to provide efficient, convenient, and reliable multi-modal choices and wayfinding between modes that make the current door to door experience cumbersome.

 
 

Phase II: Design

CONCEPT EXPLORATION

We then began rapidly ideating a number of concepts before narrowing in on a select few and creating user flows, user stories and storyboards to define user requirements. We felt that the chosen three concepts had enough breadth for us to experiment with a variety of user interfaces and interactions to help later inform our design choices for our final chosen concept. These concepts were:

AiraSolo — An on-demand autonomous passenger drone service.

AiraShare — An on-demand autonomous rideshare drone service.

AiraScenic* — Automated drone tours providing world class aerial views for locals and tourists alike.

*Although AiraScenic is not directly addressing the problem in our research, we saw opportunities to learn from designing for a different problem space in the design round.

Overview of storyboards, user stories, and flows developed for each concept

Overview of storyboards, user stories, and flows developed for each concept

 

OVERVIEW OF DESIGN PROCESS (TESTING IN LOW FIDELITY AND REFINING)

Overview of Testing.png
 

INITIAL WIREFRAMES (LET’S JUMP IN!)

AiraSolo Initial Wireframes

Wireframes 1.png
 

AiraShare Initial Wireframes

Wireframes 2.png
 

AiraScenic Initial Wireframes

Wireframes 3.png
 

PAPER PROTOTYPES V1

AiraSolo V1

AiraSolo V1.png
 

AiraShare V1

AiraShare V1.png
 

AiraScenic V1

AiraScenic V1.png
 

USER TESTING ROUND 1

Screen Shot 2019-02-28 at 2.08.47 pm.png

Think Alouds, Interviews, Observation,

4 Participants

After testing each paper prototype we decided to continue iterating AiraSolo and AiraShare based on the feedback and recommendations of our users.

REFLECTION

This was our initial round of think aloud testing in which we tested a variety of interface styles using different concepts to gain a high level understanding of what types of interfaces user’s found intuitive. We conducted relatively unstructured think aloud tests with only a small number of set tasks, placing emphasis on trialing the concepts with participants. This was followed up by a short interview afterwards to understand not only their pain points but what they wanted to see. We filmed all the sessions and then reviewed the footage to complete our observations and analysis. Whilst effective, this method was time-consuming and we decided that in the next round we would also be taking notes throughout the testing to help speed up the process. After synthesising the results from our think aloud testing we decided to eliminate AiraScenic, as we felt we had utilized this concept as best we could to experiment with different interactions and interface styles.

 

PAPER PROTOTYPES V2

AiraSolo V2

AiraSolo V2.png
 

AiraShare V2

AiraShare V2.png
 

USER TESTING ROUND 2

Screen Shot 2019-02-28 at 2.09.08 pm.png

Think Alouds, Interviews, Observation, A/B Testing,

5 Participants

By comparing screens across the two different interfaces through A/B testing we were able to understand the differences between a universal card based interface vs an innovative circular based interface.

REFLECTION

This round of usability testing was a lot more streamlined as we were only testing two concepts, the goal was to test these two prototypes with similar functionality but vastly different interface styles to learn how users interact with these different interaction models and how to apply them in the next round of iteration. We did this by conducting A/B testing on the screens that had overlapping functionality e.g booking, route overview and navigation. AiraShare focused on a more universal card system whilst AiraSolo explored a circular interface with an emphasis on its compass wayfinding functionality. We created a set of concrete tasks and a series of think aloud tables to make it easier to analyse comparatively. By comparing the consistent screens across the two different interfaces we were able to understand user’s mental models and how we could explore bringing more intuitive card features into AiraSolo to make content more digestible.

 

LOW FIDELITY DIGITAL PROTOTYPES V3

We scaled up from paper prototypes to digital prototype in this round as we found that it was difficult for participants to understand the circular interface as paper prototypes. As we iterated this interface we ended up creating two versions low-fi digital prototypes as the circular design was very unique and there wasn't really any existing interfaces or familiar systems we could reference. We decided to test the circle concept through some A/B testing!

 

AiraSolo V3A

V3A.png
 

AiraSolo V3B

V3B.png
 

USER TESTING ROUND 3

Screen Shot 2019-02-28 at 2.09.23 pm.png

Contextual Think Alouds, Observation, A/B Testing,

Heuristic Evaluation,
UEQ & SUS Surveys,
8 Participants

We used a variety of qualitative and quantitative methods to learn which aspects were most successful. Whilst there were similarities between both it was clear in our results discussed above that V3B was the more intuitive interface and had greater potential.

REFLECTION

We iterated the prototype and decided to scale up from paper prototypes to digital prototypes in this round as we found that it was difficult for participants to fully understand the circular interface with paper prototyping. As we iterated this interface we ended up creating two low-fi digital prototypes of AiraSolo in Sketch as we wanted to these different variations. Since the circular design was very unique, there wasn't really any existing interfaces or familiar systems we could refer to which is why we chose to iterate two variations. We used a variety of qualitative and quantitative methods to learn which aspects were more successful, in addition to the think aloud testing we also used the SUS and UEQ questionnaires to collect quantitative results to support our qualitative think alouds and aid our A/B analysis. Whilst there were similarities between both it was clear in our results discussed above that V3B was the more intuitive interface and had greater potential. V3B demonstrates a more cohesive interface by combining elements cards in our circular layout which helped present information in a more intuitive way versus V3A.

 

LOW FIDELITY DIGITAL PROTOTYPE V4

AiraSolo V4

Based off the results from our prior round of testing we iterated V3B into V4. Due to its similarities to the previous version as we only tweaked and refined some of the interactions between V3B and V4 before moving into higher fidelity.

V4.png
 

Phase III: Deliver

MOVING TO HIGH FIDELITY PROTOTYPES

With user research and extensive testing with 44 walkthroughs, we progressed from low-fidelity on to high-fidelity prototyping. We aimed to take our user-driven concept to a professional product with the three testing methods found below.

OVERVIEW OF DELIVER PROCESS

HighFi Process.png
 

TESTING ROUNDS OVERVIEW

UserTesting4Dark.png

Think Alouds, Observation, Interviews,
Contextual-Walkthroughs,
Expert

Critiques,


13 Participants

In our final rounds of user testing, our participants accomplished tasks with ease and found the experience intuitive and visually appealing, displaying the success of a user-driven iterative design process. This then allowed us to finalise our interface.

This round of testing was interesting as we had a mix of regular users as well as expert users. The regular users had very little issue in interacting with our interface and found it overall to be very intuitive and aesthetically pleasing. Whilst the expert users could also successfully navigate the interface they had more concerns regarding the interaction models and their affordances, a number of them also criticised the information architecture of some screens.

Whilst the mix of participants made for more disparity in synthesis of results it was highly beneficial to us, in particular, the expert users feedback helped us address concerns that may have taken many more rounds of testing with regular users to uncover. Since we did not have that time it was great to be able to accelerate our usability testing. Overall it was a successful round of testing however we did have a few issues with Invision which made some parts of the prototype quite buggy, particularly concerning interactions such as swiping, which was frustrating but still did not have a major effect.

 

ITERATION OVERVIEW

ITERATIONS.png

The Final Design

 

INTERACTIVE PROTOTYPE

Aira was built to meet user needs and address current pain points with transit. Using a holistic and iterative design process, we were able to narrow our design down to the critical features. We've used Principle, After Effects, and Framer to demonstrate some of the functionality.

 
airabookingcrop.gif
 

Multi-Modal Trip Selection

Want to get home with the fastest transit option? We speak your language. Transit destinations and route options broken down in an easy to read manner.

 
 

Trip Overview & Directions

Your trip at your fingertips. Browse through the legs of your trip, find additional directions and options, and customise how you want your navigation experience.

ezgif-4-a117f781bbe9.gif
 
ezgif-4-89601359c8f4.gif
 

Compass Navigation

Ever get lost trying to figure which direction to turn? We’ve designed a more intuitive compass navigation system that clearly points you in the direction of your path.

 
 

End of Trip & Comparisons

Finish your trip with more transparency. We empower the users with opportunities for feedback and upfront comparisons of time saved over other modes of transit.


ezgif-4-af24585dcdba.gif
 

SOME CHALLENGES ALONG THE WAY

  • Managing conflicting feedback from users between different iterations. Does giving the user what they want always fix the problems that they are having? We had to strike the balance between using user-driven insights for our design decisions while also keeping heuristics and the overall flow in mind. The last thing that we wanted was to introduce our own bias being so close to the project into the design.

  • Communicating high fidelity interaction concepts during the low fidelity phase. With wayfinding compasses that change direction with you to more bespoke transitions between screens, the signifiers towards actions and abilities on the app for the user were sometimes confusing. As designers, our ability to think in a dynamic concept is often stronger than our users, but how can we still get good feedback on high fidelity ideas without going into high fidelity?

  • Turning smaller samples of data collected in user testing rounds into informed design decisions. Each round we carefully selected our methods to get the best qualitative and quantitative data from the user testing. Sometimes with limited participants in a usability study though, there are outliers that don’t represent the whole demographic. How does one identify those outliers effectively?

REFLECTION

In our final round of user testing, our 8 participants accomplished tasks with ease and found the experience intuitive and visually appealing, displaying the success of a user-driven iterative design process. Our team learned a great deal about our target demographic, what drives positive experiences for them, and how to take those insights from synthesis to a fully realised product. We hope you enjoy Aira as much as ourselves and our users.