UI/UX Design for Mobile App
eCycle Rental App
Role
Designer
Completed
December 2020
Tools Used
Photoshop, Illustrator, XD, Figma
Type of Project
Solo Concept Project
01.
The Problem
Existing e-bike docking stations are scattered all over the city and therefore tough to locate, pay for, and track progress of the ride. There is no ease of renting one. This makes it discouraging to users who are interested in using e-bikes to make their travel easier.
02.
Solution
eCycle is an app for conveniently renting e-bikes present across docking stations within Canada. The app primarily helps users locate the nearest station kiosk, informs them of the number of e-bikes available, rent and pay for their e-bike. They also get other necessary information about how to use the app, safety and benefits.
eCycle Rental App therefore helps the user save time, confusion, allows them to plan their trip in advance and pay. It makes the process of dealing with kiosks easier.
03.
Solution Storyboard
04.
User Persona
The research process began with crafting a user persona based on the storyboard. I identified the needs of the user, as well as their technical abilities.
05.
Competitive Analysis
Next, I evaluated similar e-bike rental apps from all over the world for features that were important. This gave a clue as to how to navigate through obstacles and identify UX pain points.
06.
User Flow
I mapped out the pathways that the user, so as to evaluate and opitmize their experience. This way, a navigation system was also decided on the basis of features to be inlcuded.
07.
Logo Identity and Iterations
A clean branding scheme was developed, after playing around with the letters 'e' and 'c', while incorporating a circular look alludiing to the wheels of a cycle.
08.
Typography and Color Palette
The colors yellow, grey and black were chosen for the brand colors. I wanted to keep the color palette monochromatic but use Yellow to add a splash of color, optimism, excitement and energy.
09.
Sketches & Low Fidelity Wireframes
Sketches were created loosely following the information architecture and were developed into low-fidelity wireframes before creating high-fidelity wireframes to test the functionality of the deisgns.
10.
Features & Screens
Wireframe & Prototypes
Coded Website
App Preview