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
information architecture & Understanding users
This project was unique in that are 7 unique user types to use this application. There are external users to the company such as electricians and suppliers. There are also internal users with varied permissions. One main challenge was discovering how to onboard each type of unique user.
Each user type will have different functionalities than another. This required us to sit down and create the information architecture to map out who had the ability to what and how that connected to other users. I illustrated each user type to help communicate with the client and developers while discussing this topic.
Style guide
This project required me to communicate well with the developers and this style guide was one part of many diagrams to explain functionality and style to the dev team.
onboarding process
The client and I spent a lot of time perfecting this onboarding process. It was important that the users could easily identify how they would sign up for the application. The solution was a screen that asks the user what their intention for signup is using radio buttons. This will then send them to the according signup screens. You can see from the gif that the signup process has lots of options which we differentiated between using color and columns.
2019 updates
After working with Vibe Ventures I was hired by Focus Earth months later to create some updates to the application. One major update was creating a more user friendly way for the suppliers to signup and provide details on their services. The original signup that had several screens for the user to describe their services. Now they can use the drop downs with a visual circle to represent their data.
GENERATING REPORTS
Another major challenge was having the ability to create reports for the customer. These reports have to be edited by certain users as the customer needs new quotes on lighting.
wireframes
As the only designer on this project I had a very large task. This project only lasted a few months so jumping quickly to high-fidelity wireframes was imperative. These wireframes were then presented to the developers with call outs explaining each and every feature.
2020 Projects
Goals:
To make the energy calculator faster and easier for the Focus Earth sales team to use.
Update the UI for a larger workspace
Feature adds
design problem limited space to view the information
solution: expanding workable space
The previous design also had a small viewport which made viewing lots of data at the same time challenging. 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.
design problem: lack of hierarchy
solution: contrast
On the left is the working 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.
updating the ui:
A style guide is still in the process of being created. The next step will be categorizing the colors to show which ones are meant for layout, buttons, and special occasions. There is also more work to be done creating components in Figma.
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.
