UX/UI Design and research
Keyhole
An intuitive social media dashboard that reaches over 600 registered users and 10,000 daily free users
Keyhole is a social media analytics company that serves to deliver accurate metrics to both B2B and B2C clients. Its enterprise software tracks hashtags and keywords on large social media platforms such as Instagram and Twitter. Its customers use it to measure the engagement of event campaigns, view growth metrics, contact influencers and provide comprehensive reports for stakeholders.
As the first design hire, I worked across the entire website and existing product to consolidate and improve the design process for the team moving forward. Using Agile methods, each project was managed in 2 week sprints, with weekly sprint check-ins.
Summary
Keyhole had been around for 4 years before I joined. Between 2017 - 2019, I lead a re-design of the enterprise dashboard, ran multiple user research projects, and consolidated the design system and documentation from the ground up.
With support from its founders, I conducted a 2-day customer discovery and competitor analysis workshop to help align the team's understanding of the product with Keyhole's value proposition.
1
Atomic Design System
The scale of redesigning a data-heavy dashboard was a challenging and interesting project.
After mapping out and collating all existing components, I started on a new design system and styleguide.
As I sketched out different features and elements, I planned how the design system would come together. I created a comprehensive inventory of existing elements and their functions.
Using Brad Frost’s Atomic Design approach, I created components and modules, including a scalable typography system and fully accessible colour palette. When these components were translated to development, I worked with developers to create them in React JS.
Using Brad Frost’s Atomic Design approach, I created components and modules, including a scalable typography system and fully accessible colour palette. When these components were translated to development, I worked with developers to create them in React JS.
2
Styleguide
The use of blue was to foster trust and professionalism for a tool that could be seen as intrusive on digital privacy. Since the current interface uses a lot of blue, different shades of blue and accents were added to distinguish elements more easily.
Since the product was data-driven and displayed large amounts of text and numbers, Open Sans was chosen for its legibility across desktop and responsive interfaces.
3
Application
The tracker
The trackers page was simplified to have clear font hierarchy and accessible colours. For the first time, responsiveness was included.
Toggle and button states were visibly different. Inactive trackers were completely greyed-out to direct a user to their active trackers.This is some text inside of a div block.
For hashtags, it didn't matter if the # symbol was included. For consistency, the # would not display in the dashboard either.
For hashtags, it didn't matter if the # symbol was included. For consistency, the # would not display in the dashboard either.
The dashboard
The dashboard was the product's most-used feature. I designed several prototypes and finalized two versions for qualitative testing.
Using Google Analytics to track page views and clicks, the results of the randomized A/B test showed a longer average time spent on both pages. While this was an optimistic result, my team agreed that we needed to gather more conclusive and detailed user feedback.
Version 1
Since the card-style modules in the original product were well-liked by users, I wanted to keep its familiar pattern across the redesign.
The toggle features were frequently used, so it was essential to keep them visible within their modules.
Inspired by Adobe software, the modules could also be rearranged to suit a user's preference.
Module headers used bright accent colours to clearly show selected states
Version 2
Version 2 kept the same colour scheme with various differences:
The timeline and metrics were condensed to be viewed side-by-side instead of full width.
A fifth metric, Engagements, was also added to differentiate from Impressions.
Module headers were no longer drag-and-drop or brightly-coloured.
Module content was arranged according to usage patterns with subtle background accents.
4
User Research
Testing the two versions
During a span of 3 weeks, I contacted customers I had spoken to before and new customers to recruit them as participants. We provided paid incentives that included subscription upgrades.
Since Keyhole had many international customers, all design testing sessions were conducted remotely with Lookback. Each version was tested during separate sessions.
Since Keyhole had many international customers, all design testing sessions were conducted remotely with Lookback. Each version was tested during separate sessions.
1-on-1s
22 participants
22 participants
5 unmoderated
17 moderated
17 moderated
Key Questions
- Describe a typical work day. What do you do when first sit down at your desk?
- What do you currently use Keyhole for?
- What are your first impressions?
- If this went live, do you think it would meet your expectations?
Research Findings
After testing, we found out a majority of users preferred Version 2. One of the main feedbacks was to revert to full width metrics and timeline as they were equally important.Another was reversion from 'CSV' to 'XLS' as many users reported to managers who were more familiar with XLS format.
In the next open beta release, 83 randomly picked first-time users were included in a second round of user-testing. They would encounter an NPS survey on their first log-in of the dashboard,
In the next open beta release, 83 randomly picked first-time users were included in a second round of user-testing. They would encounter an NPS survey on their first log-in of the dashboard,
5
Launch Feedback
The release of the new design system and interface received mixed feedback.
83 first-time users, 32 reverted back to the old design, although they had not seen it before. To them, the new features were too confusing and they sought a simpler option.
Tradeoffs
I learned that the dashboard release was too sudden and should have been more incremental like the previous pages.
Many users, both old and new, came from competitor tools and were familiar with a different taskflow.
With more time, I would test the redesign with first-time users, focusing on how to reduce opt-outs.
Many users, both old and new, came from competitor tools and were familiar with a different taskflow.
With more time, I would test the redesign with first-time users, focusing on how to reduce opt-outs.
Next:
CLC
