Design process
This is a general, high-level overview of how ALEX’s design department functions throughout the process of feature development for our existing products. It is meant to help departments outside of creative understand how we do what we do on a step-by-step basis, and how we fit into the overall Product Development Life Cycle.
1. Determine need
This aligns with the “Research” and “Ideation” steps of the PDLC. We are defining a thesis of what we are trying to solve and what will work best for our users, as well as what will appeal to our customers.
Who is involved
- Product Owner
- Creative Lead or UX Designer
Steps
- Identify and define an opportunity for improvement that needs to be addressed. Depending on what we’re trying to achieve, this can be done through a variety of activities:
- Conducting qualitative or quantitative research with customers, users, or internal teams (Cust Ops, AMs, etc) to understand pain points or validate areas for optimization.
- Developing “How might we” statements, in order to focus on what we’re trying to solve, rather than how we’re trying to solve it.
- Creating user or customer journey maps, to aid our understanding of how this feature will be used to accomplish the defined goal.
- If the feature is particularly complex, affinity or empathy mapping can help us to organize and prioritize what is most important.
- Sketching quick low fidelity mockups or other visual explorations to set expectations with internal stakeholders for the overall vision of the feature.
- Define goals and success criteria for the feature.
- Determine the scope of the feature by assessing the design, scripting, media production, and art needs. This includes meeting with each of the involved creative team members to ensure that the planning benefits from their expertise.
- Prioritize feature development relative to existing work and future roadmap items and write JIRA tickets to capture the required creative work.
Example
2. Wireframe and prototype
This is the “Solution Alignment” step, as well as the “Execution Planning” step of the PDLC. At this point we are investigating potential solutions, and asserting what we think will functionally serve our customers and users’ needs best.
Who is involved
- Creative Lead
- UX Designer
- UX Writer
Steps
- Sketch a loose basis of the feature, including all of the needed components and elements.
- Collaborate with the UX writer to fine-tune the scripting of the feature.
- Using prototyping software, create a barebones interactive representation of the functionality.
- Acquire Creative Lead feedback and approval to confirm that the wireframe accomplishes the functionality that is required of the feature.
Examples
3. Test and refine
This is also the “Solution Alignment” and “Execution Planning” steps of the PDLC. Here, we are testing our assumptions from the previous step and ensuring they perform in a way that works for our users and for the product’s stakeholders.
Who is involved
- UX Designer
- Director of Research & Insight
Steps
- Coordinate a usability test with the Director of Research & Insight to determine the audience that is representative of our users and the desired outcome of testing the feature.
- Parse the testing feedback for effectiveness of usability, pain points, areas of confusion, and other responses from the testers.
- If needed, loop back to step 2 to iterate on the wireframes with the findings from the usability tests.
- At this point we will determine if A/B testing is desired after deploy as part of our strategy for ensuring the success of the feature.
Examples
4. High fidelity design
This would be “Iterative Development” in the PDLC. On the delivery team, this step iterates on the findings of the previous step to align the visual appearance of the feature with our design system, and incorporate other product-specific aspects of the design.
Who is involved
- UI Designer
- Director of Design or Creative Lead
Steps
- Using the validated wireframes/prototype as a basis, use the elements and rules of the ALEX Design System to develop a high fidelity layout. Make sure to capture all states of all elements not explicitly defined in ADS (e.g, a new type of button or form element).
- Coordinate with media producers and/or artists (if needed) in this step to understand how video or illustration would factor into the new feature.
- Seek feedback from either the team’s Creative Lead or the Director of Design to ensure that the high fidelity design is accomplishing what we want and is up to our standards.
- Create a Jira ticket to add any newly created design elements to the ADS Figma library and Gitlab repo.
Examples
5. Implement and deploy
This would map to “Iterative Development” as well as “Launch and Feedback” in the PDLC, but shares some features of “Iterative Development. This may include some “How do we prepare for the unexpected” work, such as adjusting the scope in reaction to technical feasibility.
Who is involved
- UI Designer
- Engineering team
Steps
- Collaborate with engineers to determine the level of effort required of the implementation, and that the design can be adapted feasibly. This will usually happen during an engineering team’s backlog refinement.
- Embed with the engineering team, if not already part of their meetings, and implement the styling and front-end code necessary to stand up the design. If for some reason this isn’t possible, provide the engineering team with pixel-perfect design specifications to implement.
- When the feature is implemented on a branch of the code repository, send it to the engineering team’s QA tester to ensure that it works as expected and that there are no additional bugs created by this new work. When QA approves the ticket, it’s ready to be deployed.
- If we are A/B testing this feature, the UI designer will partner with the QA engineer to make sure that all of the variations of the feature are working on the production URL as expected.
- After deploying the feature, track the metrics that align with the goals and criteria for success that were defined in step 1. If it aligns with the goals, great! If not, start the process over and continue to iterate.