« All Projects

Search360

Context
Professional
My Role
Interaction Design, Visual Design,
Prototyping & Front End Development
Design Team
Individual
Deliverables
Visual Design, Front-End Code

Why

Objective

Improve the internal search experience by consolidating information from various sources in a single place.

Prior to this, employees switched between multiple applications to find the information they needed. By providing results from different sources within a single app, users can quickly find information without having to open numerous tabs.

Challenges
  • Results from multiple sources - The team identified that results would be across 4 categories initially: Link/Documents, People, Applications and Customers. More categories like Products and Conference Rooms could be added in the future. How can we display results across these categories without confusing the user?
  • Large result sets - Within each of the above-mentioned categories, we may have hundreds to thousands of results. How can we display these results in a way that is easy to consume?
  • Detailed and meta information about results - For People, Customers and Applications, clicking on each result should reveal detailed information. What is the best way to facilitate navigation between result lists and details?
  • Responsive design – One of the biggest complaints about the old interface was that it was not responsive and therefore difficult to use on smaller screens. As more and more Juniper employees use their mobile devices for work, it was critical for Search360 to be responsive. How can we display large amounts of data on a small screen?
Old Interface
Old Colleague Profile
Old Organization Chart
Initial Design (by an external design agency)

Who

Target Audience

Since this is an internal application, the overall target audience comprises solely of Juniper’s employees. However, there are sub-categories within the user base with different requirements.

To illustrate the difference in requirements, let’s consider a use-case where the user searches for a colleague’s name – “John Doe”. If the user is in the sales department, their focus is on the customer accounts for which John is responsible, if any. However, if the user is in HR, their requirement would be to see who John reports to and where he falls in the organization structure. Another user, who is in Engineering, would want to see the applications for which John is the technical owner, if any. A common requirement would be to quickly find John’s contact information.

Research

One of the constraints I had to work under was that, due to various factors, there wasn’t scope for detailed research for this project. I did some quick-and-dirty research to help me get a better understanding of the user:

  • Stakeholder Interviews - I interviewed colleagues from different business groups to understand their expectation from the new Search360. This was done through informal conversations where I asked broad as well as specific questions about the current interface and how we could improve with the new one.
  • Artifact Analysis - I also reviewed other search engines to see how they display primary results along with supplementary results.

From the research and my general interaction with colleagues, a universal characteristic I observed about the user base was that, since Juniper is a technology company, all employees had an intermediate to advanced knowledge of computers and software. Therefore, they are able to quickly adapt to new interfaces and interactions.


What

Concept

Search360 should act as a window into - and a launch pad to - different applications.

Search360 not only consolidates results from multiple sources, but it also provides detailed information and metadata about the results without having to navigate to their source.

The UI is modeled after a desktop or mobile home-screen paradigm in order to clearly distinguish between results from different sources, facilitate navigation between lists and detailed views and to present large amounts of data in a consumable format.

Wireframe - All Results
Wireframe - Expanded Module
Wireframe - Tabular Data
Visual Design - All Results
Visual Design - Colleague Profile
Visual Design - Mobile

How

Nested-component based Design

The interface for Search360 is made up of multiple nested components. This component-based approach makes the design scalable and the code easy to maintain.

An example of components being nested is shown below.

SASS and Flexbox

This was the first project where I used SASS to write object-oriented CSS. Using SASS variables, inheritence and mixins has made maintaining more than 2500 lines of style rules significantly easier.

Search360 also uses the CSS Flexbox property to layout elements - which makes the interface adapt to any screen resolution. There are no floating elements, and only select elements are absolutely positioned.

Responsive Table

Using clever CSS and a few additional HTML tags, I was able to make the default <table> into a responsive element as shown in the animation below. This allows us to show large amounts of data comfortably even on smaller screens.

Cross-Module Previews

Using preview pop-overs, users can preview content from a different module without having to collapse the currently expanded module. For example, as shown in the image below, users can view a colleague's information from the People module even while the Customer module is expanded.

Dynamic Cover Images

The cover image of each colleague's profile changes based on their department or business group. This helps in visually identifying their department at a glance without having to read their profile.

Evolution of the People module

The People module went through multiple iterations, as shown below.


How the challenges were addressed
  • Results from multiple sources are each presented within individual modules - this allows for clear distinction between results and gives more real-estate to show additional information in the future.
  • Each module has 2 views - summary and expanded. When the module is not expanded, the summary view only reveals basic information about a limited set of results. When expanded, all results are shown with additional information about each.
  • Responsive design has been achieved using collapsible tables and CSS flexbox architecture.
User feedback

Since the launch of the new interface in March 2017, hundreds of users have emailed their appreciation and feedback on how to improve it. In order to meet our users need, we have identified the following enhancements -

  • People results are the most frequently used, so it makes sense to move it to the wider column, rather than the narrow sidebar.
  • The colleague's profile screen has been enhanced with more administrative information, links to documents and a new Skills section where they can list their expertise.
  • Showing the organization chart right next to a colleague's profile has been much appreciated. We could enhance it by allowing manager profiles to be expanded to show their reportees inline. This can reduce repeated navigation between profiles.

« Back To Portfolio