product design intern
Uber.com showcases different services Uber has to offer and maintains 11+ websites that are localized in 60+ countries around the world. Over the course of 12 weeks, I worked on 4 different projects (driver guarantees, global citizenship, redesigning search bar and products menu) and was given the opportunity to work with other designers, design engineers, software engineers, project managers, marketing managers and legals.
The main project I worked on was the ‘Driver Guarantees’, a product that allows first-time drivers to see their earning potential before signing up. Driver guarantees essentially promises drivers x amount of money in x city in the first month they drive with Uber.
At the time, driver guarantees only lived on the sign up page meaning that there weren’t enough entry points, hence, less exposure. This made it harder for people to be aware of this guarantee program and the fact that it only lived on the sign up page meant that only intent-driven first time drivers had access to it. Another problem was that the design itself did not visually stand out, which only added to the problem.
(+) Motivates DriversDriver guarantee is shown to have a huge impact. Research showed that riders felt incentivized and motivated by the presence of driver guarantees because they appreciated knowing different ways of knowing their earning potential.
(-) Lacks Exposure/PresenceUsers thought there was a lack of exposure regarding the presence of the guarantees. On top of the fact that it can only be found on the sign up page, the guarantee itself is visually not detectable as it’s placed either below the fold of the screen or it’s lodged between texts. The common but jarring sentiment was that they believed Uber did not want drivers to see this driver guarantee program.
(-) Seems TransactionalParticipants also did point out that the copy would motivate them to click the CTA but leading with the $ amount came off too strong. It’s easy to see the driver guarantee as a transactional feature than a product that stems from genuine care for the drivers. With all these findings, I definitely felt as though there was potential to solve this problem from a design perspective.
Promotional LookingThe initial guarantee design shared the same visual language as the other blocks used on our website. This causes users and potential drivers to overlook the guarantee because it became so homogenous with the rest of the blocks. In order to prevent that from happening, the guarantee block is visibly different from other blocks by using a different background color and making it illustration-oriented.
Humanistic ApproachInput from user research shows that leading with money value came off too strong. The block strives to have a humanistic approach as screaming money value at users may come off as abrasive. Using soft illustrations in our block will help significantly in setting the emotional appeal and all-in-all make the information on the block more digestible, as the illustration alludes to the content.
FlexibilityBecause, moving forward, this guarantee block will live on different pages, it aims to be versatile. Uber.com is responsible for designing blocks that would be used by various content authors and stakeholders (uber eats, uber business, uber ATG, etc). With that being said, it has to take into account the multiple business brands and ensure it aligns with each and every one of their brand needs. The block will have to catch enough attention but not ruin the overall flow of other pages and blocks.
Final Design: Web Blocks
Background ColorAs mentioned earlier, to address the issue of users overlooking the guarantee, a background color has been introduced to the driver guarantees. This way, the block is visibly different from the existing blocks used on the site as no blocks on the uber.com have a colored background; mostly, if not all, are image oriented or placed against a white background.
Soft IllustrationsAdditionally, as shown from the research conducted in 2019, users find it hard to detect the guarantee even on the sign up page because of the abundance of text. Using soft illustrations in our block will not only help significantly in setting the emotional appeal by adding a humanistic touch, but it’ll also make the content more noticeable and the content on the block more digestible, as the illustration alludes to the content.
Dark Mode & Light ModeUber.com is responsible for designing blocks that would be used by various content authors and stakeholders. Since this guarantee block will live on different pages, it aims to be versatile. There are two recommended ‘modes’: dark mode and light mode. This way, we are able to give content authors option to choose from yet maintain consistency throughout the site.
Final Design: Skinny Banner
UbiquitiousBecause the initial driver guarantees was placed below the fold of the screen, users were not able to see it. This banner was exclusively made to live on top of the sign-up page to allow users to take notice of the driver guarantees before signing up as a driver.
Mobile VersionAt the end of my internship, we were able to launch the web version but not the mobile version due to time constraints. Because it was tentatively to be built a month or two after my leave, I passed on both high-fidelity designs as well as animated prototypes to accurately bring over the micro-animations used on web to mobile. This way, both the visual design and the animation will be consistent in both devices!