Cride

About Client

CRide is a corporate ride-hailing service that allows company employees to book online at their convenience with instant reservation confirmation. This service allows pay-per-hour and mileage billing, allowing the company to control their employee’s transportation costs.

Task

The brief was to design a landing page for C-RIDE optimized for conversions. The landing page should be simple and delightful, using the main brand colours and adhering to the most recent design trends.

My Role

Product Designer (UI & UX Design), Front End Developer.

The Team

Chidiebere Nweke (Product Designer & Team Lead) | Team C&I Leasing | Korede Oluwafemi | Chinelo Abia

Tools

Paper | Balsamiq | Photoshop

Methodology

Competitive Analysis, Mind Mapping, Card Sorting, User Personas, Systems Map, Site Map, User Flows, Wireframing, Prototyping, Usability Testing.

Timeline: 3 weeks

MY UX DESIGN PROCESS

Before I begin any project, I try to understand the basics. This requires an understanding of two important aspects:

The user (Users and their goals)
The brand (Business goals)

The questions below may vary depending on the business and are not limited to the questions below.

What’s is the problem?
What issue are you trying to solve for your user?
What problem are you trying to solve?
How does this project fit into your overall brand mission and goal?
What role does this project play in reaching that goal?
Is now the ideal time for your business to pursue this project?

I undertake research once I’ve determined what this project’s fundamental objective is and what problems they’re attempting to solve. At this point, I prefer face-to-face interviews to measure verbal and nonverbal replies, although video or phone interviews was also used.

User Interview
Stakeholder Interview
Market Research
Competitor Analysis

The questions below may vary depending on the business and are not limited to the questions below.

What are they having trouble with?
What do people expect from the service?

In this step, I used all of the information obtained in the previous two phases to analyze and simplify the most relevant parts.

User personas
User journey maps

Using what I learnt throughout the research process, I created a user journey map to assist me understand what the user will experience when using this service.

On this phase I built out my design.

Site map
User flow
Wireframe.

For this phase, after several designs and redesigns, we’re ready to launch. Feedback from the development team is critical. I make sure that any concerns that arise are properly communicated and addressed before the service release.

Internal testing.
User testing.
Beta launch.

When the service becomes live, it’s time for another round of testing. I evaluate the finished project as a whole.

The questions below may vary depending on the business and are not limited to the questions below.

How are users responding to the product?
Was it effective in addressing their issues and eliminating their pain points?
Where can I make improvements to the product?

User Research

I interviewed about 15 people (via phone calls, chats, and in-person interviews) who were potential target users to learn about their viewpoints on using a similar service and their pain points and improvement suggestions. The target audience consisted primarily of normal people, car owners, taxi drivers, and uber/bolt drivers.

User Research Summary

All information in one place.
Service price should be on the website.
App download CTA.
Website should be mobile responsive.
Simple and clear layout.
Little documentation.
Easy sign up.
Clear Call-to-Action

Personas:

I used all of the qualitative data gathered during the research process to develop two personas customer and driver.

Mary

John

Competitor Research/Comparative Research

To develop ideas for the landing page design, I began by identifying CRIDE’s competitors. I researched uber and bolt. My goal was to evaluate and identify common features shared by competitors to distinguish CRIDE from its competitors.

Upload Image...

Upload Image...

Mind Mapping

I created a mind map after my competitor/competitive research. The needs of the business and its customers/user personas were already defined. The purpose of mind mapping was to assist me in organizing their needs into a more defined idea and then establishing relationships and hierarchy between these ideas.

Information Architecture

I created the navigation system by sorting cards using both open and closed card sorting methods.

Site Map

To define the website’s overall structure, I created a site map based on the card sort results. This was done to ensure that the website pages were placed where users expected to find them when visiting the website, resulting in a more user-friendly experience.

Site map for the website

System Map

I created a system map to help me understand how a user will navigate the website.

User Flows

I designed a user flow for the personas during my research. The goal was to identify the stages each user would go through as they came to the website and the actions they would take to achieve their goal.

Upload Image...

Wireframes + Prototype

Using my user flows as inspiration, and I sketched a few of the site’s important pages. After that, I did a two-part test to see if these concepts fulfilled user and business objectives. As a result, I swiftly experimented with various website design possibilities.

Wireframing

Based on the feedback I received during the sketching phase, I began building the initial wireframes in Balsamiq. I prioritized the features that would best satisfy the users’ needs and lead to user conversion.

For most design projects, I always present clients with two design options. The second design option demonstrates to the client how a different design can address user and business goals.

When working with clients, I present them with two concept design options from which to choose based on the design proposal. The design focuses solely on the main page, usually the homepage or the landing page. This follows the design process, which includes research data feedback, user personas, user flow, and so on.

Suppose the client selects a design based on the test results (heat map + user feedback). I then create additional wireframes for the chosen design in preparation for further usability testing.

Wireframes
Design (Style Guide +Component design)
Test ( Heat map + user Feedback)

The Client choose design A. Below is the wireframe for other pages.

Prototyping

Homepage

I kept the landing page clean and simple to avoid overwhelming users. I implemented a Hero section because this is the part users see first after the page loads. This section had text and the app download CTA buttons for iOS and Android to draw the user’s attention. The next part was a video explainer about the service. I added a CTA section after the Hero section showing how the service works in four easy steps.

If the user was still not convinced to use the service after watching the video explainer, another CTA section was added to boost confidence and assist users in making more informed business decisions. If the user was still not convinced and needed more information about the service, a contact support link was added to make contacting support easier.

After the user has become acquainted with the brand and its services, there is a service price table. A table here ensures that the cost for the client’s featured services is displayed, so users (riders) know how much they will pay per mile.

The featured price table is divided into three sections based on the most frequently requested ride service, with a CTA button that, when clicked, redirects the user to the Hero section to download the app using a parallax scroll effect.

The final CTA consists of two buttons: one for drivers and one for riders. I included important links in the footer to help users find any additional information they require.