Genome
This is a design process study for Genome, an unpublished product designed for Clearhead. As all product design should, this process started with defining the problems. Clearhead’s guiding design principle was called PSM (Problem Solution Mapping). It was a framework for optimizing user experiences through a set of goals, problems, and solution hypotheses. The problem was that the PSM process could become a complicated one, and it was difficult to show clients exactly where they started, ended, and every step along the way. Genome was designed to give clients a clear roadmap of the PSM process.
PRODUCT DESIGN - UI/UX - PROCESS
SCROLLING MOCKUP ︎
USER PERSONAS AND SCENARIO MAPPING
Defining User Goals
From the outset it was clear that our target audience was C-Suite level exective clients. Company leaders who want to understand how and why Clearhead had taken the steps they had to improve on their products’ customer experience. These clients would want to be able to see both a macro and micro view of the PSM process in order to justify their continued investment in Clearhead’s services.
Defining User Goals
From the outset it was clear that our target audience was C-Suite level exective clients. Company leaders who want to understand how and why Clearhead had taken the steps they had to improve on their products’ customer experience. These clients would want to be able to see both a macro and micro view of the PSM process in order to justify their continued investment in Clearhead’s services.
UX FLOWS AND SITEMAP
Mapping Out the PSM Flow
The sitemap and UX flows seemed simple enough, at first. I envisioned a linear experience where users would follow the chain of events starting with a list of prioritized goals all the way through to the executed experiment and it’s outcome. After sharing these early UX flows and wireframes, we decided that the better approach would be to give the user more freedom, and not to restrict them to this linear experience.
Mapping Out the PSM Flow
The sitemap and UX flows seemed simple enough, at first. I envisioned a linear experience where users would follow the chain of events starting with a list of prioritized goals all the way through to the executed experiment and it’s outcome. After sharing these early UX flows and wireframes, we decided that the better approach would be to give the user more freedom, and not to restrict them to this linear experience.
WIREFRAMES V1
With this new non-linear direction in mind, the wireframes I had created to support my initial UX flows were no longer valid (see wires). The micro view now presented the greatest challenge and quickly became my focus. What seemed like a straightforward pathway became more complicated with the idea that users should not only be able to navigate freely through PSM’s collection of goals, problems, solution hypotheses, and experiments, but also see the relationships between them.
Learning Through Failure
With this new non-linear direction in mind, the wireframes I had created to support my initial UX flows were no longer valid (see wires). The micro view now presented the greatest challenge and quickly became my focus. What seemed like a straightforward pathway became more complicated with the idea that users should not only be able to navigate freely through PSM’s collection of goals, problems, solution hypotheses, and experiments, but also see the relationships between them.
WIREFRAMES V2
In order to allow users the freedom to navigate through the PSM flow with autonomy I created a new UX convention that acted both as a method of a navigation and a smart filter. Users would be able to drop into any point of the PSM process, pin an entity (goal, problem, etc.) to the PSM flow and see the navigation update to show which relationships were consequently available. In the wireframes you can see the number of hypotheses and experiments changing as goals and problems are pinned.
Granting Autonomy
In order to allow users the freedom to navigate through the PSM flow with autonomy I created a new UX convention that acted both as a method of a navigation and a smart filter. Users would be able to drop into any point of the PSM process, pin an entity (goal, problem, etc.) to the PSM flow and see the navigation update to show which relationships were consequently available. In the wireframes you can see the number of hypotheses and experiments changing as goals and problems are pinned.
UI DESIGN
After a few more iterations of UX wireframing to get everything hammered out, I moved on to refining the overall design. This project was unfortunately cut short when Clearhead was acquired by Accenture, but what I was able to accomplish I am quite pleased with.
Refining the Visuals
After a few more iterations of UX wireframing to get everything hammered out, I moved on to refining the overall design. This project was unfortunately cut short when Clearhead was acquired by Accenture, but what I was able to accomplish I am quite pleased with.
