Sarang
Shukla
Information
Architecture
I started asking question about the section and basic features during the daily UX sync up meetings, we started with the basic site structure and with more refinements and iterations through out the project I keep improvising the IA as per the User role and access.
EV Charging Station
Monitoring System
Designed entire ecosystem to monitor EV charging stations that increased productivity by 70% and revenue by 35%. With modules like reporting, alarms, site configuration, user and customer management site.
Mapping With Design Process
MATARIALISE
EXPLORE
UNDERSTAND
Empathise
Business Goal
& Requirenment
Problem
Statement
Stakeholder
Interview
Competitive
Benchmarking
Define
Information
Architecture
Pain Points
& User Aims
Persona and
user Journey
User Flow
& Task Flow
Ideate
Paper Sketch/
LowFie Wireframe
Highfie
Wireframe
Design
Iteration
User
Testing
Prototype
Functional
Prototype
Visual
Design
Design System
Visual Assets
Mockups / Design Documentation
Test
Design Iterations
for Improvements
Design
Discussion
User Testing
& AB Testing
Feedback
Analysis
Impliment
DevGromming Session
UX/UI Audit of Development
Development
Support
Design Asset
Preparation
Case Introduction
The aim was to design a web app to maintain the EV Charging Station by monitor the health of EV Chargers, which can be sell a product to business who owns the EV Charging Station.
Product Vision
Creating a product which can sync with the IOT and provide the exact run time status about the alerts and warning generated by deviations in the electrical equipments. Mimicking the physical site digitally to know the location of electrical equipment with the ability to setup new site digitally. Sticking a balance between assisting the site engineer with the exact problem in the system and guiding him how to fix the issue.
The Design Challange
Hitachi Energy Ltd is a global technology company headquartered in Zurich, Switzerland. The company provides sustainable energy solutions to buildings, utilities, industries, and infrastructure sectors
About Client
-
UX/UI Design + BA Support.
-
Established design system from scratch.
-
Conducting UX grooming session before the start of each sprint with development and testing team.
-
Assisting BA in writing acceptance criteria of user story.
-
UX Audit to make sure development meets the UX/UI standards prior to every client demo.
-
UX research , wire-framing, prototyping. Visual mockups following brand guidelines.
My Role
My Team
Design Delivery Lead (Myself)
Developers
Testers
System Architact
BA
1
1
5
1
4
Kickstart PROJECT
Pain Points -
Background Research
Initial requirement was given to me by the project manager which was "We have to build a web app that can monitor the EV chargers current status and it should have dashboard to track every thing" i went through the BRD and prepared a list of basic question about the current business process, clients, potential users of the application and we scheduled the meeting with the product owner. below are the findings from the requirement gathering.
User Base
-
Primary User of the application is the site manager who is responsible to keep manage and track the health of charging station and its resources.
-
Secondary User is the super admin who will setup the initial account and help with the onboarding with the new site and customers in to the system.
Defining Problems
After having couple of meetings with stakeholders we have enough information to jot down and define the problems areas to target.
-
Clients want to build a product for maintenance team and site owner to monitor the charging station remotely.
-
To convert physical site into digital ERP system.
-
Sync of IOT devices to ERP system to capture runtime alarms.
-
Allocation of multiple site to engineers.
-
Digital Mapping of the Complex process of sit installation .
-
Traveling to multiple site in a day is time consuming.
-
Engineer has to find the root cause of the problem which is time consuming activity.
-
Hard to predicts warnings before fault comes-up.
-
Hard to find user manual while diagnosing a fault.
-
Engineers has to work in pressure and act rapidly on short notice.
-
Unavailability of engineer at the right moment.
Stakeholder Interviews
After the initial requirement gathering with the product owner and with some brain storming with project manager we consider product owner as one of the primary stakeholder, as they are the engineer who install the physical sites as well, i consider him as one of the persona to gather the initial set of pain points in their daily job.
Below are some challenges that came out during the discussion with the engineering team.
Defining Persona
We defined 3 Persona based on the discussion with the clients
-
Super Admin (Creates the site owners/customer who owns the site).
-
Site Admin (customers to maintain sits and engineers),
-
Site Engineers.
Proposed solutions
-
Site Detail Screen to monitor current state of EV chargers.
-
Alert & Warning Tracking Section.
-
Site installation & Allocation Flow.
-
Assets/Site Configuration Panel.
-
Energy consumption tracking by ReportingSystem to predict site performance.
After having the basic project understanding i came up with below target areas to that caters problem areas came out during discussions
User Person
I created the persona by talking to project manager as he was involved in the project from the start and was working closely with the product team sitting in japan, i prepared a list of question to know the pain point, my manager scheduled couple of meetings with cross verify the challenges of the site engineers. and i finally drafted a persona to move ahead.
Customer JOURNEY
User & Task Flow
I started working on the User Flow and features as per the high priority functionality mentioned in the user story and started having the refinement session on the first draft flows sprint wise with the help of internal brainstorming session and couple of reviews done we finalise the User and task flows.
Iteration 2
Final Concept
Iteration 1
Conceptualisation
I started with digital low fidelity wireframes to quickly minimise the turn around time and to show case how information will flow on the screens, after having around 4 iterations we finalised the logical flow and due to strict deadlines i was asked to skip low fidelity wireframes and to create Hi fidelity visual mockups.
Design System
-
Followed 12 column layout grid structure.
-
Created and maintained design system from the scratch.
-
Followed brand design guidelines .
-
Created iconography.
Created Design system as per the digital branding guidelines
Visual Design
After couple of wireframe iterations IA, user flow and scenarios are frozen, I proceeded with UI design the final screens in Figma, by following the brand guidelines and the design system.
Final Application UI Mockups
A digital campaign to raise funds in-order to continue research and to build an eye-wear product which can cure seasonal affective disorder by improving sleep quality.
Website for marketing and raising funds to build the product.
Product Design
B2C
2023
App To Control Eye Mask
