WeBoard App

Reimagining the collaborative mood board space.

Contributors

Katie Struk

Jenny Le

Lauren Lew

Timeline

3 weeks

Context

The was a team project in which we reimagined the mood board space with designers and artists in mind.

With this app, we set out to identify pain points and improve upon the tools already in use in the market such as Pinterest, Miro, and Instagram.

We created an app that allows designers more space to organize their images with collaborators.

My Role

I collaborated with teammates throughout the research, ideation, definition, wireframe, and prototyping phases.

Project Overview

In our user research and competitor analysis, we identified that users feel it is important to plan before starting a creative project and that they often need to work with a team when doing creative work. Planning usually takes the form of saving/sharing images, as well as, annotating and writing ideas with text. The recurring problem was that users saved and shared so many images that things were often lost or hard to find later. We solved this by creating a simple clean workspace with saving and sharing images being at the forefront.

The Problem

Mood boards were intended as a tool for designers to set the tone and communicate a plan for a project at a low fidelity level to ensure that all stakeholders are on the same page with a vision for the project. We observed that designers struggle to find images shared or saved online later when they need them which is causing miscommunication or delays in their workflow. How might we… improve mood boarding so that our designers are successful based on the number of monthly users that create mood boards and upload images?

The Solution

WeBoard:  easy to save, easy to share, and easy to arrange

The solution we reached was to create a flexible space for users to sort and organize their boards collaboratively in ways that make sense to them.

To reach this solution we went through these steps

  1. Developed hypothesis and research plan: proto persona and interview objectives/script

  2. User research: conducted 5 user interviews and received data through a survey

  3. Analyze research and brainstorm ideas: affinity diagram and “I like, I wish, what if” board

  4. Narrow down ideas and develop empathy: Feature prioritization matrix and Storyboard 

  5. Arrive at a solution

Research

We began research by creating a proto persona and a user research plan with an interview script so that we knew exactly what we hoped to discover through our research and so we would get the most from our interviews. We conducted 5 user interviews via Zoom call. We wrote our observations from each interview on sticky notes in Miro. We also shared a Google Form survey online. Lastly, we conducted a competitor analysis of similar products on the market.

Key findings from the interview/survey

  • Users often need to save images and share them with collaborators

  • Organization of saved/shared images is essential but can become a pain point when users need to refer back to saved images and can no longer find them

  • Planning and sharing images is an important part of the early design stages because it sets expectations and vision

What other products solve a similar problem?

Pinterest allows for both finding and saving images online

  • Instagram is a social network that lets users save images and follow friends for inspiration

  • Miro provides flexible space for users to design

  • Behance is a social network tailored to portfolios

How do they compare/contrast?

Pinterest can save images but it doesn’t allow you to organize them much or annotate

  • Instagram allows you to connect with friends and save images but you can’t organize images or label them for later

  • Miro gives you flexible work space,  but it is a paid program with limited free options which is not a good deal for small freelance artists 

  • Behance is tailored to design portfolios and offers a way to discover inspiration but it is hard to search and find specific projects later

Who is our user?

  • Artist

  • designs collaboratively

  • Needs to create mood boards at the beginning of projects

  • Struggles to keep shared files and images organized.

  • Often can’t find images later when they need them.

Define

Process: My teammates and I shared a Google Doc to type out iterations of user insights. We each typed out several insights then reviewed each other’s and highlighted the portions that we liked. Finally, we talked through the insights and collaboratively put together a single-user insight statement.

User Insight: A creative designer needs an efficient way to save, organize and share images and references because they juggle multiple projects that need to be thoroughly planned from start to finish, and throughout this process, they will need to quickly refer back to references.

Ideation

In the ideation portion of the process, there were three main steps to help us arrive at a solution. With each step, we asked a question. 

  1. What does the user need? To answer this we brainstormed as many ideas as we could in the form of “I like, I wish, and what if” statements. 

  2. Which needs are most essential? We next tried to prioritize features by looking at ideas that were high impact in terms of usefulness to users and low effort in terms of manageable/ doable features from a business/project perspective. 

  3. How do we build empathy toward our user’s needs? We wanted to make sure we were empathetic towards our users so that we could design something that would be genuinely useful for designers. As such, we created a storyboard to better visualize our users.

User Flow

From this point we had a solution in mind: Provide a flexible space to save and share photos that allow designers to organize, annotate, and collaborate with ease.

Next, we created a user flow to better understand what steps must a user take to complete tasks.

Sketches and Wireframes

Each team member created their own clickable prototype to achieve the tasks and goals

We set out to answer what is the most streamlined user-friendly layout to get our user from point “A” to point “B”? By dividing up and having each team member create a separate prototype iteration we hoped to allow more room for creative solutions.

With our prototypes we had several tasks and goals we wanted prototypes to accomplish.

Katie’s

Jenny’s

Lauren’s

Tasks to complete within first prototype 

  • Easy onboarding

  • Making a new board

  • Ability to import images

  • Provide means to organize and share

Design Goals

  • Keep onboarding concise, provide options

  • Home page should make it easy for users to find their boards and start a new one

  • Sharing options are upfront and center

  • Make it intuitive to import images & delete

User Testing

KEY TAKEAWAYS:

  • Easy onboarding process on all 3 prototypes.

  • On Katie’s prototype, many users found the toolbar intuitive. 

  • Lauren’s prototype had an easy clean layout but needs to be developed more to use its key features.

  • Jenny’s prototype had useful tip bubbles and an intuitive button for adding pictures.

Bringing Ideas Together

Home screen example: We took aspects of each of our prototypes and combined them in a way that worked well.

In some instances, we took just one sketch and expanded upon it to build out the details of the design.

We divided up portions of the design amongst the team and worked independently on our portions and communicated asynchronously using comments to collaborate.

Prototype

Conclusion

How are we solving our problems for our users?

How are we differentiating ourselves?

Next steps.

In summary, we discovered that users need more flexibility to sort and organize images for mood boards so that they will be more useful to them as a tool. The next step in our app will be to continue to build out some of the central features such as commenting tools, text, shape, and templates.

We also plan to begin to develop the Ui with color schemes and branding that give our app a youthful designer-friendly look.