Chase Facer
ideascale-mockup.jpg

Designing IdeaScale's Idea Grid

 

Project Overview

In app browsing experience for IdeaScale.

2019

A concept to better sort, browse, and interact with ideas in an IdeaScale community.

  • Visual Design

  • Product Ideation

  • Prototyping & Animation

ideascale-mockup.jpg

Background

IdeaScale is an innovation management software platform that allows organizations to involve the opinions of public and private communities by collecting their ideas and giving users a platform to vote. 

Goals

  • Introduce a new and versatile idea view

  • Launch the “Grid View” for ideas

  • Make browsing and interacting with ideas easier

The Process

Browsing, commenting and interacting with ideas is a large part the users interaction with the community. IdeaScale users needed a new way to interact with and sort through their community’s ideas. Through user journey mapping, prototyping, and user interface design I was able to create a new alternative to the list view, grid view.

design-thinking.jpg

The Problem:

I have all of these ideas and I want a new way to sort them visually a more efficiently.

1) Empathize

Problem Assumptions

Ideas and content stacked in a single column take longer and are harder to absorb and sort.

Personas

  • Moderators

  • Administrators

  • Average community members

I decide to focus on the “moderator” persona, because this kind of user uses IdeaScale to approve and sort ideas within a community.

 
 

User Scenarios

  • Moderating an idea

    • Ricky is tasked to moderate all ideas at least once a day during work. After a long day working on the computer, he want to quickly read, sort, and push ideas along to a new stages within the community.

  • Assign idea owners

    • Ricky also wants to help move new ideas along by assigning them owners. Once he has assigned an idea owner, the idea owner can take control of that idea and help move it down the pipeline.

User Interviews

To validate the problems, I reached out to customers who has requested a new way to view ideas.

  • We talked about their behavior using IdeaScale. The purpose being to understand their goals, needs, and pain points within the app.

Kay Takeaways

  • Reasons they use IdeaScale:

    • To generate new ideas for their company internally

    • Use it externally - eg: a public community where customers submit ideas for new products or processes

    • Moderators and admins are tasked with sorting through hundreds of ideas

    • Need to move ideas along to new stages and phases

Usability Test

I performed a usability test as a moderator with the task of moving an idea along to a new stage.

  • The test:

    • Ideas are only shown in a single column, list view

    • The Moderator can only scroll single column down and click “Moderate Idea” link on a single idea

  • Takeaways:

    • Found that UI of idea is hard to navigate, eg: “Moderate Idea” link is hard to define/ see

    • UI of idea should be more engaging for all users

2) Define

After research, the problems with the current list view only option are validated

  • Pain Point #1: List only view is hard to manage all ideas

  • Pain Point #2: Moderate idea link is hard to see/find

  • Pain Point #3: List view is not engaging or visually stimulating

3) Ideate

Sketching, exploring ideas, and flows.

sketch3.JPG
sketch1.JPG

4) Prototyping

The main flow of the prototype is a moderator toggling between views and utilizing the grid view. A moderator is responsible for approving and moderating ideas within their community. The idea is to show that the grid view can be as effective as the list view for the moderator. It is intuitive, responsive, and versatile.

Focus Areas: Grid versus list view, moderate idea, more button, and upvote idea.

  • Material icons are introduced for action items (where previously on links were)

  • Vote, comment, subscribe, and moderation actions are shown on initial grid view

  • Secondary action items are stored in the “more” button

  • Users can easily see what stage the idea is in, and take action accordingly

 
grid-proto 2.gif
 

5) Testing

Responsive Design

The grid view is advantageous for responsive design — since each card is self-sufficient, their placement can be rearranged to fit any screen size.

phone-grid2.png

Key Takeaways

IdeaScale users wanted a new way to digest and interact with content. With the help of customer feedback, ideas, and support from all departments we were able to come up with a solution to suit their needs.

The grid view is currently in beta, we intend to iterate and refine as we gain more insights from users.

ideascale-grid-sample.png