Dave | Product Designer

Homepage Redesign — Phase 2: Budgets

Location3 — a digital marketing agency with a local marketing platform

Platform: LOCALACT

Role: Sole Product Designer, Front-End Developer

Team Members: Project Manager, Angular Developer

Design System: Material

Primary Tools Used: Whiteboard, Figma

Additional Tools/Skills Used: Visual Studio, Angular, HTML5, CSS3

Requirements

After the first homepage redesign, we began to gather more data on how users would prefer to see their KPIs and interact with the platform. Some of our stakeholders were concerned about showing the negative trends in data, without giving more context. Viewing data by specific service became a priority and seeing changes over time was something we wanted to be able to break down and explain further on internal pages. As I understood, we would be adding more data to each service, but not necessarily all of them. There was also the possibility of adding/removing services in the future. Additionally, I knew that stakeholders were interested in adding budget recommendations for specific locations, with the ability to apply them from the homepage.

Solution

I had some breaks in between other projects to begin working on solutions to the new homepage challenges. With the support of my director and team, I created an alternate version of the latest homepage update. Instead of a UI layout based on the specific data categories and filtered by services, it would be service-based to allow us to display any data we want in the future for each individual service. This would allow us to remove the filters and opened up space for the recommended budget section for each service, where a unique list of locations would show the ideal budget and enable the user to apply them right from the homepage. If the ideal budget is already set for a location, it would be labeled as “optimal”. I gathered all of the data requirements for each service to understand the differences. I started brainstorming ideas on the whiteboard and eventually came up with what I believed to be a solid solution. I went right into mockup designs per the direction from my team leader.

Service component design created in Figma

Using the existing data on the homepage, I first created a reusable component that would be used for all services. This included all of the possible content we would want to show for any service.

For the existing data, I reduced the size and overall noticeability of the data trends without removing any of the data. I also upgraded the icons to make it look more attractive. I added the Recommended Budgets section to be a focal point for each service. I used a map pin icon to visually tie the “Enrolled Locations” section to the individual locations in the recommended budgets list. Each location also had a link on it for the user to go directly to the Monthly Budget Management page for that location, saving several clicks. I understood that more UI would be needed for applying the budgets directly from this component, so I sketched out that process on the whiteboard before starting Figma designs.

Upon reviewing the component with the team, it was determined that we would need to show all enrolled locations for each service. For many users, that meant showing less than 5 locations, but for some, it meant showing hundreds. I designed out how all of the services would look on the page. I then decided that using a scrollable frame with a maximum height applied with CSS would be the best way to show the longer lists of locations without throwing off the UI layout. I made sure that the maximum height would partially show the next item in the list, so the user would know it is scrollable. I also wanted to make sure that each section within each component would load individually, in case some lists took longer to load. Users would not be stuck waiting for the whole page to load. I included the loading icon in the designs to ensure that all stakeholders understood this.

The concept was an absolute hit with stakeholders. They loved all of the new ideas and opportunities to see all of the data in one screen without overloading the eyes or using filters. Those previously concerned about the negative data trends being so prominent on the page were feeling much better about the new layout. Last thing we needed was the process for applying a budget from the homepage. We determined as a team that this process would happen in a modal window to keep the user on the homepage.

Step 1: When a user clicks “APPLY” from any location under any service, a modal window will appear to confirm all of the data included in this request.

Step 1: Apply Monthly Budget confirm modal

Step 2: User sees that the request is loading.

Step 3: User sees that the request was successful and is prompted to stay on the homepage or view more recommended budgets for that location.

Once details and designs were finalized and approved, I built the fully-responsive UI foundation in Visual Studio Code with HTML5 and CSS3 in an Angular environment. Users and stakeholders were delighted with the update, and it earned the team more trust within the organization, allowing us to bring more ideas to the table.

Regrets

None on this one. I was most proud of this update having taken the initiative to create and deliver this concept to stakeholders and users.

Lessons Learned

Taking initiative at the right time can go a long way with stakeholders and users.