PROJECT: THE MOPED WAY
As part of a design course through Coursera, I created a navigation app aimed at people who have scooters. I called it: "TheMopedWay."
The app’s goal is to help people who use 50cc mopeds as transport to get around town without having to worry about roads they aren't allowed on.
Duration
3 Weeks
Tools
Illustrator
XD
Brief
The assignment was to create a solution to a problem afflicting your everyday life using a mobile application.
DESIGN PROCESS
Define
Empathize
Ideate
Design
Prototype
With a focus on UI for this project, the steps I covered in my design process included personas, user flows, wireframing, style guides, and prototyping.
DEFINE
For this step in the process, I used the 5 W's approach. With only an idea this approach helps define the particulars of development.
What
Who
Where
Why
When
A navigation app that helps moped riders to navigate the roads in their city/town.
Users would be people who want to navigate 50cc moped safe roads.
They can use the app to plan travel/trips. As well as using in their daily lives to navigate around.
Can be used on a moped mount or as an audio navigational system. The user may use the app before they take their trip or during it.
​
To navigate roads safely and lawfully with a restricted vehicle like the 50cc Moped.
EMPATHIZE
I created a user persona for the application and used it as a jumping off point into ideation.
The user persona helped to define a location and a purpose.
About
Sara Dowel is a 21-year-old student and part time waitress. She lives in Christchurch and studies at the University of Canterbury. She works in the city three nights a week and studies sports science during the day. She likes thrifting, hanging out with her friends and teaches a weekly exercise class at Jelly Park. She owns a Moped, named Barry, that she uses to get around without breaking the bank.
Needs
- Navigate safely to university, work and friends houses around town.
- Get around with a cost effective transport - the Moped.
- Route information needed for traffic, congestion or unavailable roads.
- Navigating while riding her Moped.
IDEATE
I then figured out the essential features the app would need to make it successful and useful. I also created a user flow diagram to map out these features and see what kind of pages would be necessary for the app.
Essential Features
- Help users navigate the road to a destination based off their use of a moped.
​
- Weather updated hourly, to describe conditions where you are and at your
destination. Including wind conditions for safety.
​
- Difficulty rating of the road being taken - steep hills, road conditions etc.
​
- Communicate to you with or without the need for visuals. Vibrations or audio
instructions via headphones or smartwatch for easy navigation.
User Flow Diagram
DESIGN
Next, I started sketching low-fidelity wireframes with pencil and paper (Which are not included). I moved on to Adobe XD for my mid-fidelity wireframes, which you can see below.
Login/Signup
Process
Features
Search
Destination
PROTOTYPE
I continued to use Adobe XD to create my high-fidelity wireframes and an interactive prototype.
STYLE GUIDE
FINAL FRAMES
Login Process
