UX / UI Design Process
My process for designing human-centered products that are useful, easy to use, and delightful to interact with.
1. Strategy
Discuss strategy and goals with stakeholders and team leads. Define product visions and goals. Prioritize features and product enhancements. Promote empathy design thinking and human-centered design. Understand the problems and realities of the people who use the product we are creating. Act as an advocate and voice for users.
2. Discovery
Understand business requirements. Review analytics. Research and evaluate competitors with similar products and features. Lead and contribute to whiteboard sessions with the development team and product owners. Identify development capabilities, time constraints, and expectations. Plan and create roadmaps for product enhancements, new features, and releases. Set project priorities.
3. Analysis
Define and create personas, user stories, use cases, user flows, customer journey maps, and workflow diagrams. Conduct heuristic analysis and content audits. Compose user testing scripts, conduct user tests and evaluate test results. Present and defend design decisions to peers and executive level stakeholders.
4. UI Design / Visual Design
Gather visual and motion design inspiration and create mood boards. Research current design trends and UX best practices. Understand and apply psychological principles in UX/UI design. Sketch possible solutions using pencil and paper. Create wireframes and grey boxes of initial design concepts. Design high-fidelity designs and create clickable prototypes. Prototype transitions, animations, and micro-interactions. Present concepts and make changes based on user feedback.
5. Production
Gather visual designs, export assets, and present interactive prototypes for the development team. Update Atomic Design Systems and Sketch Libraries. Place visual designs in Zeplin and InVision Inspect for seamless handoff to developers. Work with development team to ensure visual designs and micro-interactions are implemented correctly when translated from design to code.
6. Evaluate & Iterate
Present pilots and beta versions of solutions to users. Gather user feedback. Evaluate the findings. Initiate the design process again in order to further iterate and evolve the solution(s).
Team Collaboration
Communication and collaboration between team members (of all departments) within an organization is key to creating useful products and positive outcomes.
Low-Fidelity Designs + Prototypes
Only some of the visual attributes are presented (such as element shapes, content priority, basic visual hierarchy, etc.). I use InVision to create clickable prototypes for proof-of-concept, collaboration, user-testing, and presentations.
High-Fidelity Designs + Prototypes
When I have a solid understanding of what we are going to build I create a pixel-perfect visual design, useful micro-interactions (animations) to round out the overall aesthetic and visual appeal of the project.
Developer Handoff
I work with the development team, preparing assets and providing specs to ensure the proper implementation of the visual design and micro-interactions. I prefer to follow the 8 point baseline grid system to keep consistency between design and development. I use Zeplin, Sketch Measure, and InVision Inspect to provide assets for the development team.
