Incubator

An End-to-End Brainstorming Web App

TYPE

Course Project

DURATION

April - May 2017

TEAM

Sharon Ang
Azalea Irani

KEYWORDS

Web Design
Rapid prototyping

Overview

This project is aimed to design a collaborative tool to guide and assist teams in the brainstorming process so that they can make most out of this technique. We first conducted literature review and 6 semi-structured interviews to establish the effective process of brainstorming and find the problems and behavioral patterns. Then we made a lo-fi prototyping and tested it with 5 target users. Based on the feedback, we quickly iterated our design and made hi-fi screens.

My role

We did interviews, analyzed the data and flesh out the ideas together, then I was the major role in deciding IA and took charge of creating wireframes and iteration after. I also designed the icons for our major concept and hi-fi screens.

Methods

Literature review, interview, brainstorming, affinity diagram, wireframing, usability test

Tools

Paper&pen, Balsamiq, Sketch

Problems

Designed by Freepik

Since its birth in 1941, brainstorming has spread throughout the world. It is used by nearly all of the world‘s largest companies and across a wide range of departments. It is especially heavily used in the world of design. But sadly, this technique is often applied ineffectually because of misoperations and lack of skills. Some teams are stuck with not enough fancy ideas. Some teams just spend lots of time arguing about which one is the best.

Users

Our target users are mainly design teams or any other kinds fo teams that need to brainstorm multiple ideas and finally converge on a few ones.

Research

Literature review

One of my teammates did literature review. Her main findings are:

- Group brainstorming can be more advantageous within a group with more diverse backgrounds, experiences and thought processes.

- Groups that are given brainstorming rules generate more ideas than those not given the rules.

Existing products

As more groups work remotely, collaborative tools that allow for brainstorming has mushroomed in the online communities like Mural, Stormboard, GroupMap, etc. However, while most of them allow for adding and organizing ideas, few cater to some of the most essential steps in the brainstorming process such as getting inspiration for ideas, as well as narrowing down from a large number of ideas to just one final idea.

Interviews

A total of 6 interviews were conducted with designers in an in-person, semi-structured format, using a series of how, what, why questions to discover current behaviors and attitudes. The findings are:

- Even in group settings, brainstorming typically begins with individual research and ideation sessions. Most of the sessions would involve prior background research and obtaining inspiration from various sources.

- The common strategies for thinking new ideas would be to take a break from the session, talk to others to bounce off ideas, consult professional advice, or seek further inspiration from the web.

- Interviewees commonly used Google Docs and messaging apps (e.g. Slack, WhatsApp) as a collaborative platform to share interesting research findings, and other tools such as physical notebook for jotting down notes and sketches, mobile phones for storing screenshots of webpages, images and for taking down notes on-the-go. For the later stages, teams relied more heavily on the whiteboard and sticky notes.

- To narrow down ideas, one participant mentioned metrics such as creativity, feasibility and also seeking feedback from others. Another commonly mentioned is by voting.

Ideation

Brainstorm

Based on the interviews and reviews of relevant literature, we had brainstorming session to think about what the product should do to meet users’ needs. Various key features and design criteria were listed and sorted out using an affinity diagram.

Features

We decided our tool to be project-based. The brainstorming process was divided into several phases.

- In the phase of finding inspiration, our tool should help user aggregate search results, like a chrome plug-in to easily add the image/article/text to the inspiration board. All the search results of group will be shown together and be automatically grouped by keywords.

- In the idea generation phase, we should let users easily record an idea and help them out when they get stuck. There will be individual space from and group spaces because the user may fixate on others ideas if they see them before they come up with their own. And users can set threshold they are most comfortable with to automatically share ideas to the group.

- In the idea development phase, same ideas should be collapsed and similar ideas should be grouped. Users can build on others' ideas, or they can simply vote or comment on each idea. They cannot see each other’s votes until they come to the converge phase because we don’t want other people’s attitudes to bias user. There should also be a visualization of the votes/ratings to help user choose the best idea.

- In addition, there should be an idea bank to store random ideas. These may not be for a specific project. Just users may randomly come up with good ideas in their daily life and they can just put them there.

Egg-to-Chick

We decided to use the analogies of egg, hatched-egg, and a chick to represent nascent ideas, semi-developed ideas and fully-developed ideas. When users create an idea, they need to choose among the 3 states to show how flesh-out the idea is. This help users feel comfortable to share their rough ideas and quickly get a sense of the state of an idea from others. This concept goes through our whole app and gave birth to the name of our app: Incubator.

Prototyping

Wireframe flowchart

Evaluation

The wireframes of the original design concept were tested in a series of 5 sessions with 5 designers. These sessions allowed for gathering of feedback as well as to gauge the usefulness of the proposed design. The findings from the usability test, coupled with amendments from further internal review, were incorporated by tweaking the design.

Inspirations should be consolidated

The original concept separated an individual’s inspiration from the group’s, as informed by the fact that interviewees would first conduct their own research and ideation. During the usability testing, the participants exhibited signs of confusion between inspiration and ideas, and preferred to have the group’s research consolidated on a page, to minimize duplication of effort between members. However, the contributor’s icon will be attached to a content so as to the team can keep track of the contributions of the different members. This will encourage members that are less inclined to contribute, to engage in research and curate their own articles and resources.

Making ‘Notes’ as important as inspirations

The original concept allowed participants to add a note to a particular piece of inspiration, and this option would be invoked via a right mouse click. The note would then be added as a comment beside the article. Some of the participants did not acknowledge the usefulness of this feature, partly because the function was not easily discoverable. This process would also render the notes to be of lower importance than the content of the inspirations. However, the reverse was true instead. In the new design, the users would be able to click on any part of an inspiration page to add a text on the page.

More apparent flow from Homepage to a Project Page

The original concept had poor indication of page transitions, as participants took some time to realize that Inspirations and Ideas reside within a Project. This was because in the initial wireframe, a new navigation bar would replace the original bar. In the new design, the previous page has been added to the navigation bar for better navigation around the site.

Linking Inspirations to Ideas

The original concept allowed users to create an Idea from viewing an nspiration, and this function would be invoked via a right mouse click and the Bulb icon. Participants stated that this was not intuitive as they would rather click the Ideas tab to add a new idea. They also stated that they would like the option to link multiple inspirations to one idea and this design would not allow them to do so.

Unintuitive terminology of “Mother” and “Child” Ideas

The original concept allowed users to build on existing ideas, by creating a follow-on idea. While both ideas would be individual ideas, they would be linked and users would be able to trace the follow-on idea to the initial idea. However, all participants were able to understand the concept of building upon ideas, none of them understood the original terminologies used - “Mother” and “Child” ideas. They also indicated that being able to trace a history of an idea was useful.

Possible actions on ideas

The original concept clearly separates the ideation phase from the converge phase. In the ideation phase, team members’ o pinions on ideas would not be shown, so as not to influence an individual contributor. In the converge phase, the likes, dislikes and comments from other team members would then be displayed. All participants did not like the dislike feature, which would be removed. Some participants highlighted the importance of interaction with other team members, or the equivalent of an online ‘discussion’, which would often result in better and more developed ideas.

Explanation of ‘Ready to Converge’ required

The original concept clearly separates the ideation phase from the converge phase. In the ideation phase, team members’ o pinions on ideas would not be shown, so as not to influence an individual contributor. In the converge phase, the likes, dislikes and comments from other team members would then be displayed. All participants did not like the dislike feature, which would be removed. Some participants highlighted the importance of interaction with other team members, or the equivalent of an online ‘discussion’, which would often result in better and more developed ideas. Participants were only able to get a good grasp of this concept after further explanation. In the new design, pressing the button would bring up a pop-up box that provided more information on the ‘readiness-level’ of other team members, and the option to indicate one’s readiness-level.

Visual Design