Prototyping and Testing a Brainstorming App for Teams

Background

I completed this project as part of the UX Design: From Concept to Prototype course offered by the University of Michigan via Coursera. In this course, we had to design and conduct user testing on a new app.

The Assignment

Spend some time thinking about the projects you do with other people… Jot down a list of such collaborative projects, so you can think about them systematically. As you survey your list of the various kinds of projects you do in your personal and professional lives, think about if any of those projects would benefit from a tool that might help you work more efficiently and/or enjoyably? Of these, which projects are done by other people too, so that a tool that better supported such work would benefit a larger number of people?

The Problem

I recently joined a team of yoga instructors working to build a new organization that will provide training and educational resources to other yoga instructors. We are working to draft our organizing documents including our mission and vision statements. We’ve done lots of exercises to generate ideas. This data is held across multiple documents in a shared Google drive. We have been struggling to bring our various ideas together into cohesive statements. Therefore, we need a platform that will allow us to both generate and analyze ideas collaboratively. Our team is located across the country so it needs to be a web-based platform that allows team members to easily contribute their ideas and read the ideas of others. 

For this project, I designed a brainstorming app for teams. Essentially, the app functions as a virtual whiteboard that allows teams to generate and analyze ideas collaboratively.

Ideation

My plan is to develop a virtual whiteboard that will allow users to contribute ideas as “notes” that can be easily arranged and analyzed across multiple devices. I began with sketching and later developed into creating personas and scenarios describing how potential users could use the system. 

Personas and Scenarios

Q

Visual Artist in Los Angeles

Goals and Constraints
  • Needs help organizing their ideas and prioritizing tasks
  • Wants to share new ideas with collaborators
  • Does everything on their smartphone or tablet

It’s Saturday night and Q is at home getting ready for the opening reception for their latest exhibition. While putting on their makeup they get an idea for another project they are collaborating on. While carefully drawing on their eyeliner says “Hey, I have an idea, take a voice memo.” Her smartphone comes to life, “I’m listening.” Q speaks their idea and ends with “File it Under Project X, Share it with the Team”. The phone confirms the action and Q continues to put on their makeup. While riding to the gallery in rideshare, Q revisits the idea. Quietly, they open the app and go to the Project X board. They press and hold the voice memo icon and an options menu pops up. Q selects “convert to text”. In a moment a text memo appears and Q is able to read over their idea and quietly edit the transcript. They tap “save edits” as they exit the car and head into the reception.

R.J.

Project Manager in Tampa

Goals and Constraints
  • Wants to streamline brainstorming for a small team of design consultants during the
  • Needs an intuitive system that is easy to learn and implement

It’s Tuesday morning and R.J. is working from home. He logs into the app via his web browser and scans a page with multiple project boards and selects the board he is looking for. He wants to see how the B Team is progressing. From a drop-down menu, he selects “B Team” and a list of the teams’ boards are displayed. He selects the project he is interested in and opens the corresponding board. He sorts the notes by date and selects the first text memo. It’s a post by Sam. R.J. leaves a comment, “this is a great idea – do you think we can work it into the prototype before our next client meeting?” Seconds later, Sam gets a push notification on his smartphone with R.J.’s comment. He swipes left and opens the memo and instantly replies to R.J.

Peer Review

I submitted my sketches, personas, and scenarios for peer review. I then incorporated the feedback as I began to develop wireframes.

Wire Framing

Peer Review

I submitted my wireframes for review and began preparing for the next phase of the project, user testing. Once I received my reviews, incorporated the feedback into my prototype.

User Testing

The assignment required us to test a paper prototype with a friend or family member. Due to the pandemic, I decided it would be better to conduct user testing remotely. So, I created a clickable prototype in Adobe XD and recruited a friend for a remote test via Zoom. The task listed included:

  1. Creating a new Board
  2. Posting Notes to an Existing Board
  3. Analyzing posts by running reports

Recommendations 

Based on user testing, the following design changes are recommended:

  1. The tester encountered difficulty adding team members to the new board. They weren’t sure if they should click “add team members” first, or after they have selected the desired users. Based on this, the design should be modified to clearly indicate that one should select the user icons first, and then click “add team members”.
  2. The tester suggested indicating which fields are required when creating new boards and new posts. Furthermore, the “publish” button should not appear until both of these requirements are met.
  3. The tester was initially confused by the design of the New Board screen. They were unsure how to enable/disable certain settings because there were not clear toggle switches. Furthermore, the proximity and layout of the user icons suggested to the test that the icons were the toggle buttons. Therefore, a row of toggle switches for each of the settings.
  4. The tester stated that it would be helpful to include a dedicated home button to bring users back to the board home. Currently, users would need to click on the board name to return to the board home and this was not intuitive for the testers.
  5. The tester also stated that they would like to have breadcrumbs that help them know where they are within a certain board or the system as a whole. For example “Board 1 > Reports > Affinity Diagram”. Based on this, I recommend adding these navigational breadcrumbs to future designs.
  6. The tester recommends changing the “My Profile” link to “My Dashboard” as it would be more useful to navigate to one’s dashboard rather than to their profile. Within the dashboard, individuals can access all of their assigned project boards as well as their profile settings.