Let's Dabble Together

Dabble.co (Dabble) is a Chicago-based startup with a mission to help people learn new crafts and skills from teachers in their community. Dabble was so successful at connecting teachers and students that its users wanted more than just one-off classes: they wanted a way to connect around their shared passions. Dabble Groups was conceived to help users create groups that foster discussion, event planning, and community building.

CHALLENGE

Develop the brand and primary user flows for the new platform, Dabble Groups, that feel familiar to users of the parent brand, Dabble, and are strong enough to stand on their own.

APPROACH

Identify small and impactful ways to differentiate Dabble Groups while retaining key elements existing Dabble users love about it.

SOLUTIONS

Modernize overall brand design and UX while retaining the most defining aspects of the current Dabble brand and platform.

OUTCOMES

A site that feels familiar, fresh, intuitive, and modern.

MY ROLE

UI/UX designer
Brand designer
Logo designer
Project manager

DELIVERABLES

Competitive analysis
Branding, including logo
User interview reports
Hi-fi mobile and desktop designs
Hi-fi mobile and desktop prototypes
Design system

TOOLS

Illustrator
Sketch
Miro
InVision
Zeplin

Before and After

We used the current Dabble site for reference (left) and updated the UX and UI to give Dabble Groups (right) a more modern look and feel.

Screenshot of current Dabble discover events (left) compared to screenshot of new Dabble Groups discover events (right.

KICKOFF

Defining the Project

The goal going into the initial client meeting was to understand the client’s vision: who they wanted to create this platform for and why they felt it was important. From this conversation, I was able to identify the client’s nonnegotiables, the experience they bring to their users currently, and their top design priorities.

Overhead shot of printouts of documents with highlight and notes written with a notebook with notes placed on top.

Background information provided by the client and my notes from our kickoff meeting

RESEARCH

Getting to Know Our Competitors

The heart of any successful project lies in the research. I coordinated broad marketplace research and an in-depth competitive analysis, looking at both the function and the visual design of 6 key competitors and 2 indirect competitors. Our goal was to gain understanding of best practices in the space and identify ways to distinguish Dabble Groups through its brand identity.

We identified 3 key ways that Dabble Groups could be sure to stand out among its competitors:

Excellent discovery page for users that includes a variety of recommended content.
Clever and consistent use of CTAs to engage and guide user to available actions.
Friendly, personified branding that makes users feel part of the Dabble community while using the site.

Two screenshots from Competitive Analysis presentation: Left is an analysis of Mighty Networks; Right is the Key Takeaways found.

Selected slides from our Competitive Analysis report. We broke down what each competitor was doing well and opportunities for Dabble Groups and provided several Key Takeaways that informed all our future design decisions.

BRANDING

Cohesive Yet Distinct

After gaining an understanding of the market as well as current Dabble users' experience with the brand, we moved onto developing Dabble Groups new brand identity. My team looked for small and impactful ways to differentiate the new brand identity. We kept the primary brand colors the same as Dabble so that existing users would feel right at home. Pops of color in the buttons and CTAs make Dabble Groups feel fun and unique. We also designed a new logo for Dabble Groups that would be flexible, modern, and recognizable to current Dabble users.

Four Style Tiles shown to explore Dabble Groups branding.

Three original style tiles used for user testing on the left and our final style tile to inform the visual brand identity on the right.

A selected few of the dozen different logo concepts we developed (right) and the final logo (right and in color) that was selected, informed by user testing and client input.

UX CHALLENGE

About Those Wireframes . . .

We thought UX work had been previously completed for this project, but to make a long story short, it had not. There was no UX research or design for the Dabble Groups platform and no time or resources to build full wireframes. Instead, we adapted wireframes and existing designs from Dabble to envision new flows for Dabble Groups that met the client’s vision.

Screenshots from current Dabble website with notes and annotations.

Annotated "wireframes" that we created and reviewed with the client to ensure mutual understanding of design expectations before moving into high-fidelity mock-ups.

USER TESTING

The Crafty Cat Ladies

Dabble's CEO lovingly referred to Dabble's main users fitting into the 'Crafty Cat Ladies' demographic. Though we didn't have time in our schedule to develop user personas, we did do two rounds of user testing.

In the first round, we sought to understand Dabble's current users' experience with the Dabble brand: what worked for them and what they would like to see expanded upon. We also presented users with 3 style tiles that we developed for the new Dabble Groups brand and solicited feedback using the 5-Second Test and Rose/Bud/Thorn exercises.

Affinity map of user testing results; collection of digital sticky notes divided into Feeling, Text, Compontents, Images, and Colors categories.

Affinity map created in Miro based on the first round of user testing.

We used the feedback we received in the first round to finalize the branding and inform our first set of high-fidelity mock-ups. We tested these with users in a second round of user interviews and were able to gain insights into the best layout for the 'Create Groups' and 'Discover Groups' user flows through usability testing.

UI DESIGN

Make It Pretty

After integrating client and user feedback into several design iterations, we landed on a final design for both primary user flows as well as a homepage for Dabble Groups.

Four screenshots showing progression of the design of Dabble Groups Discover Groups screen.

After several iterations and user testing, we landed on a final design (right) for the 'Discover Groups' landing page.

Four screenshots showing progression of the design of Dabble Groups Create Group screen.

After several iterations and user testing, we landed on a final design (right) for the 'Create Group' landing page.

Walkthrough of desktop prototype

Walkthrough of mobile prototype

HANDOFF

At the end of this project, we provided our client with a fresh brand, complete flows for desktop and mobile, and a robust design system to ensure future design and development would be consistent and successful.

A key takeaway from this project is how impactful seemingly small changes can be to a brand. A new typeface for headings, some color in the CTAs, and an updated logo transformed the long-standing Dabble brand into the modern and fresh Dabble Groups. Slight changes to the UX, like integrating the search function into the header, further modernized the new platform and improved the overall experience.

Reflection and Lessons Learned

Complete Design System created with Zeplin

TESTIMONIAL

A Word from Our Client

I had a great experience working with Stephanie who was part of a design team leading our company (Dabble) through an intensive UI/UX design project with the Flatiron School. Stephanie was a leader on her team moving the project forward and led product testing with some of our top customers. Stephanie was an engaged, focused, and thoughtful team member during our time together and would highly recommend her to anyone seeking similar support.

- Jemal Swoboda, CEO, Dabble

Want to see more? Check out my other projects or connect with me on LinkedIn.