Redbooth

Web App

Redbooth is a productivity web app, designed for task and project management that provides a single place for team collaboration.

Redbooth is a productivity web app, designed for task and project management that provides a single place for team collaboration.

My Role
  • Research
  • Ideation
  • Prototyping
  • Visual Design
  • Style Guide
  • Visual Design
  • Style Guide

Redbooth is a web app that helps teams with task and project management. They came to ZURB to explore and design a new productivity tool catered to creative teams. My role as the primary product designer included user research, ideation, wireframing and prototyping, and visual design (including style guide). I worked with a Design Lead, whose role was project management, to tackle this project. We collaborated with stakeholders that included the CEO of Redbooth, a Project Manager, and a UX Designer.

Our goal was to design a product management app that caters to creative teams within a design agency. We want to explore big ideas that challenge our assumptions. The design should be validated through user testing and research, as well as resonate with the Redbooth team and stakeholders. From a product perspective, we want to create a cohesive and engaging brand that appeals to a creative audience.

Target Audience

To understand the target audience, we conducted one-on-one interviews with project managers, designers, and an art director. We asked about their creative process and workflow, their experience using productivity tools, and challenges in team collaboration.

The target audience is an internal creative team that includes: Project Managers, Production artists (team members), and stakeholders (external team members). Part of the workflow that stood out were the creative brief, milestones, schedule, concepts, feedback, and approvals.

Insight

Understanding the target audience helped us surface a powerful insight about their workflow: Project Manager (PM) starts by defining the goals and milestones in a creative brief that the client reviews and approves. Once the creative brief is approved, the PM works with team members to schedule milestones, create design concepts, facilitates concept review for feedback, and get approval of deliverables to move forward to the next milestone.

To create a cohesive user experience, we defined three main values that drive the audience to use the app. With "Let's make creative things happen" as the overarching mission, the three main values are Creative-oriented Tasks, Conversations, and Creative Progress for Team.

Workflow

We explored use cases and ideas from four different workflows to help challenge our assumptions, as well as push and pull different ideas for features. We looked at workflows that are conversation-focused, goal-focused, outcome-focused, and timebox-focused.

Opportunities and Ideation

We pulled the best ideas from each workflow to help make Redbooth a place for collaboration. PMs, designers, and stakeholders need to be aligned on project goals and design directions, so features that facilitate communication and posting work are important. Projects are unique, so the ability to customized the workspace to cater to a specific project and team is useful for advanced users.

The UI solution that makes the most sense is Task Cards, which works well with drag-and-drop interactions that can help users customize their workpace. Also, having separate Task Cards for different actions helps team members and stakeholders organize todo items, uploaded concepts, and discussion threads.

Prototype and User Testing

After identifying potential UI and interaction solutions in ideation sketches, we focused on wireframes to help us create a prototype. We decided to quickly iterated on a couple visual design directions to get the wireframes closer to the end product to help us create more realistic clickable prototypes that the Redbooth team can start testing.

Although user testing was not part of scope, I did a quick guerilla testing with the team at ZURB. I asked people to complete several tasks, mainly focused on the actions and features on the creation of a design brief. We iterated through several rounds of concepts based on what we learned from the user testing and Rebooth’s feedback.

Creative Brief

We focused on creating a simple template with clear calls to actions to help project managers start a creative brief, request feedback from internal team, make revisions, request feedback and approval from the clients.

Milestones

The calendar is the one of the first views to help project managers see the milestones they defined in the creative brief. In this view, Project Managers and Designers can get a sense of the timeframe and status for each milstone. From here, they can quickly add steps.

Steps

PMs and Designers can define specific todo items by adding steps to complete each milestone. The Card UI for each step helps them identify everything from todo lists, uploaded concepts, and discussion threads.

Approved

Each card has a details view that helps PMs and Designer see all the comments and feedback, work uploaded, and activities from everyone involved. For example, a Designer uploading a concept using the “Ask for Feedback/Approval” step can dive deep into the details view and see all of the client’s feedback and whether the concept is approved or not.

Mobile Design

To help the developer get a sense of the mobile experience, I utilized mobile app patterns such as off-canvas menu, persistent navigation and call-to-actions, and full-screen modals to help create concepts for the main pages of the web app.

Visual Style Guide

We also provided a visual styleguide to help the team understand the visual language we created, as well as detailed specifications on front-end styles on the main UI components.

We were able to help the Redbooth team open up the problem and explore big ideas that challenged their assumptions and perspectives. We designed a solution that catered to a creative audience and resonated with the Redbooth team and stakeholders, validated through user testing and research.

More Work