Lectrium
Making homes EV-ready
01. Introduction
Role: UX/UI Product Designer
Duration: May 2022 - June 2022
Tools: Figma, Maze, Zoom, Marvel, Google Hangouts, Excel
Platform: Desktop
Problem:
Lectrium is a company that strives to make America EV-ready. They needed a platform to allow vehicle dealerships across the country an easy way to add, store, and manage an abundance of customer information.
Solution:
Through research and iterations, my team and I developed a platform that not only helps our users (dealership personnel) manage customer information with ease, but also incentivizes dealerships to work with Lectrium.
Identifying the Problem
02. Onboarding
Making homes EV-ready
At my first standup meeting, I was introduced to Lectrium's team. They introduced their “staging website”, which was an early mockup of their platform "based on intuition". My task was to improve the staging website using UX methodologies.
​
I created a Project Plan, which detailed all of the UX-related methods I would implement to redesign their website. This included deadlines to ensure that I would be able to create a high-fidelity website in three weeks.
03. Heuristic Evaluation
The first order of business was to conduct a heuristic evaluation to understand the general template Lectrium wanted to go for. After acquainting myself with their model, I made three assumptions.
-
Users might be confused by the separate “add customer” buttons on the home screen
-
Users might want a contact page to contact Lectrium
-
Call to action buttons were the same color as other buttons. Users might appreciate more contrast or differentiation
1
1
1
1
1
1
1
3
3
3
3
3
Lectrium's staging website main page​
04. Usability Test for the Staging Platform
I had my own assumptions, but what about my users? I conducted a usability test to understand how users navigated the initial website, along with other major pain points for me to target. I also wanted to see if my assumptions were accurate.
​
I used Marvel to create a prototype for the staging website. Marvel allowed me to quickly create a usable prototype of the current website without having to recreate every page in Figma.
"I don't know how to navigate through the website"
"I want consistency and organization."
My findings showed mixed results. The main issues seemed to revolve around confusing navigation and suboptimal UI.
Our users struggled completing tasks because they found the verbiage and button placements confusing.
Users also felt that there was too much text and could be more condensed and following the same format.
Users had immense trouble locating the Profile CTA and assumed it would be in the top right
As predicted from my heuristic evaluation, users were confused about two different customer buttons.
Users reported not knowing what CSVs were.
Home page of Lectrium's staging platform
Users found reading the first and last names on separate lines difficult
Users were frustrated by the lack of consistency throughout the website
Users found the charger status' unclear and hard to read
05. Comparative Analysis + Roadblock
While researching competitors, I encountered my first roadblock. I only had access to their websites on a customer front, so I couldn’t view how competitors managed their customers.
​
To work around this, I researched comparator companies that dealt with managing information, rather than our direct competitors that offer Electric Vehicle installation services.
Google Drive was the comparator I focused on. With over 1 billion users in 2018, we knew that there was a high probability of shared experiences. Their sidebar was reminiscent of the Lectrium staging website, so we used Google for inspiration and as a way to introduce familiarity to users.
06. User Interviews
To understand our users and their painpoints, I conducted user interviews and created an interview script.
With all of my research in place, I started the Define stage where I began synthesizing data. From my 5 user interviews, I conducted an Affinity Mapping of over 150 insights. I sifted out three main themes:
1
"There are many features I enjoy when using Customer Relationship Management software (CRMs).​"
Users appreciated snapshots and dashboards, filters for searching customers, and color coordination of different statuses.
2
"There are certain customer identifiers that I find truly helpful​."
I discovered which customer identifiers were of utmost importance, and how users enjoy viewing them.
3
"I feel overwhelmed when viewing customer information​"
Users expressed feelings of overwhelm when using CRMs because there’s a great deal of information on the interfaces. This led to increased frustration and poor user experience.
07. User Persona
With a better understanding of how dealership personnel use software to keep track of their customers, I created a User Persona. Designing for my persona allowed me to target a broad group of users.
This is Jerry. He's a guest services employee who wants to easily add and search customer information. He tends to feel overwhelmed when viewing their software, and finds searching for customers troublesome.
​
At the end of the day, he wants to be less overwhelmed, have better search filters, and a way to understand how to use the confusing platforms.
My user persona
08. Problem / HMW Statements
With Jerry in mind, I narrowed my scope even further by developing Problem and How Might We Statements.
The combination of my user persona, problem statement, and HMW statements would keep me on task as we headed toward the design stage.
Problem Statement:
Dealership personnel need a streamlined way to upload and manage customer information with accuracy so that they are willing to upload the information for Lectrium to source leads.
How Might We Statements:
1)
How might we create a portal that’s intuitive and easy to use so that dealerships don’t have a hard time uploading and finding customers’ information?
2)
How might we teach our dealerships how to use our portal so that they have an in-depth understanding of our platform?
09. Design Studio
Once I narrowed our scope and identified problems to solve for our platform, my team and I participated in a Design Studio to brainstorm ways to design for our users. We focused on our task: to streamline customer information uploads.
Our top 3 priorities when designing:
1.)
Customer List
The customer list and information caused users to feel overwhelmed. We needed to design a system that reduced overwhelm while relaying important information.
2.)
Dashboard
A function that displayed essential business information quickly was important not only to our users, but to Lectrium as well.
3.)
Navigation
Navigation on the staging website was poor. We needed to rectify the current navigation issues, while presenting more intuitive pathways.
With heavy inspiration from Google Drive, I included all customer search-related functions on the left.
Adding customer CTAs would be included in one spot, opposed to two separate spots.
I included filters so that personnel could keep the most relevant information on the screen. This allowed for less clutter and less overwhelm.
Adding a search function was extremely important. Users mentioned this as a key component in searching for customers in their database. In an effort to reduce overwhelm, I included a reactive customer list which would be blank upon opening the software. Information would be shown once personnel started typing in the search bar.
I re-ordered the information displayed to prioritize importance, according to our users
Similarly to Google and many other websites, the profile page would be included in the top right-hand corner. I also shortened the dealership identifier to include only the type of dealership and location
I also added visual cues for charger status' to allow personnel to quickly identify status urgency.
Names would now be displayed on the same line. I also opted for the last name to be shown first to narrow down search results more efficiently.
According to both users and Lectrium, dashboards were important. Since Lectrium did not have one on their staging website, I created one.
​
While researching other dashboards, I discovered that Business and Customer Data was important. I added both sections so that dealerships and Lectrium could keep track of various data such as profit, number of customers, and customer satisfaction.
​
I also added a "Today's Agenda" section for easy team communication.
We presented our research-based sketches to the Lectrium team to make sure that our ideas aligned with their business and software goals. Overall, they were extremely satisfied with my ideas.
Lectrium's software developer mentioned that adding filters and a reactive customer list would be too difficult, so those features would not be moving forward in our iterations.
Lectrium also really enjoyed the dashboards I sketched, but wanted to prioritize business data. They also informed us of their subscription plan, a business feature that would need to be incorporated into our designs.
10. Mid-Fidelity Prototype
With Lectrium's feedback, I moved on to prototyping. This iteration would be used in our next round of usability tests. Here are the main features I improved in this iteration:
Homepage
Instead of having users being overwhelmed with a lot of customer information right away, they would be greeted by the homepage instead.
Here, a welcoming image greets the user, while offering general information about the platform.
​
I also included accessible links to resources by Lectrium for dealership personnel to refer to.
Customer's List
To optimize search and reduce overwhelm, I minimized on-screen information. Users prioritized name, contact info, location, car model, VIN, and status as vital identifiers. Less crucial details like full address, purchase date, and charger type can be accessed by clicking on the customer's name.
Navigation Bar
After consulting with my team, I decided to move navigational features to the left-hand global navigation bar. Looking at Google Drive, I added both upload options under the "new" title.
I also added iconography to offer users visual cues as to what each option entailed.
CSV Tutorial
During usability testing, users struggled to utilize CSVs on the staging website. They were unfamiliar with the purpose of CSVs. To address this, I introduced iconography to visually represent the purpose of CSV uploading. Instead of a pop up window, users are now directed to a separate page with instructions on how to successfully upload CSVs.
11. Usability Testings of Mid-Fi Prototype
With a new prototype set up, I conducted another round of usability tests to assess my iterations and confirm I was solving problems.
The results of the usability test for my Mid-Fi prototype proved that we were headed in the right direction. Time to complete tasks & difficulty ratings decreased.
​
After another round of usability tests, our prototype achieved a whopping 100% success rating. Users' reported difficulty rating dropped from 3.4 to 2.3.
User feedback:
"Easy and intuitive."
"Very simple and straightforward."
"No issues or difficulty."
13. Design System
Satisfied with the usability test results, I moved my designs to Hi-Fidelity. The development team informed me that a Design System on Figma would be the best way for us to handoff my designs. Utilizing Atomic Theory, I aided in creating the atoms, molecules, organisms, templates, and pages that would make up Lectrium's dealership platform.
14.
Final Prototype
After completing all of my research, design iterations, and a comprehensive design system, I arrived at our final prototype. With this, Lectrium was ready to create partnerships with dealerships.
Onboarding
Suggestions from both users and Lectrium prompted the addition of an onboarding flow to help dealership personnel understand how to navigate the website.
The onboarding flow also allows users to complete sign-up logistics, such as choosing a partnership plan between the dealership and Lectrium, terms & conditions, contracts, and account creation.
Upon logging in, users are greeted with a hero image and a welcome message, instead of customer information. Helpful resources, such as calculation tools and informational articles, are readily available for assistance.
​
Resource articles created by Lectrium can also be found here so that users can look up and relay important information pertaining to electric vehicles and battery installations.
Home Page & Resources
Dealership specific profiles were an essential feature that caused a lot of confusion in earlier iterations. Now at the top right corner like most websites, users can easily access their profile by clicking on the user icon.
​
To edit, users can click on the edit CTA under their profile pictures.
Profiles
Managing Customers
To add customers, users can click on one of two options. For single-customer uploads, click "Add Customers". Here, users can fill out necessary customer information.
To bulk add with a CSV, "Upload CSV". Users will be taken to a brief explanation and tutorial on how to properly CSVs. They can then upload their CSV at the bottom.
With my improved customer information list, searching and finding information is easy. Simply use the search bar to find customer identifiers. The list will show the most relevant information, with additional information shown upon click.
Support Page
Another feature users desired was a way to view Lectrium's contact information. I created a "Support" tab in the global navigation bar to act as a hub for users to seek out information.
​
Users can view Frequently asked Questions, a resource page, and a contact form with Lectrium's phone number through this tab.
Dashboard
A dashboard was incorporated after feedback from both Lectrium and users. Our dashboard is a great way for dealerships to visually see data and statistics. The number of installed chargers, conversion rates, payout history, and other business endeavors may be seen here.
​
After further discussions with Lectrium, we brought to light a gamification system to incentivize dealerships with benefits through continued use of our platform. Progressing through tiers will bring various benefits.
15. Future Steps
Although the results of the latest usability test were promising and confirmed we were making improvements, there is still work to be done.
1. Despite desktops being the most utilized device for our users, a mobile app could serve well for users who require more mobility.
​
2. Continuously work to streamline adding customers. This was a huge topic that the Lectrium founders noted, so more research into CRMs and their process would be helpful. Usability tests after we design would help as well.
3. Work with the co-founders to flesh out the dashboards and gamification more. Include more information they deem important.
​
4. Once everyone on the Lectrium is satisfied with the designs, work with the development team to work around software limitations.
16. Conclusion
After finishing our design system and high-fidelity prototype, we presented and showcased our work to the entire development team. After a seamless handoff to the software development team, I concluded my time with Lectrium.
​
Working with the Lectrium team was an incredible opportunity. Collaborating with Lectrium's co-founders and development team to create an essential part of their business was enlightening.
Not only was I presented the chance to continuously work on my UX skills, but I learned how to work with other teams, pitch research-backed iterations, advocate for users, and design around software limitations. Working with the co-founders provided insight into the business atmosphere, strategies to generate business, and networking. I gained a lot of real-world experience and am incredibly grateful to have been given the opportunity to help Lectrium advance their company.
​
