top of page
#2.png

ecomotive

Final Prototype

Our Team

MY Roles

  • Team Leader

  • Product Designer

Tools

  • Figma

  • Fig Jam

  • Google Forms

  • Google Meet

  • Asana

  • Adobe Photoshop (Ps)

  • Adobe Premiere (Pr)

  • Adobe After Effects (Ae)

  • Miro

  • Chat GPT

  • Discord

  • Midjourney

MY Responsibilities

  • Project Management

  • Design Research

Platform

App Design (iOS)

Team

The group consists of 6​

Duration

July 28, 2023 - November 8, 2023

About Project

ecomotive Overview 

A transformative application that seamlessly merges two ride-hailing and micromobility platforms. Featuring an array of eco-conscious options – Bikes, E-bikes, Scooters, and Full Electric Cars – ecomotive's mission is twofold

Problem Statement

Amid London's bustling rhythm, Air Pollution and Congestion cast a shadow on progress, while the yearning for Sustainable Mobility Options remains unmet. In this urban saga, ecomotive rises to illuminate paths, addressing Limited Public Awareness and Education and guiding Behavior Change and Incentives, while weaving the intricate dance of Integration and Seamless Mobility

Purpose-Driven Solutions

  • Tackle Air Pollution and Congestion

  • Bridge the Gap in Sustainable Mobility

  • Raise Public Awareness and Educate

Design Thinking Process

Double diamond.png
Business Research

Business Research

Value Proposition

  • Incentivize Eco-Friendly Choices

  • The lowest carbon production field

  • Enhance Pleasurable and Sustainable Trip

  • Our commitment for a Greener Tomorrow

  • Step 1: Calculating Burned Co2 emission
    of each vehicle gr/km

Burned new (4).png

  • Step 3: Public Rate Co2 including
    Charging & Recycling gr/km

Public rate Co2 (1).png

  • Step 2: Calculating Saved Co2 emission
    of each vehicle gr/km

Saved Co2 (1).png

  • Step 4: SCC (Social cost fo carbon £/kg)

SCC (2).png

  • Step 5: The UK government requires all users to possess a valid driving license when utilizing scooters through a micromobility app.

Driving License.png

User Research Process

Survey

The most important survey responses:

Demographic info

Screenshot 2023-08-19 at 09.57 1 (1).png

In the process of asking these questions, I and our team established our target user group, which comprised 21 participants

Screenshot 2023-08-19 at 10.10 1.png
Screenshot 2023-08-19 at 10.47 1.png
Screenshot 2023-08-19 at 10.18 1.png
Screenshot 2023-08-19 at 10.45 1.png

Additionally, by paying close attention to their responses, we uncovered that 8 individuals among them displayed a strong environmentally friendly orientation and a genuine concern for the well-being of the planet

Screenshot 2023-08-19 at 12.08 1 (1).png

On the other hand, Taking a different approach, I asked 45 participants who weren't our users the question below.

The aim was to understand their challenges in embracing these alternatives. The responses we've gathered and displayed on the chart now provide us with valuable insights into their viewpoints.

Screenshot 2023-08-19 at 11.18 1 (1).png

Interview

The interviews took place with a total of 16 participants. In alignment with the principles of human-centred design
 

Interview Question (1).png
Interview responded (1).png

Notable quotes from these discussions included:

I asked them some important questions like:

Affinity Diagram

Mapping User-Centric Insights and Enhancing UX through these categories and sub categories.

  1. Landing Page: Impressions and feedback on the landing page:

  • Gamification

  • Cost

  • Education

  • Simplicity

  • Carbon Footprint

  • Booking

  • Cancellation

  • Battery

  • Routes

  • Station

  • Time

  • Distance

  • Review

2. Gamification: Insights related to gamifying the user experience:

  • Points

  • Cost

  • Education

  • Simplicity

  • Carbon Footprint

  • Offers (Rewards)

​

3. Profile: User perspectives on their profile management:

  • Cancellation

  • Booking

 

4. Payment Process: How users perceive and experience the payment flow

Screenshot 1402-05-29 at 12.46 1.png

Competitive Analysis

In our competitive analysis of 12 transportation app businesses, we comprehensively assessed various key aspects to extract essential features:

Competitive Analysis

We identified a core set of features that are consistently prevalent among the analyzed 12 businesses:
 

  • Gift & Promotion

  • Price

  • Battery

  • Reservation

  • Parking Zone

  • How to Unlock

  • Ride History

  • Ride Duration

  • Customer Support

  • Vehicle Number

  • Map

Additionally, we've identified a subset of less commonly used features among these businesses:

 

  • Carbon emission

  • Gamification

  • Cancellation

  • Pause

  • Safety/share trip

  • Two-way rating

  • Free stations

  • Group ride

  • Find Nearest

Define

Define

Persona

In the process of developing ecomotive, we created a detailed persona named Jack Peterson. This persona is a representative user synthesized from user discussions and interviews, providing valuable insights into the needs and preferences of our target audience. Jack's characteristics, needs, goals, and personality traits have been distilled to guide our user-centered design decisions

Jack (Persona).png

Develop

Anchor 1

Scenario

Meet Jack, a city dweller who lives in a bustling urban environment. He's always looking for efficient and eco-friendly ways to navigate the city. Jack starts his day by opening his favourite micro-mobility app, "ecomotive" on his smartphone

User Flow Related to the Entire App:

Entire User Flow

User Flow Related to our Task Flow:

Task Flow

Information Architecture

Card Sorting

In our Card Sorting we discovered some main categories:


1: Help
2: Account
3: Wallet
4: Point

Card Sorting

Site Map

Our ecomotive app's site map is the result of thorough analysis and strategic choices. We based our categories, including Wallet, Account, Help, and Point, on card sorting to align with user preferences

 

A significant change was renaming "Point" to "ecopoint," influenced by a brainstorming session tied to our business mission


The "Map" category's inclusion originates from detailed competitive analysis, enhancing our app's feature diversity


Derived from our value proposition of "Seamless Integration" Ride and Rent categories are rooted in robust business research, ensuring smooth incorporation of various vehicle services


In essence, our site map exemplifies user-centred design, functional enrichment, and a purpose-driven approach that defines the ecomotive app

ecomotive Site Map

Design Process

Initial Sketches

During our brainstorming sessions, our primary focus was on confronting challenges and meeting user demands

 

  • We initially incorporated a central category called the 'Trip Planner' into the landing page design, with the core objective of empowering users to plan their journeys effectively while incorporating environmentally sustainable transportation options

 

Yet, this feature faced setbacks due to the following factors:

​

  1. The need for a more intelligent and efficient approach to reduce carbon emissions

  2. An economically unfavourable pricing structure

  3. Excessive time consumption associated with trip planning using this method

soroush.png
photo_2023-05-08_08-17-29 1.png
nastaran.png
IMAGE 2023-08-25 12_44_42 1.png

Secondary Sketches

Landing page sketches were created collectively by our team and I. Our intention was to:
 

  • exhibit four different transportation modes and facilitate seamless switching between them

 

  • designate a section for presenting gamification features

 

  • Incorporate a map to showcase our vehicles

qqq 1.png
IMG_6280 1.png
IMG_6279 1.png
IMG_6278 1.png
IMAGE 2023-08-25 12_44_44 1.png
IMAGE 2023-08-26 07_29_44 1.png
sara h.png
sara h2.png
sara h 3.png

Wireframes

Wireframe

Journey Map

The ecomotive journey map serves as a strategic blueprint, offering an intricate view of user interactions, pain points, and positive moments. This visual narrative empowers us to make informed design decisions, continually improve user satisfaction, and optimize the app's overall usability, resulting in a more seamless and enjoyable experience for our users

Journey Map.png

Moodboard

Our Moodboard for ecomotive draws inspiration from various sources, including:

 

  • Louis Vuitton 

​

  • Floral elements like Egyptian lotus 

​

  • The symbolic representation of Frogs (inspired by 'The Thin Green Line')

​

  • Breathtaking sky vistas

​

  • Scenic nature captures

​

  • Finally, various other visuals that guided our selection of Gamification colours

Moodboard

UI Kit

In the ecomotive project, we meticulously crafted a comprehensive UI Kit that serves as the foundation for a professional and cohesive user interface. This UI Kit encompasses the following key elements:

​

  1. Card Design: Carefully designed card components to showcase content effectively

​

 2. San Francisco (Apple Designed Typeface): Utilization of Apple's renowned San Francisco typeface for a consistent and polished text appearance

 

 3. Grid: A structured grid system for layout consistency and alignment precision

 

 4. Spacing: Thoughtful spacing guidelines to ensure a visually pleasing and balanced design

Card Design
Typeface, Grid, Spacing
Button & Button colours, Tab bars & Status Bars
Colours & Icons

5. Button & Button Colors: Custom button styles and a harmonious colour palette for intuitive user interaction

 

 6. Tab Bars & Status Bars: Seamless integration of tab bars and status bars, following Apple's design standards

 

 7. Segmented Controls: Precisely crafted segmented controls for streamlined user selection

 

 8. Colours (Text, Background, Button): A thoughtfully curated colour scheme for text, background, and buttons to maintain visual harmony

 

 9. Icons: A collection of purposefully designed icons that enhance the user experience

​

We've maintained alignment with Apple's design resources and guidance, ensuring our UI Kit aligns with industry-leading design principles for a professional and user-friendly interface

Accessibility

For accessibility assessment:


We utilized the Contrast Checker tool to evaluate the accessibility of our services according to WCAG guidelines, considering Normal Text, Large Text, Graphical objects and user interface components
 

Furthermore, we employed a colour-blindness check to gauge the impact of colour vision deficiencies on severity levels

Accessibility 1
Accessibility 2

Challenge & Solution

Stage 1

Challenge & Solution 1

Stage 2

Challenge & Solution 2

Stage 3

Challenge & Solution 3.png

Stage 4

Challenge & Solution 4

Stage 5

Challenge & Solution 5

Stage 6

Challenge & Solution 6

Stage 7

Challenge & Solution 7

Design

Usability Test & Iteration Process

Design

Phase 1

For the landing page, my team and I conducted extensive testing on various designs, ultimately leading to the development of the final design. Our objectives for the landing page were as follows:

​

  1. Emphasizing the map as the primary tool for selecting vehicles

​

 2. Enhancing user convenience by allowing seamless switching between vehicles on the map and through segment control

​

 3. Ensuring cohesion in the design by integrating different vehicle options cohesively

​

 4. Promoting user understanding through the incorporation of engaging elements and icons, resulting in an attractive and user-friendly interface

Usability Test (4).png

Phase 2

The central issue users encountered was the challenge of simultaneously choosing a group ride and selecting individual vehicles within the group ride option. For instance:

​

  1. We introduced a separate 'group ride' button to provide clear information to users

 

 2. In the first version, there is a scooter icon that requires uploading a driving license certificate in the UK to ride it. Due to security concerns regarding personal data, this scooter icon was removed from ecomotive vehicles in group ride options

 

 3. In the second and third versions, after selecting the group ride, you can easily switch between them in the segment control to view and select the vehicles

​

 4. In the final version, you can choose a group ride in two ways: either by tapping the 'group ride' button or by adding a second vehicle after scanning your first one.

Group Ride.png

Phase 3

During the usability testing and iterative phase:

A significant intricate hurdle we encountered involved integrating gamification components into the landing page
Our objectives were:

 

  • to ensure users comprehend the functioning of this element

​

  • to facilitate smooth user interaction through exceptional and instinctive design, coupled with a well-crafted user interface

​

  • Additionally, we aimed to avoid creating a game-like symbol, as our intention was to strategically employ gamification principles in the app to foster deep user engagement

Usability Test (2).png

Phase 4

Throughout usability testing and iteration, the primary challenge centred on enabling easy access to comprehensive vehicle information during vehicle selection. This led to the introduction of a Card design, effectively presenting all pertinent details about vehicles and stations:

When interacting with the map, station names and distances become visible

Details such as saved carbon emissions, battery status, pricing, available points, a ring icon, vehicle numbers, and book/scan options are readily available

In summary, a concise compilation forms, incorporating total saved carbon, pricing, available points, distance, time, and station names, providing users with a clear and comprehensive overview

Card Design

Deliver

Deliver

What I have learned?

  • From the ecomotive project, I've learned the value of user-centric design, iterative improvement, and accessibility

​

  • Business alignment, gamification strategy, and consistent UI design are key. Purpose-driven design can drive both impact and profitability

​

  • Effective leadership, documentation, and presentation skills are essential for success in delivering exceptional user experiences and sustainable business growth

Next Step

  • The next steps for ecomotive involve finalizing our launch plan, including marketing and user acquisition strategies

​

  • After the launch, we'll focus on continuous user data analysis for platform improvements, ensuring long-term success and adaptability in a competitive market

bottom of page