I was responsible for designing an intuitive and modern global navigation for a complex CRM.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
And here is a really important quote that I'll want to highlight.
• • •
The navigation for Rex Software required a new experience that worked responsively, and increased the users efficiency, from super user to new user. It needed to maintain quick access to global search and quick functions, while reducing the time it takes for the users to navigate through the main areas of the CRM.
"The new navigation experience needed to feel intuitively fast, be non-disruptive while being perceived as sleek and modern."
• • •
• • •
As I took over this project from another designer, the research and wireframing stages had been completed. Therefore, I undertook the project during the interface design and interaction stage. Below highlights the detailed handover items I provided the development team.
In preparation for the handover with the development team, I prepared annotated designs via InVision Inspect. This allowed them to inspect all visual properties of each element in the designs, from dimensions and colour as well as downloading the icons.
Keeping the colours and typography styles strictly to a minimum was appreciated by the developers, and kept the designs strong.
For each component, I made sure to portray each state. From default, active, tabbed, typing, and hover on Desktop.
Through to tap down state on iPad/tablet.
And active input field states for mobile.
I also included states that are often overlooked by designers, such as tabbed state.
Hover state, with tooltips displaying after a set period of time.
And initial page loading state.
A series of high fidelity interactive prototypes the developers could interact with to understand the navigation experience.
From displaying the transition micro-interactions on desktop, tablet and mobile.
As well as the updated global search interaction across all devices.
This was provided to the developers along with a detailed handover document linking the developers to all important items relating to the project. Including, video examples, prototypes, designs, and sitemap structure.
It also outlines the viewport width breakpoints, animation interaction speeds and interaction easing x and y properties.
I shared the above information during a very hands-on handover session with five developers involved in the project.
"I included interactive demos during the handover meeting which the developers could play with across Desktop, iPad and mobile—to better assist them in understanding the scope of the project"
• • •
Sketch, Principle, Google Docs (document the solution and design handover)
Sketch for UX exploration and final UI design
Abstract for sketch design file management and version control
InVision for low fidelity prototyping and tablet/mobile demos
Principle for high fidelity prototyping and interactive demos
Google Docs to document the solution and design handover
InVision Inspect to assist developers during handover
Slack for team communications