UI Kit
Component Kit
For Prototyping and building
Problems
- Design consistency in interfaces across a team (particuarly a distributed team) can be tricky.
- Implementing designed features can be time consuming and details can get lost in translation.
- Guidelines and rules aren’t always clear.
Solution
- Design a kit in Sketch of reusable UI components to establish guidelines and standards, which makes it quicker and easier to design and prototype ideas.
- Build and document these components into a repo that is shared across a distributed team, making it as easy as possible to build out UI.
Dashboard/Global Navigation
Problems
- Navigating the application was confusing, cumbersome and slow. Users often had to take many steps to get to a page.
- Search was slow, clunky and inaccurate. Users often couldn’t find what they were looking for because of errors or confusing results display.
Solution
- Built a new navigation structure that was more usable and consistent, yet flexible enough to account for a variety of use cases.
- Built a new streamlined search flow into the global top navigation bar.
Process
Discovery
The process started by taking inventory of the navigation hierarchy, particularly pages useful in workflows of different user types (achieved through various user interviews and observations of call center, network operations, etc.). Next, we created a master tree diagram to help us get a birds-eye view of the structure. From there, we sketched out various options for how we might lay out the common elements, such as search, account/login/logout, primary navigation list, secondary/inner page navigation, etc.
Prototyping
Our prototyping process utilized a UI kit to quickly prepare a prototype for Invision without having to focus much time on visual design up front. This allowed us to pivot quickly and maintain some level of fidelity to make it feel real to users while focusing on usability and flow. After a few iterations based on user observation, we were able to design a prototype that accurately communicated what the experience should look and feel like.
Execution
Our deliverables prior to execution were the Invision prototype and some documentation (previously-mentioned tree diagram as well as a Google doc explaining flow and design details). We worked with the dev team (who had been involved in some capacity throughout the process) to execute on the new design.
Iterating
We iterated on Search, particularly to adjust the prioritization of search results and what is included in them. Top-level navigation structure was rearranged once or twice as we phased out certain pages and rearranged others.
Other Screenshots
More case studies coming soon
