The carsharing business is growing exponentially as peer-to-peer services are becoming ever more popular. In four weeks, our challenge was to build a mock app and marketing website for Uber if it were to enter the car sharing market. I was one of three UI designers responsible for delivering divergent style directions, pixel-perfect mockups, prototypes, and style guides. Throughout our research for this project, we attempted to answer the question:
How can we build an Uber carshare brand that is recognizable as Uber, but also represents the growth of the Uber brand?
At the outset of the project, we were given UX research, personas, and mid-fidelity wireframes. It was imperative that we designed for specific personas so that we could cater our designs toward the actual users of the product. Our primary user was Rod, who needed a car for road trips without the responsibility of car ownership.
Throughout my entire design process, I kept Rod in mind and used him as a reference to make style decisions.
To create a brand that was both consistent with and unique from Uber seemed contradictory at first, but I looked to Uber’s current branding to gain insight into potential approaches. Uber had already branched out into a different domain with UberEats, so I used this inspiration for tackling our challenge.
Our team arrived at the name UberGo because it resembled the name UberEats and captured the freedom of the two sides of the carsharing market. Users had the freedom to go anywhere by renting a car, and lenders had the freedom to spend the extra money earned from lending their unused car.
When designing the UberGo logo, I tried to convey a sense of adventure and the new freedom that UberGo provides. For my design explorations, I kept in mind that the current logo is relatively simple and plays with negative space.
When user testing, people enjoyed the simplicity of the logo and the play off of the current logo. Finalizing the logo gave me better insight into my style directions, reinforcing that my style would need to be simple and edgy.
LOOKING FOR INSPIRATION
To begin our style explorations, we first considered the design of Uber’s products. Even though UberEats’ color scheme differed from Uber’s, the seamless design and overall experience stayed consistent.
With Uber's designs in mind, our team created design principles that applied to all Uber products to keep us on track to create an app that reflected Uber’s brand aesthetic.
Like Uber, I found that the most successful car sharing apps, Turo, Car2go, and Maven, also utilized color sparingly and purposefully.
Turo cleverly placed the search function in the header bar so that the user could easily search and view available cars on the same page.
Car2go had a monotone palette and used blue successfully to indicate important actions. The app also utilized overlays so that the user always stayed on one screen, which made navigation extremely intuitive.
Maven used yellow well by using it only to highlight important details. The filter was placed close to the thumb for easy accessibility.
Like in these app designs, I wanted to create a clean interface that guided the user easily through the booking process:
- Enough white space and hierarchy to digest information very easily
- Clear calls to action in a contrasting color
- Keep the user on one screen as much as possible for easy navigation
I used our design principles and inspiration to guide my style directions. I experimented with different colors and layouts to create three divergent style tiles.
When we tested our style directions, users enjoyed the yellow style tile because it was unique and upbeat without being too overwhelming. Since it kept consistent with the cleanliness and simplicity of Uber, users felt it was an appropriate deviation from Uber’s current brand.
IMPROVING THE USER EXPERIENCE
While analyzing the wireframes, we found glaring issues that needed attention. We couldn’t continue to our style directions without addressing these issues first. We found redundancies in the navigation that distracted from the main purpose of the app — to locate a car near you.
I specifically sought out the UX team that worked on the wireframes, and discovered that they ran into the same problems but did not have the time to fix them and user test. With this knowledge, we removed the redundancies and and iterated on the wireframes.
I successfully simplified the app from an unwieldy five tabs to three easily digestible tabs. I realized that it was true what my mentors told me: UI design isn’t just visual design. As a UI designer, I needed to consider the user throughout the whole UX/UI process and not blindly follow the wireframes I am given.
THE FINAL PRODUCT
My final designs combined Uber’s sleek design with a new edgy aesthetic. Because we tackled UX issues and eliminated redundancies early, the app also reflected Uber’s brand through its simplicity and ease of use. At the end of four weeks, we presented our designs to a panel of UX/UI judges and received positive feedback.
RESPONSIVE WEBSITE DESIGN
To further develop the UberGo brand, I created a responsive marketing website that reflected the mood of the product. I kept the airy and adventurous feeling by using floating pictures combined with overlays. The same splashes of yellow indicate important calls to action, without overpowering the design. At the footer, a mountain scene adds to the adventurous feeling and helps ground the page.
WHAT I LEARNED
By creating UberGo, I learned to balance building a new brand while still making it feel related to an existing one. Although my primary role was a UI designer, our biggest challenge ended up being tackling user experience challenges along the way. For future projects, I will always begin my process by closely analyzing the usability of the wireframes before diving into the visuals. Doing both UX and UI in four short weeks was no small task, so I’m proud to have built a beautiful product that not only reflects Uber’s edgy and enjoyable interface, but is also intuitive and user-friendly.