Car2Share

 
Screen%25252BShot%25252B2020-02-24%25252Bat%25252B7.51.53%25252BAM.jpg

Based on user feedback, I iteratively designed and implemented a consolidated car sharing application, Car2Share.

I completed a 12-weeks part-time User Interface Design course at BrainStation in Fall 2018 as a Brand Ambassador to upkeep my UI Design skills. The course covered key topics such as interaction design, visual design, product workflow, prototyping, and typography. I developed and designed a mobile application, from conception through to a clickable prototype, using Sketch & InVision to transfer user requirements into elegant and intuitive digital interfaces.


Skills and Tools
User Research
UX Design
UI Design
Usability Testing
Cognitive Walkthrough
Sketch
InVision
Pen and Paper

Stakeholders
Members of Car Sharing Community, Car Sharing Services

My Role
User Researcher
UX Designer
Usability Tester

Team
Myself, Project Course for BrainStation’s User Interface Design Course

Project Duration
12 weeks


My Design Process

Design Process.png

The Challenge

Through user interviews, some pain points were identified.

This project idea stemmed from numerous conversations between coworkers and friends who are also in the same boat: millennials who don't own cars and use car sharing apps for Costco groceries run, daily commute, or weekend road trips. 

When we are simply looking to book a car to drive across town from Point A to B, we are often faced with switching back and forth between applications to search for an available car nearby. 

When it comes to planning road trips, we end up sitting down with Excel spreadsheet to calculate the most cost-efficient options for trip planning, because these companies all have different pricing and business models.

Trip planning should not require pencil, paper, and a calculator. Or switching back and forth between car sharing apps.


Screen Shot 2019-09-29 at 10.12.33 PM.png

discovery

SWOT Analysis allowed me to perform further evaluation on the competitors in the market. For the scope of this project, I limited the car share vendors down to: Car2go, Evo, and Zipcar. A lot of strengths were identified while analyzing each of the company’s business model and their app features. I saw an opportunity for a scalable solution for this project as Car2go and Zipcar operate on a global level and are available in major cities across the world, and they both provide open APIs. Some of the threats I foresaw were: Evo does not provide a public API as of now, which could be a potential show-stopper for future implementation of project to include Evo. As well, it’s operated by BCAA and available only within Vancouver, thus may not be included if this project scales globally. Having membership to all three car sharing vendors means that users can use different cars based on their various trip needs.


User Personas

I began User Research by conducting informal user interviews within my network: colleagues in the office of various ages and backgrounds.

I found that most people who rely heavily on car sharing apps and voice similar pain points were mostly Millennials who use them to commute, run errands, and go on weekend trips. Therefore, I identified them as my target users.

I built two personas: the Daily Commuter and the Weekend Warrior, to help me stay focused on the users and their needs.

Screen Shot 2020-02-08 at 4.17.46 PM.png

car2share-02.png
car2share-03.png
Screen Shot 2020-02-09 at 3.24.36 PM.png

low-Fidelity mockups

After outlining User Needs and User Goals, I began sketching out User Flow with pen and paper.

Low-Fidelity mockups allowed me to iterate quickly and identify/test out components for my product prior to designing. I validated the user flow with potential end users, and iterated the design based on user’s mental models and feedback.


Screen Shot 2020-05-07 at 9.38.18 PM.png

UI Library

I referenced the Material Design Guide and the Color Tool for picking colours, font, and Android components.

I utilized Car2go Application’s Library Sketch Kit for the Car2go components and created Evo and Zipcar’s pins based on the Car2go’s car pin.

Moodboard
I researched on Dribbble for other inspirations and built my Moodboard for this project: https://projects.invisionapp.com/d/main#/projects/boards/6311633


Usability Testing

After the first iteration of design, I conducted 6 Usability Testing sessions through Cognitive Walkthroughs with a few potential end users to watch them interact with the prototype while thinking out loud. I had a few key tasks outlined for features that needed to be tested.

I was wanted to understand:

  • Will the user try and achieve the right outcome? Will the user successfully find the most cost-efficient vehicle option based on their trip needs in the Trip Planning feature?

  • Will the user notice that the correct action is available to them? Will they figure out with ease how to quickly filter for available cars nearby based on their trip needs?

  • Will the user associate the correct action with the outcome they expect to achieve?

  • If the correct action is performed; will the user see that progress is being made towards their intended outcome?

Conducting the Usability Testing was eye-opening and helped me identify and address challenges that were addressed by the participants, and users provided invaluable feedback that helped with the second iteration of my designs.

MVIMG_20200210_141801.jpg
MVIMG_20200210_142206.jpg

Screen Shot 2020-02-23 at 7.18.03 PM.png

Car2Share Home Page + Booking a Car

1. Upon login, the user lands on the home screen, which shows the types of cars available near them.

2. User interviews demonstrated that users find it most convenient to filter the types of cars in pill tabs in buttons-form, with darkened button indicating that the choice is currently selected.

3. Circular pink “+” button takes the user to the Trip Planning feature of the application.

4. And now, the user chooses to see cars from all 3 car sharing apps onto one screen, and decides to book a Zipcar instead because they plan on returning to the same area after the trip - a key business model of Zipcar.

5. The user is able to tell which car is selected by the car image in the pop-up on the white box which displays crucial information on the vehicle (based on user interview and research): how much fuel the car has, location of the vehicle, and the cost of car rental.


Screen Shot 2020-05-07 at 9.39.50 PM.png

Trip Planning Feature

6. Once the user is in the Trip Planning feature of the application, the user answers a couple of questions which allows the application to help the user calculate the most cost-efficient option based on their trip needs.

This page lets the user input the pick-up and drop-off locations, times, and dates of booking the vehicle.

7. Clicking on the blue highlighted time display takes the user to a pop-up modal for time and date selector.

8. Pagination and progress level at the bottom of the screen indicates what stage the user is currently at in this workflow: we can see there are 3 steps in total, and the user is currently on Step 1.

This feature became essential after conducting Cognitive Walkthroughs with users.


Screen Shot 2020-02-23 at 7.25.44 PM.png

Trip Planning Carousel & List Views

9. Once all the inputs are filled in by the user, the results page provides the most cost-efficient vehicle option. This is a carousel-view of the vehicles. You can scroll through to see other options and reserve the vehicle desired.

10. Clicking on the “List” icon view in the menu bar, we can see the best available vehicle options, in a list view.

11. Car model and address of the Zipcar options are visible as they always stay in the designated spots, and the user can book it for their upcoming trip.

12. However, if the user wishes to choose a Car2go or Evo - they cannot just “Book” a car ahead of time as their location is based on where the previous user left it, so they have the option to set a radar ahead of time.

13. By clicking on the “Sort” button in the menu bar, the user can also sort the options by price. After conducting user interviews, the feedback shows that most users would want to sort vehicles by “Price: low to high” and as well by “Distance from me”.


What’s Next?

Future iterations of the Design 

  • Another round of Usability Testing

  • Feature enhancements:

    • Link to Calendar to auto-search cars for a future event/destination

    • Save car options for future trip

    • Integrate Alexa & Google Home into this app


Reflections and Learnings

This was a humbling and rewarding experience to carry out a design project from beginning to end, as a team of one. This experience taught me a lot and supported me to become a better Designer. I learned:

  • How to perform further analysis on competitors and understand the market by carrying out a SWOT Analysis

  • Design trends and methodologies

  • Designing for Mobile: Android vs. iOS Design Trends

  • The value of doing medium-fidelity wireframes in grey scale, prior to using images 

  • The importance of diligently using style guide, symbols and Best Practices for becoming proficient in Sketch

  • The value of analyzing other designs → Moodboard 

  • The reminder of the importance of conducting User Research and Usability Testing to ensure I am designing with the user needs and pain points in mind

I am grateful to all who participated in the Usability Testing and provided invaluable feedback to help me with my design process.