Product Design Process
Process makes perfect
Throughout my career, I’ve followed what I believe is the best process that delivers the results clients (and users) need. By engaging in a process to deeply understand the client’s needs and goals from the start of our relationship, paired with scheduled check-ins throughout each stage of the process, I can more efficiently deliver a superior product.
The process helps to:
- Clearly articulate high-level requirements
- Refine requirements, documentation, and concepts
- Speed up development through understanding
- Validate a product through testing with real users, analyzing results, and applying user feedback
- Weed out potential issues sooner, saving time fixing or refactoring components, flow, and interaction problems later
1. Discovery
- Define the product from the point of view of the stakeholder
- Define the user through survey and observation
- Understand the user’s needs for the product
- Align and refine stakeholder wants and user needs
- Define user tasks for the product
- Define clear, high-level requirements
- Documentation of high-level project requirements
- Documentation of understanding and base-level conceptualization of the project
- Personas based on user research
- Perfect-path task lists for how users will approach a product
- User-focused journey maps based on product understanding and tasks
- High-level project roadmap for project concepts and features starting with MVP
- Estimation for product refinement phase
The best way to a successful project is to start with a clear vision of what needs to be built. The purpose of a product discovery phase is to understand and clearly articulate high-level requirements for a product. The goals of the client are examined and itemized, and both the client and the end user help to influence the high-level requirements throughout the discovery phase.
2. Product Refinement
- Create user flows based on product understanding
- Vet and refine user flows through stakeholder and developer meetings
- Develop wireframes for how the layout of the product should work based on user flows
- Design a user test around understanding of the user, the tasks they will perform, and the product user flows
- Create testable prototypes based on wireframes (prototype functionality dependent on the project and product)
- Test the prototypes with real users (three to five users per test) with frequency
- Refine tasks, layouts, and flows as we better understand how the user will interact with the product
- Repeat: Develop, Design, Create, Test, Refine
- Versioned user flows
- Versioned task lists
- Identification for edge-case tasks
- Versioned wireframes
- Versioned prototypes
- A style guide and component documentation for handoff to developers
- Documentation of user testing, feedback, and highlights
- Documentation of finely-defined project requirements (stories and issues for backlog)
- Documentation of goals and understanding of the project
- Estimation for the development phase
In the product refinement phase, my goal is to drill down into the understanding gained in the discovery phase to finely define project requirements within the allotted time frame. The more time I have to refine goals and requirements, the more certainty I will have in my recommendations.
The product refinement phase picks up from where the discovery phase leaves off. I take the defined high-requirements from the discovery phase and refine them through ideation, testing, and iteration. Once requirements start to become more solid, the Product Designer creates wireframes, which are rough layout concepts to communicate content and placement.
The more time we have to Develop, Design, Create, Test, and Refine we:
- Identify and fill gaps
- Vet concepts with our developers so we are proposing concepts that we know can be built and built efficiently
- Explore and document all possible states of UI components
- Develop a more complete style guide
3. Interface Design
- Develop mockups based on wireframes starting with low-fidelity moving towards high-fidelity aesthetic design
- Create and vet a visual aesthetic with stakeholders and users
- Update testable prototypes using mockup fidelity (prototype functionality dependent on the project and product)
- Test the prototypes with real users (three to five users per test) with frequency
- Refine tasks, layouts, and flows as we better understand how the user will interact with the product
- Repeat: Develop, Design, Create, Test, Refine
- Versioned mockups from low- to high-fidelity aesthetic
- Versioned prototypes
- A style guide and component documentation for handoff to developers
- Documentation of user testing, feedback, and highlights
- Documentation of finely-defined project requirements (stories and issues for backlog)
- Documentation of goals and understanding of the project
- Estimation for the development phase
Decisions about the visual aesthetic of the user interface UI start to come into play after initial rounds of refinement have taken place. Having existing brand requirements helps to speed the visual process along, however, adding visual value is incremental and needs to be tested. With each repetition of Develop, Design, Create, Test, and Refine, we will iterate on the visual aesthetic of the mockups. UI design moves from:
- Wireframes – rough layout concepts to communication content and placement – to
- Low-fidelity mockups – cleaned up versions of the rough layout concepts – to
- Medium-fidelity mockups – transitional design beginning to add branding concepts – to
- High-fidelity mockups – tested and vetted visuals that will serve as the visual requirements for the layout, placement, and development of the product
The goal of iterative product design is to create and prove why components, content, and interactions are placed where they are. We strongly recommend not jumping forward with the aesthetic design until the product concept has been fully tested. There are several reasons for not going high-fidelity visual design too quickly:
- It takes time to make a product look really good aesthetically. Testing and iterating through a product can cause layouts and flows to be torn down, thrown out, and rethought, thus wasting the time spent creating the high-fidelity design.
- Similarly, it takes time to iterate on any fidelity mockup, but the more pixel perfect the design gets, the longer it takes to make changes.
- In testing, users are less likely to give direct and honest feedback if an application looks “finished”. When the design is a little more rough, a user is more likely to suggest larger changes to a product or a layout.
- We simply don’t know what our high-fidelity recommendations for your product will be without iterating through the process. If you are looking for concept design to help you get funding for your project, we do offer that as a service, but the process is different than in the refinement phase, and we strongly advise for any concept designs to then be tested and vetted with users before they are used to make product requirements.
4. Developer Handoff
- Update/create a project style guide
- Update source of truth project documentation
- *Possibly support development team by writing baseline HTML and CSS for components
- Any additional documentation created, updated to the project documentation
- Any additional state documentation created, updated to the project documentation
- Any additional aesthetic design created, updated to the style guide
After investing the time into research, ideating, iterating, and vetting concepts with users, you want to make sure that the communication to the development team is crystal clear about what the product should be and how it should appear. Sometimes, this means implementing my concepts in HTML and CSS, handing that off to the devs to carve up and componentize the design. Other times a simple atomic style guide will suffice to support the product. And even other times, a really clean Figma document can function as both the project source of truth and handoff doc.