Component-Level Product Design
Product design involves six phases of work and includes collaboration across multiple teams. The design process is focused on delivering components that are flexible, intuitive, accessible and measurable. The design process is built to support each department and cross-functional team, creating efficiencies and return on investment at each phase.
Successful software is the result of a great design process
Build. Test. Learn. Iterate
Discovery
Define our users and the
problems are we solving.
Research
Confirm our success aligns
with our user’s success.
Lo-fi Prototype
Prototype and test a low
fidelity solution with users.
High-fi Prototype
Learn from initial test, refine
designs and test again.
Engineering
Build and test the proven
prototype in real code.
Release
Put the finished product in
the customer’s hands.
Component Discovery
Summary: Define problems to solve, target audiences and measurable success criteria.
| # | Deliverable | Summary | Days | Effort |
|---|---|---|---|---|
| 1 | Goals | Identify problems to solve, goals and success criteria. | 2 | 5 |
| 2 | Target Audience | Define audience, sub group, tasks and priority. | 2 | 5 |
| 3 | Functional Requirements | Review technical requirements and prepare for validation with Daily Active Users. | 1/4 | 1 |
| 4 | Accessibility Requirements | Our products must be flexible, scaleable and accessible. Think strategically about providing value to every user and how we can leverage user needs to drive growth. | 1 | 3 |
| 5 | Design Assets | Add screenshots to Figma Screengrab Inventory. Gather branding assets, product demos, marketing material, style guides and access to relevant products | 1/4 | 1 |
| 6 | Knowledge Base | Document and share User problems, Ideas, Tasks, Goals and User Requirements. | 2 | 6 |
Effort Scale: 1 pt = qtr of a day, 2 = half a day, 3 = full day, 5 = two days, 8 = a week
Component Research
Summary: Validate Discovery findings and begin user testing.
| # | Deliverable | Summary | Days | Effort |
|---|---|---|---|---|
| 1 | Audience Interviews | Validate technical/functional requirements with real users. Discuss User problems, Ideas, Tasks, Goals and User Requirements. Validate goals and success criteria. | 5 | 8 |
| 2 | User Testing | Usability testing for audience tasks on current solution to benchmark time and conversion rate per task. | 5 | 8 |
| 3 | Knowledge Base | Update User problems, Tasks, Goals and User Requirements, Generate and prioritize ideas for User Testing in the next phase. | 1 | 3 |
Effort Scale: 1 pt = qtr of a day, 2 = half a day, 3 = full day, 5 = two days, 8 = a week
Component Information Architecture
Summary: The solution takes shape in diagrams & lo-fi wireframes and prototypes.
| # | Deliverable | Summary | Days | Effort |
|---|---|---|---|---|
| 1 | User Flow Diagram | Diagram all user task flows for the component, starting from login to completion | 5 | 8 |
| 2 | Wireframes | Create wireframes and low fidelity prototypes for each user flow screen, ready for user testing in Useberry | 10 | 16 |
| 3 | User Testing | Test wireframes for time and conversion rate, test against benchmarks | 2 | 5 |
| 4 | Knowledge Base | Update User problems, Ideas, Tasks, Goals and User Requirements, Prioritize ideas for visual design | 1/2 | 2 |
Effort Scale: 1 pt = qtr of a day, 2 = half a day, 3 = full day, 5 = two days, 8 = a week
Component Design
Summary: Refined design and hi-fi prototypes inform engineering and release planning.
| # | Deliverable | Summary | Days | Effort |
|---|---|---|---|---|
| 1 | Protoype | High fidelity prototypes for user flows/tasks, ready for user testing iteration in Useberry | 10 | 16 |
| 2 | User Testing | Test high fidelity prototype against wireframe iteration, achieve success criteria or iterate and test again | 5 | 8 |
| 3 | Content Strategy | UX writing and onboarding matches corporate style guide, supports conversion rate, drives user action | 2 | 5 |
| 4 | In-App Help Content | Work with Learn team to draft content for component-specific help/support content | 2 | 5 |
| 5 | Design System | Add requests to desgin system backlog or update design system after user testing | 2 | 5 |
| 6 | Marketing & Sales | Coordinate with Marketing and Sales teams to align release with North Star goals | 1 | 3 |
| 7 | Knowledge Base | Update User problems, Ideas, Tasks, Goals and User Requirements, Prioritize ideas for engineering and release | 1/2 | 2 |
Effort Scale: 1 pt = qtr of a day, 2 = half a day, 3 = full day, 5 = two days, 8 = a week
Component Engineering
Summary: Designs go to code, delivering value to the customer as launch campaigns take shape.
| # | Deliverable | Summary | Days | Effort |
|---|---|---|---|---|
| 1 | Design Specs | Provide design specs, stylequides for all user flows and screens | 1 | 3 |
| 2 | Quality Assurance | Check coded UI and UX against prototype | 1/2 | 2 |
| 3 | Analytics | Transfer name spaced (LOCATION_COMPONENT_EVENT) user task North Star metrics and events to Mixpanel | 1/2 | 2 |
| 4 | Training | Update User problems, IDEAS, Tasks, Goals and User Requirements, PRIORITIZE ideas for visual design | 1/2 | 2 |
| 5 | Marketing | Coordinate with Learn team lead, align on North Star goals | 1/2 | 2 |
| 6 | Sales | Coordiante release campaigns with Marketing lead, share Knowledge Base, align on North Star goals | 1/2 | 2 |
| 7 | Support | Share Knowledge Base with support team, coordinate with sales, marketing lead | 1/2 | 2 |
| 8 | Knowledge Base | Update User problems, Ideas, Tasks, Goals and User Requirements, Prioritize ideas for engineering and release | 1 | 3 |
Effort Scale: 1 pt = qtr of a day, 2 = half a day, 3 = full day, 5 = two days, 8 = a week
Component Release (Support, Marketing and Sales)
Summary: Campaigns aim to meet North Star success metrics.
| # | Deliverable | Summary | Days | Effort |
|---|---|---|---|---|
| 1 | Analytics | Add component North Star metrics to Mixpanel dashbaord, vanity metrics, acquisition, retention, referrals | 1/2 | 2 |
| 2 | Launch Campaign | Review new features and value to users with sales and marketing | 1/2 | 2 |
| 3 | Client Training | Review new featuers with the Learn team, suggest content for /Help section | 1/2 | 1 |
| 4 | Knowledge Base | Update for Mixpanel dashboards, success metrics, email digests, and alerts | 1/2 | 2 |
Effort Scale: 1 pt = qtr of a day, 2 = half a day, 3 = full day, 5 = two days, 8 = a week