OPay

Project 1 Analysis

Design Goal: design a page that will effectively covert ORide drivers to deliver with OFood.

Target Users: active drivers on ORide

Criteria: Clearly communicates the requirements and sign up process for delivery with OFood. The design needs to include the delivery gear (motorcycle and delivery box) and money elements that signify an increase in income

Online Research

I first looked up examples of webpages and digital posters from other food delivery companies for inspiration. I found that most of the designs incorporate pictures of delivery drivers or graphic images of them to resonate with potential applicants. I also found that the digital posters on the left all contain huge and almost explosive bold texts, catching eyes of the user immediately, while the web pages are more subtle and simple in comparison.

Initial Paper and Digital Sketches

Given that the text to display is relatively light and very straightforward , I chose to center the title,  subtitle/tagline, and the button; and I decided to left align the rest of the body texts, following universal conventions. In my sketches, I mainly explored with different illustrations to complement the text. 

I tried to emphasize the money element in all of the sketches besides the top right one, which communicated the “delivery” aspect more. 

Based on these paper sketches, I drafted 3 ideas on Sketch and started asking my mentor and the Director of Design for their feedback. The first idea illustrates an OFood driver riding his motorcycle zooming into the fast lane, lifting naira cash up from the ground. The second idea depicts an OFood driver handing a box full of delicious food to a customer. And the third idea simply shows an OFood driver standing next to his motorcycle, with cash and coins on the floor.

Design Iterations

Similar to my own opinion, both my mentor and the Director of Design favored the middle design the most. To expand on that, I started my iteration process. Out of the 20 variations I created, the 6 interfaces below are the most representative of my design evolution.

Edit 1: I first started by bolding the title and filling in the content. I also added some confetti and gold coins around the title for a sense of celebration and almost “winning the lottery”, and edited the man in the bottom illustration to look like an OFood delivery driver.

Edit 2: I then went on to refine some details such as highlighting the title and subtitles even more and increasing the contrast between titles and body texts. I also scaled up the food delivery box, since that should be the main focus, and cropped the bottom illustration to only show the most relevant part.

Edit 3: In this version, I played around by switching the top illustrations around the title to more “money-themed" ones and emphasized the tagline more. I also broke up the long sentences under both “Requirements” and “Steps” so they are easier to digest.

Draft 1: I lifted the illustration to the top so that ORide drivers can see it when they first enter the screen to get the gist of what this page is about. I also added a block background in the same color as OFood logo’s behind the tagline to emphasize the incentive more. Another finer detail is that I numbered the sign-up process to draw the audience’s attention to the steps.

Draft 2: This draft is significantly different from others, because while communicating with the local operations manager, he insisted on adding more straightforward money elements, such as money falling from the sky.

Draft 3: Because I personally found Draft 2 to appear really messy and distracting, I offered Draft 3 as an alternative. I made a new eye-catching illustration of an OFood driver climbing up stairs made out of stacks of cash and placed it on the very top, and I moved the original illustration down to the bottom of the page. I also moved up the “SIGN UP TO JOIN” button so the drivers can tap it without scrolling the page.

In the end, the operations manager really liked Draft 3 and selected it to be the final version. This page was developed and went live on August 31, 2019.

Conclusion

When I first received the task, I thought it was a relatively easy project and arrived at Edit 2 in less than a day. However, throughout my communication with the operation manager, I ended up drafting 20 versions for this one single page. Even though I favored Draft 1 amongst all my designs because of its simplicity and aesthetics, and I personally thought flaunting all the cash in the user’s face is a bit too blunt, I learned that personal preference should never be the reason why a design is selected.

The project needs to use these money elements to increase conversion rate, and most of the users who rely on this job for their main source of income also needs to see theses money elements as an incentive. When these two needs align, I should place that as my top priority, and then use my professional knowledge as a designer to refine the rest.

Recognizing the need is the primary condition for design — Charles Eames

Project 2 Analysis

Design Goal: design a user flow that uses the bonus reward to motivate ORide drivers to complete more trips

Target Users: active drivers on ORide

Criteria: Clearly communicates the number of orders required to receive the bonus reward. The design needs to incorporate bold and eye-catching elements to stimulate ORide drivers to reach for the goal.

Online Research

I first looked up examples of reward popup window on websites such as Dribbble, Pinterest and Huaban for inspiration. I found that most of the designs utilize elements such as coins, stars, badges/champion cups, and gift/treasure boxes to draw users’ attention. Besides graphic elements, it’s also conventional to use colors like red/pink and yellow/orange to set the tone for celebration.

Initial Paper and Digital Sketches

Given that the text to display is quite minimal, I chose to center the title, body, and the CTA button. In my sketches, I mainly explored the different creative ways to present the popup windows.

In the top section, I drew out two popup windows in the shapes of bulletin board/calendar. Next to them, I also drew the front view of a motorcycle and a closed treasure box, implying driving toward some rewards.

In the middle section, I played with the concept of a progress bar by turning it into a road that the bike is driving on, and at the end of the road is the reward in the form of a champion cup, a stack of cash or a gold coin.

And in the bottom section, I drew a standard popup window with a champion cup filled with gold coins as the illustration, and an opened treasure box, echoing with the closed treasure box in the beginning.

Based on these paper sketches, I drafted some ideas on Sketch. The first concept for the “Bonus Challenge” popup places the driver on a road that leads to a treasure box and bag full of gold coins whereas the second concept is just a simple window that has a wooden chest filled with coins to reflect the high rewards.

For the progress bar, I chose to use our company’s driver icon, an element that all drivers are familiar with, to show how far the driver has progressed.

And for the “Congratulations” popup design, I followed the previous sketches and drafted one with a treasure box and another with a champion cup.

Design Iterations

After talking to my colleague who is in charge of managing the ORide app for drivers, I decided to continue iterating on the first concept.

Edit 1: I first created the scene of a driver heading toward the treasure box at the end of the road. I also added coins along the way to gamify the user experience. The progress bar didn’t vary much from my sketch, and the “Congratulations" page includes a huge opened-up treasure box, implying that the driver has reached the goal and can now open up the originally closed box.

Edit 2: After getting feedback from my mentor, I changed the typeface of the title to grab more attention and painted the background color to purple for the mysterious ambience that is often associated with treasure. Because purple and yellow are complementary colors, I thought the combination worked well and I was able to emphasize the golden coins/rewards more.

Edit 3: In this version, I added a “Tap to Reveal” page before the user can see the challenge detail, to create a sense of surprise. I made the button in the shape of a peel-off sticker to imitate the experience of revealing lottery result. I also changed the wooden chest box to a bag of gold coins that are more straightforward and added graphic elements such as fireworks and stars for a sense of celebration. I also replaced the motorcycle with our ORide logo (which is just a motorcycle helmet) to save some space. In addition, I added color gradient to the progress bar for more motion.

Edit 4: To increase the click-ability of the reveal button, I changed the appearance to the traditional green button with some shadow underneath it. I also unified the position of the button across all popup windows to avoid confusion. I removed the gradient on the progress bar because the development team said it wasn’t easily feasible and adjusted the position of text around the bar to provide more hierarchy.

Edit 5: This edit took a different approach and incorporated the appearance(shape and colors) of a lottery ticket. The top of the “ticket” includes the relative title and body text, and the lower half has a map with a ORide driver following the route full of rewards, resonating the GPS UI in ORide app to invoke familiarity.

After presenting Edit 4 and 5 to respective product management personnels, one favored Edit 4 while the other favored Edit 5. As a solution, we sent the two designs to the Operations Team located in Nigeria and conducted A/B testing on users. Edit 4 was selected as the final design for this project.

Conclusion:

Taken the lessons I learned from the first project, I knew I had to come up with a bold and eye-catching design right off the bat, which is why I chose to highlight the incentives and use strong color contrast like gold and purple in my drafts. However, the biggest challenge I faced was to weigh different opinions from the design lead, product strategists, developers, and people from the operations team on my designs. This struggle is evident on my design iterations, especially the last iteration where I took a completely different approach and style. Because everyone involved in the project liked different designs, we asked the local operations team to conduct an A/B testing and decided on the final design.

This project taught me that a good designer not only needs to produce impressive designs but also has to be a team player. This means at the beginning everyone on the project should agree on the same vision, and while iterating on my designs, I need to keep the design lead and product strategists updated with my progress to make sure I’m conveying the needs while following my design vision and the company’s brand; I also need to communicate with the development team at all times to make sure my design is feasible. Frequent communication with different teams might seem to interrupt the design flow and take up a lot of time, but at the end it will always save so much resources and time spent on repeated work.

Collaboration is a key part of the success of any organization, executed through a clearly defined vision and mission and based on transparency and constant communication. — Dinesh Paliwal