Navigation Redesign
SevenFifty - Design Lead
2018
SevenFifty’s navigation was problematic for user experience as well as expanding product offerings. I set out to redesign it to provide a clearer information hierarchy and to have a more intuitive place for future features to live.
About the Product
SevenFifty is a platform for the beverage trade industry that enables buyers and sellers of mostly alcoholic beverages to do their business online. Servicing all corners of the industry the product provides role specific tools for producers, distributors, and buyers (restaurants, bars, and retail locations).
Users Main Job Responsibilities
Place orders based on availability and inventory.
Research and find new products.
Reach out to buyers to introduce them to new products.
Monitor sales on an individual and company wide basis.
The Design
Constraints
In order to execute this redesign with a minimal amount of development effort, the following were some things I had to take into consideration:
Try to utilize a Bootstrap component (since the front-end was already using that library).
Disrupt the existing page layout and styling as little as possible.
Design a solution that can account for new features to easily be added.
Maintain the existing primary, secondary and tertiary structure.
Approach
After evaluating the available bootstrap components I decided to move forward with the Nav List component for the navigation. From here, I researched existing patterns on the web that had a similar structure of primary, secondary, tertiary pages, to try to provide an experience that was familiar to our users.
Conclusion
With this general direction established, I customized the component to fit our needs visually and functionally by:
Using the sidebar for the primary and secondary pages, allowing for the restructuring of existing features in a more intuitive hierarchy.
Moving the tertiary navigation to the top of the screen rather than the left side to optimize horizontal space.
Utilized new marketing colors and typography to provide a refreshed look in a way that didn’t require styles to be updated anywhere else.
Creating a design that allows for future features to be added without disrupting the design of the new navigation.
“Allison was hired to take over product design and she brought rigor and creativity to our team in an impactful way. She's thoughtful, responsible, and has the rare ability to communicate the reasoning behind her work at the right level for the right audience. I would love to work with her again.”
— Steve Pike, Former CTO at SevenFifty