Navigation UX and UI Update for an Enterprise CRM
I was responsible for...
- User Interface Design
- Interactive, High-Fidelity Prototypes for Desktop, Tablet and Mobile
- Micro Interaction Design
- Detailed Handover with Developers
- Quality Assurance Testing
I was responsible for designing an intuitive and modern global navigation for a complex CRM.
What’s a Rich Text element?
Sunheading
Another subheading
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.
Static and dynamic content editing
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!
- This is an example bullet point text,
- Here
- And here
- Also this line as well.
How to customize formatting for each rich text
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.
• • •
Project objectives...
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."
• • •
I was responsible for...
- User Interface Design
- Interactive, High-Fidelity Prototypes for Desktop, Tablet and Mobile
- Micro Interaction Design
- Detailed Handover with Developers
- Quality Assurance Testing
• • •
Project details...
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.
Detailed Visual and Interaction Handover
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.
Interactive High-Fidelity Prototypes
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.
.gif)
As well as the updated global search interaction across all devices.
.gif)
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.
Handover Documentation
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"
• • •
Applications Used
Sketch, Principle, Google Docs (document the solution and design handover)
Applications Used
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