UI Design

User Upgrade Flow prompting users to purchase Grockit

SAT Product Matrix

As Grockit became more popular, it became clear that it was time to begin charging for the service. Since the best user experience for students requires many students being online at once, we decided to keep Group Study free while charging for the other features.

My role on the project included:

  • Designed and wrote copy for product matrix comparing packages to purchase.
  • Worked with marketing to develop optional purchase flows to A/B test to determine what produced the highest conversions.
  • Identified key areas to prompt for upgrade, and designed feature set around giving samples and appropriate callouts.

Example design-work:

Study Dashboard giving students quick access to the tools they need to do their best on their exam

Grockit Study Dashboard

Grockit is primarily a way for students to study together online through a chat and a shared question-answering experience. However, as we added more features, such as performance analyses, customized question sets, tutoring, and solo sessions, it became increasingly difficult for users to find what to do and to learn of new features. As business goals and feature-sets changed, we decided a redesign of the product homepage was necessary.

My role on the project included:

  • Developed initial concept for redesign based on current and planned features and user feedback.
  • Created iconography and visual design of appropriate pages to maintain consistency across the site.

Example design-work:

Visualization Builder a robust tool for exploring large datasets and creating visualizations

Visualization Builder

In order to showcase the power and flexibility of the database behind Freebase.com, we designed an exploratory tool that simplified the query-building process. The visualization builder defaults to a table-view of topics which can be configured, filtered, added to, exported, and saved. Users can also choose to view the data in a gallery, timeline or map.

My role on the project included:

  • Developed initial concept for a simple tabular query builder.
  • Created several wireframe iterations and worked with team to determine use cases and hone project goals.
  • Directed project definition when feature requests began growing too large.
  • Refined design based on usability tests, engineering constraints, and project redefinition.

Example design-work:

Visualization Builder on Freebase.com (alpha) »

Freebase User Profile giving users a place to share and learn about each other

Freebase User Profile

Freebase.com users want to be able to share information about themselves and find other users with similar interests. This information can be explicit, such as a hometown or birth date, or can be implied through the activities the user engages in on the site. The user profile was designed to show both kinds of information through a chronological reporting of activity, listings of saved views and bases, and a link to a person topic about them.

My role on the project included:

  • Responsible for information design and page layout, including determining fidelity for different pieces of information.
  • Write specification for how and what information should be reported as user activity.
  • Design contextual help feature for connecting the user profile to a community-editable person topic.

Example design-work:

Specialized Data-input Components a series of flexible form fields to assist in inputting the correct data type

Freebase Suggest

One of the primary design objectives of Freebase.com was to allow users to input data about anything and everything. In order to benefit from the robust graph database back-end, it was important to ensure data was added in the correct format, whether it be a date, text, integer or a link to an item previously entered into the system. However, from a form design perspective, the fields needed to allow the user to input information how they want to, instead of how the database required them to.

My role on the project included:

  • Designed flexible inputs that accepted a variety of formats and gave immediate feedback to ensure the system's interpretation of the input was as intended.
  • Tested and iterated interaction details for item selection when the input field offered options.
  • Provided flow-diagrams, mock-ups and specifications to engineering, while also working closely with the developer to implement and refine details.

Example design-work:

Help Center Redesign leveraging the community to support each other

Freebase User Profile

Initially, Freebase.com was designed with both a central discussion area and a help center for documentation. After some use, we found that this separation between staff-generated content and user discussions was less than ideal for both the users looking for help and the staff members trying to provide it. The central discussion area was removed and its content was simplified and integrated into the help center. This provided a single place for users to find answers and encouraged community by showcasing recent discussions and inviting participation.

My role on the project included:

  • Worked closely with community manager to determine requirements.
  • Designed data model to allow documentation manager to organize content.
  • Created page layout and new discussion feature to clarify page function and direct user towards helpful content.

Example design-work: