Initially, the LOCALACT homepage for all users was a few simple table views displaying performance over the last 30 days. Users needed to be able to not only digest this data easier but understand what it means over time. Users also needed a way to view data filtered by the services they're enrolled in.
I began gathering more requirements by meeting with stakeholders and coworkers who interacted with users the most. They all wanted to see more charts/graphs and actionable data. So this is where I started with my design process using the all of the visible data on the current homepage.
After reviewing the wireframes with the PM and engineering team, we determined that adding charts/graphs would be out of scope for our timeline. We landed on a compromise— showing a simple positive or negative change in the data versus the previous 30 days would be the MVP. We would hide additional context about each metric behind a hover tooltip, to reduce clutter on the page. We also determined through click data that the “Learn More” section was seldom used, and not updated often. I thought putting it into a dropdown panel from the header would be the best place to hide it in plain sight, while also giving the user the opportunity to access it throughout the site rather than just the homepage. It would also allow us to add a notification icon when there are new resources to review.
After gathering additional requirements and finalizing wireframes, I began designing out the page using common design patterns that I established through previous work as well as continuing familiar design patterns from the rest of the site, in an effort to not overwhelm the users with this update. Using a card-based layout, I utilized font sizing to emphasize critical data and set it apart from secondary and tertiary data and content. I discovered during the research phase that most, if not all users spent less than 10 seconds looking at the homepage. So, I wanted to make sure this new homepage not only provided new and interesting content, but also acted as a gateway to the rest of the site to increase user engagement (View All... links). For filtering the data, I used recognizable service logos to create simple toggle buttons.
After reviewing the phase 2 designs with stakeholders, it was determined that users would need the ability to filter the “Ads” and “Listings” sections separately, due to the fact that users may have different service enrollments in each section. Stakeholders also expressed a new desire to highlight services that users are not enrolled in somehow in the UI. With that feedback, I went back to Figma to start on the next round of designs. I decided that the Enrollment Summary would need to be its own section, if we wanted to draw attention to unenrolled services. I continued a design pattern created during the Monthly Budget Management design process to draw attention to those services.
Once this round of review was completed, we were nearly there. The feedback from stakeholders was positive. The only design tweak we needed to make was removing the enrolled locations count from the filter buttons. I created 3 designs to show how the layout would break down as the browser width decreases. Note: this app was never intended to be mobile friendly for phones, so we only designed down to tablet size.
When the V3 designs were approved, I built the fully-responsive UI foundation in Visual Studio Code with HTML5 and CSS3 in an Angular environment. I then handed it off to the developers who made the page functional and displaying live data. Once that was complete, I helped with QA to get it across the finish line and ready for deployment. Once released, the new homepage was well-received both internally and with our users. Although it was not recorded, we knew that the update helped increase engagement within LOCALACT across the board through our analytics data in Heap and account management teams.
Our team knew that another redesign would be coming sooner rather than later and this project was treated more as a baseline update than a new feature. With that in mind, we did not engage with users enough during requirements gathering or effectively gauge the impact of the update once it was released.
Updating the UI to highlight the changes over 30 days within a marketing platform can have unintended consequences when there are only negative changes to display. There is a fine balance to showing change over time while still giving the users a positive outlook on their data. Once a user gets clarity on their data, they will next want to know how to effect more positive change. Ideally, the platform would provide this data. If not, it can overwhelm your customer support team after release.