0. Understanding product requirements
whiteboard, Google Doc
In the first few weeks, the project team and I brainstormed together to review the current
command lines in order to best fit them into screens.
1. Ideation, low-fi prototype
pencil, paper, sticky notes
With the list of commands, I began rapid prototyping and initiated
design feedback session with the UI manager and the CLI team. Involving cross functional teams
helped define the overall project scope and ensured we were all on the same page.
2. Wireframe, define information achitecture
After defining the basics with the team, I began wireframing
on Sketch. Wireframing focuses on high level details for information flow without dwelling on the specific visuals.
We used Figma to facilitate cross team feedback, and asked
reviewers to add notes regarding the user flow.
3. Interaction design, Documentation, User testing
Sketch, Figma, Invision
With continuous feedback, I did several iterations on the wireframes.
We also set up design documents for version controls.
Once we reached consensus across the teams, I added
interactions with InVision. For each specific task, we sent out an Invision Link to gather feedback.
This was deliberately tailored to focus on one task per feedback session.
Our product manager and I also initiated an internal feedback session, inviting all teams to participate.
4. Design handoffs
Sketch, Figma, Invision, Zeplin
Confident that the essential features were mature in the design,
we were now ready for implementation. I worked closely with the product manager and the UI manager
on task prioritization and created design handoffs for front end engineers.
This ensured the design was implemented to accurately match the design according to the specified timeline.