Product Design for Network Monitoring and Support software for Service Providers.

    Pulse

    Product Design
  • Client: CCI Systems
  • Year: 2014-2016
  • Duties: Product Design, Front-End, Mobile, Responsive, Marketing, Branding

"Thomas has that pixel-perfect design edge - combined with a knack for empathetic critical thinking, he is the ultimate high-impact team member."

Zachary Gohr, Director of Product Development

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.

work-cci-pulse-ui-tooltip


Dashboard/Global Navigation

work-cci-pulse-dashboard

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.

work-cci-pulse-search

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

work-cci-pulse-cmts-overview

work-cci-pulse-csm

work-cci-pulse-frequentcallers

work-cci-pulse-outage-detail

work-cci-pulse-plantproblems

work-cci-pulse-host-graphs

Close

Work With Us

We are currently not seeking any projects. If you’d like to say hi, shoot an email to Thomas@bishop-creative.com!

Close Work With Us