Togg Trugo Case Study
Product Design, UI / UX Design
Analyze

First, let’s discuss my analysis of the app’s user interface. While doing this, let’s evaluate it with Jakob Nielsen and 10 Heuristic Analysis Principles.

The issues related to interface design that have been improved are as follows:

  1. Recognition rather than recall
  2. Consistency and standards
  3. Flexibility and efficiency of use
  4. Aesthetic and minimalist design
Recognition rather than recall
Problem

This navigation bar does not provide any information to the user. Information required to use the design (e.g. field labels or menu items) should be visible. The icons are also stylistically inconsistent, creating a visual incoherence.

Solution

I minimized the user’s memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible. I created new Nav Menu bar and a new set of icons that are compatible with each other. I also gathered the hamburger menu and settings menu under the “Account” heading. I eliminated this problem by using this set of icons and the headers of the redirects together.

Consistency and standards
Problem

Users should not have to wonder whether different words, situations, or actions mean the same thing. For this, station situations should be described with colors and icons that are familiar to the user’s experience rather than brand colors or brand logo.

Solution

I recreated the station pins. I colored the station states according to what the user is familiar with and chose icons accordingly to reduce user burden. To eliminate negative perceptions, I gave the user a choice by indicating when the station state that is not available is available. I also chose a map with street details to help the user recognize station locations by showing familiar places. I also changed the map color to gray and white to create depth and reduce visual intensity.

Flexibility and efficiency of use
Problem

Allow users to adapt common actions. Flexible processes can be performed in different ways, so people can choose the method that works for them. Based on this rule, the Home page I analyzed does not have any action prompts that users can perform frequently. Also, the Filter button should be combined with the search button so that the user understands that they can search with this method.

Solution

I created filter buttons for users to quickly see available sockets, nearest stations and dc, ac sockets. I reorganized the crowded stack of buttons on the right side, moving the filter button into the station search bar to allow detailed filtering in a new area. I made the notification button for new stations, app updates or news to be used in the user’s familiar touch area so that the user does not miss notifications. When the user clicks on the quick filter button, I created a card view so that the user can access the information of the relevant station. Thanks to these cards, I prepared directions where the user can see how many sockets are available at the station, directions to this station and details.

Final Result: Aesthetic and minimalist design
Which visual problems we have solved.
  • Navigation bar design and improvement
  • Visual inconsistent icon style
  • Search bar design
  • Station icons design
  • Quick filters improvement
Research 5W
Who uses the EV Charging station application?
  • EV owners who needs to charge their electric vehicles
  • People who are interested in purchasing an electric car in the future
  • Business that offer EV charging services to their employess or customers
What do they use the EV Charging station application?
  • To locate nearby charging stations and check their availability
  • To plan routes based on charging stations along the way
  • To monitor the status of their charging session and receive notifications when the charging is complete
  • To make payments for charging services and view their charging history
  • To find information about the charging network, such as pricing, station services and connector types
Where do they use the EV charging station application?
  • On their mobile device, such as a smartphone or tablet
  • On the road, to locate charging stations and plan their route
Why do they use the EV charging station application?
  • To ensure that they have a reliable and convenient way to charge their electric vehicle
  • To save time and avoid potential charging delays or issues
  • To reduce their carbon footprint and support sustainable transportation
  • To stay up-to-date with the latest developments in the EV industry and charging infrastructure.
Competitors
Strength
  • UI design is good
  • Easy to use
  • Route creation for long journeys
  • It can see all charging stations regardless of brand.
  • It provides in-app map navigation.
Weakness
  • Verification code problem
  • No fault notification
  • No booking option
  • No quick filter
Strength
  • UI design is good
  • Quick filter option
Weakness
  • Software bugs
  • Verification code problem
  • No fault notification
  • No booking option
Secondary Research

I analysed the user reviews of Voltla and Zes applications on Play Store and App Store and compared the competitors accordingly.

Personas | Empathy Map
Profile

Name: Yalçın Özhan
Age: 52
Job: Fruit exporters
Family Status: Married with two children
Location: Gaziantep
Application Usage: Instagram, Facebook

Needs
  • Convenient, reliable, and fast charging for her electric vehicle
  • Easy-to-use mobile application
  • Preference for an application that can respond quickly
Goals
  • Yalçın owns an electric car and wants to be able to find charging stations near his home and work to avoid running out of power.
  • He wants to have a seamless experience when using the app to locate, reserve and pay for a charging station.
  • His job requires him to go out of town frequently, and during these trips he would like to see the charging stations along his route.
Frustration
  • Yalçın is concerned about the availability and reliability of charging stations, as well as the cost of using them.
  • He may have limited time to charge her vehicle during the day, so he needs to quickly find and access and making reservation a charging station.
  • He doesn’ want to consuming about the sign-up and login process time- and complicated.
Style Guide
Onboarding Screens
Home, Stations, Login, Search Screens
Used Tools

Figma

Design Tool

Adobe Creative Cloud

Design Tool

Notion

Project Managament