Forrester Profile Management
Forrester Profile Management
I joined Forrester right after the SiriusDecisions acquisition in the middle of everything getting a major overhaul. Forrester suddenly had twice the customers, product offerings, and a platform merge to tackle. We were phasing out all the old SiriusDecisions systems and bringing everything under the Forrester brand. The goal was to smoothly transition Sirius users to Forrester, where they could manage their profiles, subscriptions, account preferences, and even connect with Forrester analysts—all in one place.
Role
Design Lead, Researcher, Project Manager
Duration
July 2021 – September 2021
Process
Discovery, Ideation, Design, Handoff, Reflection
Tools
Figma, Photoshop, Illustrator, MS Teams
Role
Design Lead, Researcher, Project Manager
Duration
July 2021 – September 2021
Process
Discovery, Ideation, Design, Handoff, Reflection
Tools
Figma, Photoshop, Illustrator, MS Teams
Role
Design Lead, Researcher, Project Manager
Duration
July 2021 – September 2021
Process
Discovery, Ideation, Design, Handoff, Reflection
Tools
Figma, Photoshop, Illustrator, MS Teams
Establishing the Problem
- Personalization Options: Allow users to update profile details, preferences, and interests to tailor their experience.
- Cross-Platform Consistency: Ensure the design integrates seamlessly with existing tools, platforms, and branding.
- Quick Links: Include shortcuts to frequently accessed features like subscriptions, settings, and help resources.
- Subscription Management: Provide clear options for managing subscriptions, billing, and renewals.
- Interconnectivity: Add links to related services, such as engaging analysts or exploring relevant research.
Discovery
Understanding the Customer
A good starting point is reviewing user personas. By understanding the most common user types from both Sirius and Forrester, we can start getting some insights on their browsing habits. Both user bases are made up of high-level executives focused on driving growth in their organizations through strategic outcomes so we should find ways to empower them in this regard.
Emerging Themes From User Stories
Before this project kicked off, one of my coworkers ran a moderated study to gather insights. The takeaways were that users get overwhelmed by too much information, which often leads to abandonment. Basically, we don’t want to throw the kitchen sink of features at them. From the analysis, a few clear themes emerged about what users really want:
- Easy control over alerts and communications.
- The ability to easily update their personal information.
- A clear and simple way to connect with Forrester customer service.
- Transparency and control over their subscription services.
Ideation
Exploring the Possibilities
Before diving into design, it’s crucial to have a clear plan of attack. The goal is to maintain Forrester’s existing functionality while adding meaningful design improvements. We can stick to traditional profile page conventions and let them guide us. Sometimes, it’s smarter not to reinvent the wheel—especially when deadlines are tight. This makes tabs our friend.
Ideation
Exploring the Possibilities
Before diving into design, it’s crucial to have a clear plan of attack. The goal is to maintain Forrester’s existing functionality while adding meaningful design improvements. We can stick to traditional profile page conventions and let them guide us. Sometimes, it’s smarter not to reinvent the wheel—especially when deadlines are tight. This makes tabs our friend.
Diagraming the User Flow
To access the profile page, users need a registered Forrester account and must be logged in. Once logged in, it’s easy to navigate by clicking the user avatar in the top right corner of the navigation menu. From there, they can update their profile information, manage their services, along with all other account management options.
Sketching and Wireframes
The flow gives us a pretty standard user journey. Users can switch between different views using the tab bar. Since the tab bar is flexible, it helps future-proof the design in case new sections need to be added later. This allows us to focus our time spent on designing the different views, treating them like stand-alone landing pages.
Cutting Room Floor Designs
The decision to go with tabs did influence our approach a bit, but we still did our due diligence by briefly exploring other alternatives to see if we could find something useful. We looked into a sticky navigation bar with jump links, expandable/collapsible menus, and a horizontal tab bar that would hide on scroll down and resurface on scroll up.
Design
Primary Brand Colors
Forrester’s core color system is based on two main ideas. First, black and white are the dominant colors for the brand’s main interface. Second, Forrester Green is at the heart of the brand, representing its nature-inspired roots and vibe.
Secondary Colors
Forrester’s secondary color palette is used sparingly, with Yellow being the key exception. In the digital experience, Yellow is used as an action color to show users where they can take action. While not every interactive element will use Yellow, it’s important that any elements using it are clearly clickable.
Typography
The main font for the project will be Forrester’s brand font, Proxima Nova, along with other fonts from the Proxima Nova family. Headings will use Bold, subheadings will use Semibold, and regular body text and labels will use different sizes of the regular version. Italics can also be used when descriptive text is needed.
Transition to High Fidelity Wireframes
In the end, we decided on vertically oriented tabs on the left side of the layout for long-term scalability. Plus, it’s a conventional design that users will find familiar. We also took this opportunity to create some foundational Tempo components that ended up supplementing our design system long term, such as the button, form field, tab, radio button, and checkbox.
"Profile" Tab Explorations (Tab 1 of 5)
The profile tab follows your standard form layout. Best practices recommend being mindful of whether input fields should be full-width or arranged in stacked rows, depending on the situation. For example, it’s often better to place first and last name fields on the same row to save space and reduce scrolling, even though stacking the fields is a more scalable and scannable solution.
"Following" Tab Explorations (Tab 2 of 5)
The “Following” tab is where clients can view and manage the analysts and tags they follow. For Forrester clients, tags are key to creating a personalized browsing experience, recommending research based on their topics of interest. We looked into different ways to match users’ interests with these tags, considering both a suggestive approach and a more probing one that prompts users for specific preferences. In the end, we kept it simple with a search field that uses predictive text to suggest relevant tags.
"Communications" Tab Explorations (Tab 3 of 5)
The communications tab features a list of toggles and radio buttons, giving clients an easy way to control how Forrester sends communications. It’s important for Forrester to highlight the value of these marketing alerts, so we’ve included detailed descriptions under each option. To improve the layout, we can group the toggle options together in one section and place the radio buttons/checkboxes below them in another.
"Subscriptions" Tab Explorations (Tab 4 of 5)
Addressing the issue with the arbitrary volume of subscription was pretty straightforward once we chatted with the product technology team. Over Forrester’s 40-year history, the biggest client, IBM, was subscribed to a maximum of 8 services, with the average client being around 2-3. Unless there’s a major product restructuring, we can design without worrying about pagination.
"Contact" Tab Explorations (Tab 5 of 5)
The client study highlighted how important transparent communication with Forrester is. We considered several layout options, and while version 3 was tempting, version 1 ended up being the best fit. It placed the client’s primary touchpoint at the top, followed by Forrester’s hours of operation and contact methods. Version 1 provided just the right amount of information without overwhelming the user.
Finalizing the Structure
After narrowing down the layout options and incorporating feedback from the other designers, a final demo is scheduled with the product leads for a full walkthrough. Even though the leads have seen these designs before during check-ins, this is the first time they’ll see them presented as a complete prototype and with feedback incorporated.
Handoff
Documentation and Redlining
We redlined the margins and gutters for the different page layouts, adding notes for any user interactions. Keep in mind, Figma’s dev mode wasn’t available at the time, so this analog process for margin/padding is pretty much outdated now, but we made do with what we had back then.
Mobile View Designs
We also give the dev team mobile views along with the redlining, since all our designs need to be accessible. At the time, we relied pretty heavily on dynamic responsiveness but in later projects, we started adding tablet views when layouts need adjusting at different breakpoints.
Demo to the Developers (from the Designers)
A demo is scheduled with the developers to ensure everything aligns with the technical specs. If any elements are too complex to implement, we can explore alternative designs or plan to include them in future releases. After the demo, the Figma files and documentation links are shared and integrated into the development sprint cycle and Jira stories.
Demo to the Developers (from the Designers)
A demo is scheduled with the developers to ensure everything aligns with the technical specs. If any elements are too complex to implement, we can explore alternative designs or plan to include them in future releases. After the demo, the Figma files and documentation links are shared and integrated into the development sprint cycle and Jira stories.
Demo to the Designers (from the Developers)
Once a stable build of the designs is in web-dev, the developers conduct a demo for the digital experience team to validate the build’s accuracy. This demo is usually scheduled about a week before the release date to give the dev team enough time to fix any design discrepancies. If a week isn’t enough, hot fixes are scheduled and sequenced post-launch.
Demo to the Designers (from the Developers)
Once a stable build of the designs is in web-dev, the developers conduct a demo for the digital experience team to validate the build’s accuracy. This demo is usually scheduled about a week before the release date to give the dev team enough time to fix any design discrepancies. If a week isn’t enough, hot fixes are scheduled and sequenced post-launch.
Product Launch
The push from web-dev to staging usually happens on a Thursday, but the push to production doesn’t occur until Monday morning, just in case any last-minute issues pop up. Once it’s live, an internal announcement is made to alert the organization and our users.
Reflection
Learnings and Key Takeaways
The key takeaway is that familiarity is crucial for long-time users. While innovation is important, simplicity often works best, especially when migrating systems and trying to minimize internal disruptions. Relying on established design conventions rather than reinventing the wheel speeds up the design process and benefits the user through familiarity. This approach allows designers to focus more on user-centric solutions.
Next Steps
- User Feedback Collection: Gathering feedback through surveys, or interviews. Understanding user experiences and preferences will help inform future updates.
- Usability Testing: Conduct usability tests with clients to gather insights into the user experience and identify areas for improvement.
- Feature Enhancements: Prioritize and implement enhancements based on user feedback and data analysis.
- Future Roadmap Planning: Outline a roadmap for future updates, considering long-term goals, user feedback, and industry trends to guide the product’s evolution.