As the product designer at Impakt, I've been in charge of defining the user experience and design strategy for Impakt's product, a browser extension tool for Chrome that facilitates users' access to political and ethical information about companies as they browse products online.
Problem Definition and Research
Stakeholder Research; Defining the Problem
As a team, we identified key goals and metrics in terms of business strategy, technical constraints, and social change goals. My job was to develop a thorough understanding of the product in terms of users. I was in charge of designing an interaction model, visual UI, and design system for the MVP for product communication and to lay a groundwork that future design decisions could be built on.
Competitive Research/Contextual UI Patterns
At each stage of my process, I consult existing reference patterns:
•  to understand how similar problems have been solved well 
•  to strategically situate a product in relation to its competitors, to focus on distinguishing characteristics and unsolved areas of a problem
•  to develop an awareness of UI patterns and environments familiar to users in their immediate context while using the product and also in their lives more generally
Consulting Secondary Literature in the Problem Domain
I reached out to researchers who had studied consumer pre-purchase information search, as well as those who had studied factors driving ethical consumption, to request the full text of their articles. I created a shared folder for the team to use these articles as a shared reference, and to be able to discuss this reference information to design questions for our user interviews, and to make preliminary design decisions.
Developing Hypotheses and Questions for User Research
I developed questions for an upcoming discovery research session with prospective users, to understand more about the basis for recent purchase decisions, how they use, and how they actively or passively seek information about the companies responsible for the products they buy.
Design Synthesis
Synthesizing Personas/Task Analysis
Once we had established as the primary use environment, I consulted secondary literature and the recorded interviews. From this, I recorded a video walkthrough of a user persona's online pre-purchase information search behavior. I showed this to the team and led them in a brainstorming discussion to get everyone grounded in the specifics of the UI environment and the main user task.
Diagramming User Flow
I mapped out the user’s touchpoints with the system in the main task environment, to help clarify and keep track of the internal model we were using. Here’s the flow diagram I created to describe how an Amazon purchase process could work with the Impakt browser extension.
Making Design Decisions
Sketching UI Interactions
I sketch to brainstorm, to communicate with myself and think aloud on paper, to communicate with the team and other stakeholders. At this stage, the sketches are of user interface states, components, patterns: ways the UI can actually communicate to users. At this stage, if a sketch is working well, I may mock up a higher fidelity version to help visualize and discuss the direction with others. Depending on the situation, lower or higher fidelity versions may be better at stimulating the kind of discussion I’m seeking. As a general rule, I tend to find higher fidelity versions better for persuading/onboarding stakeholders, and lower fidelity versions better if I’m mainly looking to ask questions and solicit input to inform future decisions. But this depends a lot on the specifics of the situation and the individual people I’m working with.
Building a Design System
When we design the way a product’s UI communicates to its users, part of what we are doing is designing a voice, an entity, an institution, a personality: a brand. Sometimes I work on this with a specialized marketing designer. With early stage startups, I am often responsible for creating the entire design system myself, including the visual identity of the brand, applying the branded feel and distinctive voice across all forms of communication. For Impakt, this included developing a foundational visual identity, a logo, for the MVP, and using the arrow-based graphic as a starting point for the visual system across the UI.
Back to Top