Background
From October 2021 to June 2022, I was a UX/UI Contractor for JustFix, a housing justice start-up based in NYC. My main priority was to design the LA Tenant Action Center, but as part of my engagement, I also supported the organization’s Lead Designer in her efforts to build out the new design system.
As a UX/UI contractor, I need to design a navigation pattern for JustFix’s suite of products so that I can contribute back to the design system and help other products adapt to the latest rebrand.
My design process
The first step of my process was to gather requirements for the navigation pattern. I completed a brief audit of each of the products in the JustFix suite to make sure I was designing something that met the needs of all of our users.
Requirements
- One level of navigation
- A way to swap between Spanish and English
- A way to sign in, sign out or sign up
- A mobile first pattern that gracefully scales to larger screen sizes
- Should include the organization’s logo and the product name
Comparative research
This was my first time designing a mobile-first navigation pattern so I spent time looking at other scalable navigation patterns and reading articles about best practices. I considered the follow:
- How does the menu adjusts over various screen sizes?
- What is the the relationship between the brand (logo, colors, etc.) and the functional elements (buttons, CTAs)? How does the navigation stay true to the brand while also serving user needs?
- How does the menu impact the page content—does it overlay, push content, or animate in some other way?
- How does the menu change when a user is logged in?
Exploring and wireframing
In order to address each of the requirements for this navigation pattern, I started to zoom into each one and explore it in isolation. Once I had a sense of the pattern for each requirement that worked best, I started to bring them together, exploring how they would interact and function across screen sizes. I also experimented with different visual stylings of each element, trying out different type styles and colors to capture the essence of the new design system.
Prototyping and refining
I exported my work into prototypes to share with the rest of the design team for feedback and discussion. They offered lots of great feedback. An example of which is in the hover and active states of the navigation buttons. By creating different prototypes and I testing out the experience on my own devices, we had a more fruitful discussion of the best path forward.
Making final recommendations & handing over to the team
As my contract with the team was coming to a close, I summarized my recommendations in a prototype and created Figma components to support the team in their future work.
Highlights
- I became more comfortable with Figma’s features, like auto layout and component variations, and challenged myself to create components that would help other designers to carry on with my work.
- I gained more experience in mobile-first design, which had not been a priority for users I’d previously designed for.
- I had a lot of in-progress critiques with the fellow designers in the organization throughout this project. I learned that my team was really looking to me to make recommendations about the way forward, and wanted me to have an opinion, even if I held it loosely. Even if they felt differently, they respected my work and were often happy to go with my recommendation. This felt like a healthy dynamic that empowered me to own my opinions and ultimately make my own decisions, rather than looking for someone else’s approval. It’s impacted the way I present my work.
