Data Visualization Meets Search User Interface

A dynamic search tool for information foragers

Methods

Interviews
Personas
Wireframes
Mockups
Prototypes
Usability Studies
Visual Design

About This Project

​EnForm is web search that offers a more contextual experience than your run-of-the-mill search engine

  • Displays contextual filters in search UI by analyzing language of web results
  • Integrates with open databases to offer structured data in addition to websites
  • Innovative UI components optimized for rapid scanning of results
  • Tools to assemble content into narratives, preserving references

More Information

Interviews

We listened to people in a variety of roles talk about their current workflows. We aimed to spark their imaginations for how an information-rich app could improve the way they work.

  • Clarified who our user population was, including information needs and the tools they rely on.
  • Synthesized our findings through affinities and discussed.
affinity diagrams
rating personas

Personas

We developed 8 personas highlighting user backgrounds, goals, abilities and research behaviors.

  • Rated personas on 25 dimensions in order to pinpoint biggest impact areas
  • Narrowed focus to 2 target personas
  • Collaborated with team to create scenarios and user journeys
persona

Wireframes

Started building UI with abstract blocks; this enabled us to discuss priority and interaction of components without the distraction of aesthetics

  • Generated a number of feature ideas and layouts to validate
  • User feedback plus project priorities drove decisions about which components to develop furtherDecided to disregard mobile views due to prevalent PC usage among target users
annotated wireframe
overview of wireframes
search card wireframe

Mockups

Further clarified function and design direction through higher-fidelity mockups. Began to develop theme.

example mockup

Prototypes

Created prototypes in the browser and recruited participants for usability studies.

  • Prototyped search, filter and skim features
  • Experimented with multiple component options
phase 1 prototype
phase 3 prototype
phase 4 prototype

Usability Studies

By putting our app in front of others and observing attentively we were able to test performance of our different UI ideas

  • Insights into which elements were intuitive (or not) based on observations of user expectations
  • Awareness into unforseen issues (quality of results, whether app was busy loading or frozen)
  • Feedback on visual design, including lack of clear labeling for graph axes and UI controls
phase 1 prototype comments

Visual Design

By putting our app in front of others and observing attentively we were able to test performance of our different UI ideas

  • Strived for a simple, yet effective information hierarchy
  • Utilized 12-column grid
  • Learned a lot about affecting readability with color and typography
aesthetic design of search result card