INDIESEL Website
A power management startup under Telkom Indonesia
Project Period:
Q1 2020
Project length:
4 weeks
Status:
Developed
Overview
INDIESEL is a platform that have capabilities to monitoring, reporting, and forecasting the availability of generator fuel and electrical activity with high accuracy, precision and real-time data, so that there is no sense of anxiety and doubt during a long-term power outage.
Challenge
With all of the service that they provide and their role on the power-related industry, a very powerful website are needed to reach more top clients and gain their brand awareness. It was a cricitcal project for INDIESEL at the time.
Project Environment
Basically this project was only involving 3 people with high determination:
-
Me as an UX/UI Designer and also Project Manager
-
A Full Stack Developer
-
A CMO of INDIESEL as my director and the representatives of stakeholders
The Brief
Creating a website that will give a great experience for INDIESEL’s prospective customers to know more about the company and their product, also do an early regstration for their services If possible
Designing an easy flow for prospective customers while they are doing an early registration for INDIESEL services
Make a great look and feel of the whole website based on the INDIESEL brand guidelines
My UX Process
Research
Who are the customers?
What is the product?
What are the goals / deliverables?
Collaborate and build relationships
Stakeholders, Developers
Design (early low-fi) and socialise with stakeholders
Keep everyone in the loop, to prevent sync issues with key stakeholders
Create Final Prototype (hi-fi)
Visual representation of the final product before handoff
Final Test
To make sure that the product will make user job's easier
The Handover
Assisting developer while coding in html/css/js (hi-fi) and socialise with stakeholders untill the final product are ready to launch
Research
First of all, i learn about the company base on the keynote. After that I do a light user research, in this phase I try to understanding the problem, what’s the pain point, and know the user profile.
I’m choosing Unmoderated Usability Test as the method. Why so? Because INDIESEL are based on Serang, Banten and the user that can be participate for this research also based on greater Jakarta area, which doesn’t allow me to do moderatd test. And this is key information
My research on this project are only based on stakeholder input and overview. We can’t really do moderated or even unmoderated usability test direct to users due to limited access on it. Most of actual users are head of Telkom Witel, which can’t be casually contacted. And with out limited time to actually build this website (yes we only have 3 weeks from scratch to development and product launch) we can’t really do all of that deeper testing.
After I finish field work I start to analyze and report the result that I get from the stakeholder. Base on the report, then I start to create the user persona.
User persona will be my guide on how is the realistic representations of the key audience segments.
Findings/Outcomes
Base on stakeholder’s interview and also the user persona that I create before, here is the outcomes that I get:
-
The stakeholders didn’t really know what kind of information exactly they need to be on the website. Throught the CMO they only give me a keynote document of their company profile, so I have to build the fundamental base on information from the keynote.
-
Many of prospective customers are not really familiar with the new digital system (IOT) on the product of INDIESEL, and the majority of them are boomers generation
-
INDIESEL have a quite complicated services scheme to offers. It need to be simplified so the customers wouldn't feel overwhelming while picking the right shot for their need.
After getting insights (and a lot of coffee), i simplified all of the problem above into “How Might We” notes. This surely will help me to trigger some creativity to design the actual solution of those problems.
HOW MIGHT WE
CREATE a great website
FOR prospective customers/users with majority of boomer and X generation in it
TO easily understand INDIESEL and sucsefully do an early registration for their services
SO there is no sense of anxiety and doubt during a long-term power outage because their power plant aleready have a great INDIESEL technology.
Set The Priorities
And next, what solution should be solved first? for helping me to decide it i create a priority matrix to decide which problem comes first to solve.
Design Solution
After the research and finding part, then it is time to create the design solutions and tackle all the problem mentioned above.
I started ideation with a taskflow, it help me to visualize what should be inside of the feature, and how might the users interact with it.
After creating the taskflow, I start to sketch the low-fidelity wireframe to vizualize my ideas. With a pencil and sketchbook, my vision is diving deep into it. Here's a snippet of the lo-fi design I just worked on:
Medium Fidelity Design
After all low fidelity design are done, on this phase i start to make a medium fidelity wireframe. This process will help me visualize how the actual web structure looks like. It also assist me to organize all of the components needed for the web, so I can make the full fledged design system before starting with the high fidelity stuff.
Ah and one more thing…
Before I start to build the whole high fidelity wireframes, i need to make the user flow first, it will help me to create the real prototype later on.
After all, as what I have on medium fidelity wireframe, I started to create the base design system for the website, such as used fonts, colors, and all basic components needed.
This website’s concept also need some illustrations and minimal real photos. Because the user age factor. We agree to put minimal written information and interlude it with some visual representations (illustrations and minimalistic real photos).
And then, the last thing to do on this phase is to show the medium fidelity, user flow, and design system to stakeholders and seeking for their feed back (and approval before moving into the next step).
The Finale
This is the final phase of the design process that will give the visual representation and interaction of the website, also validation process before the whole final design will be shipped ed to developer.
I start to convert the medium fidelity wireframe (which has been approved) into the high fidelity. This process will give a look on how the website actually looks like, and it will help to create an interactive website prototype to shows.
I immediately start to make an interactive prototype from high fidelity design that I just finished before. This prototype will be the final representation on how the website looks and feels.
Final Test
So the actual prototype of the website is done. Now is time to show stakeholders the final product design, and maybe some actual user if possible. This process are needed to validate the final design concept, does it works well, or maybe not at all.
After the test, I got the result that stakeholders and one of their prospective customers (as a user) did not experience any complains about the design. But there’s a few minor feedback such as font size (need to be bigger on some section) and overwhelming copywriting (need to be simplified).
Design Handoff
In term of hand-off process to developer, Zeplin is our best friend. We use Zeplin to collaborate with each other, because it provide the basic html and css really well, so developer can work faster with that fresh raw code.
Outcomes & Lessons
At the end of this project I have success to build the great experience that customers desire and also make easier way for customers to know about INDIESEL. Beside that, I think this website might have an several updates in the future due to what they might provide on the services line. But at this time this website is already settle with all of what they have.
Final Words
I am super proud to have been part of the team working on the core design of INDIESEL and super excited to see all those company will never running out of electricity ever again!
I am enjoyed this project where i had the luxury to work with a talented product team to build INDIESEL from the ground up. Together we established the core functionality of the website and got it fully loaded to turn the most of company's electricity problem upside down!