Navigation, a Design Story
My Design process for UI and UX work consists of 6 sections, intended to ensure that I am approaching my work with user-centric, modern, and intuitive designs. The examples below show you a behind-the-scenes look into some of my thinking and deliverables. My process is:
- Empathize
- Define
- Ideate
- Design
- Test
- Deploy
Many of the steps above involve colleagues, stakeholders, and customers. Some step-specific deliverables are documentation on use cases, feedback, and Agile workflows. These are all integrated into the visual work I create, as shown in this story.
The visual examples below will give you a glimpse into how I take a design from a creative brainstorming exercise, through a process of inspiration and bringing inline with design standards and the UI. How a scribbled sketch can turn into a pattern, all while maintaining standards, grid structure, and creating flexibility for responsive screens.
Inspiration
By creating moodboards, I can build a unified idea of what I am going for in the design. Color palettes, imagery that evokes the proper tone, SVG libraries, and microanimations all contribute to the feeling of the design.
Ideate
Participate in Crazy 8 creative thinking exercise with the team as a whole. These types of exercises encourage creative thinking and allow us to collaborate as a team.
Wireframe and Structure
Creating a lo-fi mock allows me to see all of the needed elements at once. Additionally, outlining the structure at the atom level allows me to see how the design system elements can be utilized, and break down elements by component.
Design
Build out elements in a structured way, following Atomic Design. This ensures seamless responsive design, as well as creates building blocks for the navigation component as a whole.
Deploy
After testing internally and with customers, the deliverables are ready for developer handoff. In order to deploy, I create detailed visuals; sticker sheets with shared language and assets, as well as written UI specs with component anatomy outlined.