Design Process

Rental
& Service

RentEasy is an app-based on the concept of bringing renters and rent-seekers together while making it happen in a completely hassle-free way

Project Overview

True to its name, RentEasy is a project that brings out a new concept in a market where users can get service on rent instead of buying it. After the success of famous online selling portals, we got this RentEasy’s exceptional concept of ‘renting of services’ for our client to explore, which was rarely exploited till now.

As RentEasy brings a win-win situation for both renters and rent-seekers in all aspects right from being economical to convenient. RentEasy aims to offer a varied range of service products to its users from the broad category, which can be brought over the fingertips.

Main Objectives

There were primarily two objectives that we aimed to accomplish through the design process –

To create superb branding guidelines for the company, that would boost the brand’s reputation by rightly connecting to user’s goals and further establish a great rapport.
To create an attractive user interface for an e-commerce app, that allows users to quickly choose a product for rent without needing to venture out from their comfort.

Goals

1. User Stories & User Flow

2. High Fidelity Wireframe

3. User Stories & User Flow

4. High Fidelity Wireframe

Design Tools

1 . Define

Defining Logo

Letter R

Letter R here stands for the word – Rent
Here letter R in a solid and capitalized format can be viewed as emphasizing the Reliability for a user over the RentEasy portal.

Letter E

Letter E here stands for the word – Easy
Letter E is used in a stylishly lowercase format so that it would fit aptly yet look uber cool with the letter R.
Either way, a person looks, letter E would look like a separate letter and also can be seen as letter R in capitalized format.

Tags, Rent Tag, Offer Tag

We used a picture of a tag resembling a keychain alike, which can be attributed to a user who gets a sense of easy possession of service through the portal of RentEasy.
To look more attractive and eye-catching, we used red color in the offer tag design of RentEasy..

User Stories

In light of the scope of the project, a number of user stories were considered and I selected those which would reflect the goals of potential users. With these key user stories selected, we determined the success criteria that would determine the user flow.

Key points

The new user can access the information/ inventory without having the register, so that the user can go and explore the inventory before creating the account.
The returning user can overview the past activity, previous purchase, search history.
With having different categories of the product with basic filter option for browsing lots of products in the platform.
The Customer should be able to place multiple items in the shopping cart so the Customer can purchase more than one item at a time.
User should be able to get the recommended product in the feeds.
Payment process should be followed with ease.

2 . Ideate

User Flow Diagram

From Home page to completing your purchase

In order to determine what screens would be present in design interface, we started making user flow diagram while keeping requirements & success criteria’s in hand. From this diagram we are representing the user journey to the client before starting with the actual design.

Mid/ High Fidelity Wireframes

Before moving to the actual design, it’s an industry standard practice to make wife-frame and start brainstorming your ideas keeping flow in mind. While creating the thought process, we keep client in loop for quick discussion and approval. This helps us to bring everyone on single page.

3 . Test

Prototype

After creating mid fidelity wireframes, We started with the prototyping using Adobe XD. This allow User to click and walkthrough and uncover small problems or pain points in the structure or flow of the user interface. This step was valuable to understand how to improve the design for users.

User Testing

With switching User test mode in Adobe XD, we created a usability test that would evaluate the prototype’s ability to help users accomplish a set of four tasks within a scenario. The Test provided valuable insights into the user behavior and pain points while using the Renteasy Prototype.

4 . Materialize

Typography

A a

Nunito Sans

The quick brown fox jumps over the lazy dog
17pt (Semibold)

The quick brown fox jumps over the lazy dog
16pt (Bold)

The quick brown fox jumps over the lazy dog
15pt (Semibold)

The quick brown fox jumps over the lazy dog
14pt (Regular)

The quick brown fox jumps over the lazy dog
13pt (Regular)

The quick brown fox jumps over the lazy dog
12pt (Regular)

The quick brown fox jumps over the lazy dog
11pt (Regular)

Colours

Red is the brightest and the hottest hue in the colour wheel. When added to an app layout, it simply cannot be left unspotted. It highlights the page while bringing energy and power to it. This is also a strong motivational colour, which calls the users to take an action. Red shows passion, power, action, desire, and love. In this design, red is a powerful accent colour which is again very versatile. Brighter shades emphasize energy and excitement while darker shades suggest power and passion. We thought of moving with lighter and darker shade both.

Icons

Line Icons

Fill Icons

Components

Final Screens

After refining, re-designing, many rounds of testing and iterations, an interactive prototype is designed which is visually appealing, ready, and good to go

Start Shopping

The Renteasy app provides users the option to login or register an account, or give them the option to continue and browse everything as a guest.

Browse by category

Giving the ability to search and narrow by categories that matter to them is important to help them find what they need or what they might want. Categories were chosen based on desk research of comparative popular brands.

Add to Cart & Checkout

The call to action to “Add to cart” is prominently featured in product detail page.

Desktop Site

Responsive web design adaptable to all screen size, platform and orientation offering an optimized browsing experience.