Adobe XD Challenge

18 days, 18 challenges. Learn UX, UI, and prototyping with Adobe XD.

Role

UX, UI, Prototyping

Category

Web

Timeframe

2018

Role

UX, UI, Prototyping

Timeframe

2018

Overview

I wanted to improve my prototyping skills so I participated in the daily challenges set by the Adobe team on Behance in September and November 2018. I had been using Adobe XD as a UI Design and Prototyping tool for more than a year but wanted to use these challenges as a structured way to learn some of the new features of the tool that had just been released. Also, an excellent community has developed on Slack around these challenges which has been a great opportunity to connect with people, share designs for feedback and inspiration, and give and receive advice.

During these two sets of challenges, I designed and prototyped 18 solutions over the course of 18 days. Some of these included: an e-commerce product review experience, designing and prototyping a few screens for a photo editing app, and a webpage for an event and prototyping an interaction for the booking experience.

For this case study I will focus on the process and outcome of designing and prototyping the experience of requesting a taxi/ride-share in a mobile app.

Process

These challenges were designed to be completed in just a couple hours so the deliverables were dependent on the requirements. For this challenge the brief was to design and prototype a mobile app to order a taxi, display the location of the car in real-time, and rate your driver.

I started by exploring and reviewing some similar apps for inspiration, such as Uber, Lyft, Google Maps, and Apple Maps. Most apps, including transportation apps, follow a similar design pattern of placing a search bar near the top and content below. However, I was intrigued by Lyft's and Apple's decision to place the search bar in the lower third of the screen.

Drawn wireframe concept for the homepage.

With the ever increasing size of mobile phones, search bars near the top of the screen are becoming harder to reach. After doing some quick research about how users hold their phones and some mobile reachability guidelines, such as Fitt's Law, I decided to experiment with a simple layout designed for one-handed use, placing the important action areas in the lower third of the screen. I created an overlay sheet from the bottom that could change and grow depending on the information needed at the time.

Outcome

I designed eight screens to create the user flow of this taxi/ride-sharing app concept. The flow goes through searching for and setting a destination, selecting the type of car, choosing a driver, rating the ride, and a summary of the trip. Each screen uses the same overlay sheet that changes depending on the context.

Set destination as Home

Select driver

Wait for pickup

Review your trip

Once the screens were designed, I used triggers and transitions to create a working prototype of the app. This allowed me to show the flow through the app and prototype some animations for the interactions.

Over the course of several weeks during these challenges, I learnt a lot and improved my UX, UI, and prototyping abilities. It was great to be able to create some concepts for a wide range of user, products, and devices. I also met some awesome people, gave and received some really useful advice and feedback, and helped others with some questions they had regarding using Adobe XD for UI design and prototyping.

One particular highlight was meeting a couple younger designers from New Zealand that reached out to me for some feedback on their designs. I was very grateful to have the opportunity to provide them with some informal, and hopefully helpful, mentorship and advice during the beginning of their careers as designers.

View all my challenge submissions on my Behance profile here and here.