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.
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.
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.
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.
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.
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 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.
After several iterations and user testing, we landed on a final design (right) for the 'Discover Groups' landing page.
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.