Focus Earth - LED Light Sales Web Portal
Client: Focus Earth
Project Description: The goal of this project was to move the client’s spreadsheets to a web portal to allow Focus Earth employees and customers to interact and exchange data about LED lighting.
Role: Design Lead
2018 original design
In 2018 I worked for Vibe Ventures. Focus Earth was one of their clients before the company dissolved later that year. I accomplished the original goal which was turning spreadsheets into a web portal. I worked closely with the client and developers.
7 different user types
Three internal user types: super admin, admin, and sales admin
Four external user types: electrician, general, real estate, supplier
This required for the web portal to be built out in 7 different ways for each login type.
communication with the dev team
Something that the client needed was effective communication between the designs and the development team. This is a complex project with a lot of functionality and data that communicates with the front end. I created a PDF document that calls out important parts of the design with an explanation of the functionality.
Design Updates - UX/UI
In late 2020 the client reached out explaining that during user testing some of the functionality needed an update. Specifically, the energy calculator which is the most used tool on the platform. It is used by sales users to create and change proposals to clients. They need to be able to quickly change out the recommended LED light. During a discussion with the client, we realized that the UI was not as effective as it could be. This called for a UI update.
visual development:
Over the course of 2 months, I took an iterative approach to the new UI design. I began the design with the most important part of the redesign, the energy calculator (as explained above). The design changed based on expanding the viewport to fullscreen, functionality, and best visual experience.
design problem:
Limited space to view the information
solution:
Expanding workable space. The previous design had a small viewport which made viewing lots of data at the same time challenging. For a data-heavy project, this needed to change. To expand this, I decided to make the left bar into a hamburger menu to expand the main UI to be full screen and removed the viewport feel. The page is now full screen and able to scroll with a small sticky header.
Previous Design (2018)
Updated Design (2021)
design problem:
Needed to show more pertinent information to the client on the project details page. Proposals are the most important thing to a real estate user.
solution:
Use the newly expanded view to show details about each proposal that was hidden in the previous design. Now the user can not only see critical information for each proposal such as system price and cost/year, but they can see which proposal has the best offer from each category (bold and green).
Previous Design (2018)
Updated Design (2021)
design problem:
Lack of hierarchy
solution:
On the left is a screenshot of the live prototype of the previous design. On the right is the redesigned page. This is a report that shows the user proposal details. To establish hierarchy I asked the client questions about the primary function of this page and information that is important for them to quickly reference. I then created a layout that achieved this. From there I made sure to add visual hierarchy through font choices and color.
Previous Design (2018)
Updated Design (2021)
CATALOGue:
The LED light supplier (one of the 6 users on this web portal) can view their catalogues, edit details of each product, search for products, and add new ones.
energy calculator:
This is the single most important feature for the sales associates. The flow you are seeing shows:
Projects
Project details
“Proposal B” which shows a proposal to switch from a customer’s current lighting system to LED with reports.
Energy calculator “view all”
Energy calculator “Offices”
Editing energy calculator to change LED light.
The sales associate often needs the energy calculator to quickly see the light replacements from existing to recommended across the project. They also need to be able to quickly change the recommended LED.
Project Take-Aways
Moving from spreadsheets and phone calls to a digital application changes the business entirely for the better. This allows for the business to scale quickly and be managed easily. Focus Earth can now serve their customers, suppliers, and electricians in a seamless flow. Being project manager allowed me to work problems out with the client directly. Our problems were solved in a user-centered way to ensure the best outcome for the users.
