Dabble
Event Creation Flow
Created a welcoming, consistently branded design based on an existing UX prototype of an event creation wizard.
Deliverables
High Fidelity Designs
Style Guide
UI Design Team
Ariana Parenti
Jessica Kress
Tools
Sketch
Figma
Time
4 Weeks
The Client
Dabble is an online platform connecting curious learners with local teachers and event hosts for in-person experiences from axe-throwing to curling iron lessons.
Why was a redesign needed?
Dabble needs to continue to grow its ticket sales in order to attract new investors for development projects to modernize the platform. There are a core group of teachers who regularly host successful events on Dabble, but teachers who do not achieve early success are quick to drop off.
A newly designed onboarding process and more straightforward event creation flow will create a supportive experience for new teachers to help them achieve success.
Constraints and Challenges
Limited Developer Resources
Dabble relies on one part-time developer for website updates, so solutions need to be easy to implement in one cohesive style across the site.
Incomplete Wireframes
The planned updates to the event wizard were wireframed by a previous UX team (composed of past Flatiron students) who did not take into account all of the technical constraints of the platform.
4 Week Timeline
With only 4 weeks to complete a competitive analysis, develop a design strategy, and design high fidelity screens for a 10 screen user flow, we needed to aggressively manage our time to complete the highest priority tasks.
Understanding the needs of new teachers
Based on research from the previous UX team, new teachers on Dabble are interested in trying out the platform as a new way of engaging with their passion areas. Their commitment level to the platform is low as they view it as an experiment. These teachers are uncertain if their experiences with the platform are typical. For the new teacher, hosting a class should inspire the same kind of anticipation and fun as students experience when dabbling in something new.
Competitive Analysis
Before beginning designs for the new event wizard we researched the visual strategies of other platforms that serve users in monetizing their expertise.
Direct Competitors
-
CourseHorse
-
Verlocal
-
Vimbly
-
Meetup
Indirect Competitors
-
Eventbrite
-
Etsy
-
Facebook
-
Airbnb
Takeaways
Clear hierarchies make complex tasks feel easier
Airbnb shows a simple task list to direct hosts on what to do next.
A minimalist approach allows hosts to shine
Airbnb's primarily white interface removes distractions from the event images.
Small moments of fun create a welcoming environment for new users
Etsy uses paper-like illustrations and color blocks to draw attention to supportive tips.
Design Principles
After a card-sorting exercise in which the client and the design team wrote out their ideas of what makes up Dabble’s core identity, four characteristics emerged.
Straightforward
Shows the user only the information they need at the time so using Dabble is easy and intuitive.
Inviting
Creates a community of teachers and learners with a friendly and accessible platform.
Authentic
Builds partnerships with members through real, hands-on support.
Engaging
Builds a sense of anticipation with moments of excitement and delight.
Style Tiles
I explored 3 initial design directions to test how users respond to different levels of added playfulness to the existing brand styling.
[1 of 3] Close to Current Brand
Colors adjusted to meet accessibility contrast ratios
User Testing Results and Chosen Design Direction
Users responded most positively to the second design because it still felt like Dabble but with more personality. After reviewing the results of the style tile user testing with the client, we developed a converged style tile to move forward with. This design brings together the colorful flat illustration style, rounded corners, and an updated color palette.
Way cooler than the current status of Dabble.”
- Alexandria Willis, Shoemaker
“
High Fidelity Designs
As we began designing the high fidelity screens, we focused on creating a straightforward, inviting, authentic, and engaging experience by targeting the following key features.
Prominent supportive tips to encourage appropriate form entries
Welcoming visual elements including rounded corners and colorful illustrations
Strong information hierarchy with spacing and typography
User Feedback
Testing Process
For initial feedback on the high fidelity screens, we interviewed six users and asked them to rate each screen in the flow on how closely they matched the adjectives we identified in our design principles.
Results
On the whole, users responded positively to the new aesthetic and ranked the screens across the board as a close match to the targeted adjectives. However, several important issues were brought to light during the testing, outlined below.
Supportive Tips
Experienced teachers are busy small business owner and tips are distracting
New teachers want support through friendly tips
Note: Most of the users interviewed in testing were actually experienced Dabble teachers, rather than the target audience of new teachers.
Explorations
Alternate styles were explored based on feedback from internal critiques, but the most successful designs did not change the overall prominence of the tips.
Solution
Tips are hidden until relevant field is active. Tips are kept short and branded with friendly illustrations
Progress Navigation
All users tested expressed confusion around the functionality of the progress navigation.
Confusion about connection between active menu item and current page.
Frustration that they couldn’t skip ahead in the progress navigation.
Simplified the structure and added numbers to the page titles.
Users were still frustrated that they couldn’t skip ahead.
Reverted to the current site UX pattern of a horizontal progress bar
Trying to separate the “Become a host” and “Create an event” steps added to much visual complexity
The grey background made the page feel washed out and the dotted line was confusing for users.
Explorations
Solution
Our final solution is structurally similar to the current state of the event wizard, with an updated and branded look.
Secondary Photo and Profile Page Layout
Users didn’t know what image of picture to upload as a secondary image
The wireframes did not indicate how this secondary image would be used on the partner profile page and the client was unsure if it would be best used on the profile page itself or on an event page. We needed to revisit the design of the profile page to address the user's confusion.
Explorations
Timeline-style layout
I was concerned about creating an image at such a wide aspect ratio that would rely on user generated content. Unless the user is specifically taking a photo with that aspect ratio in mind, it can be difficult to find an image that displays well in that space.
Slideshow layouts
Ultimately I felt that this use of the secondary image added unnecessary complexity to the page and strayed too far from the original wireframes.
Solution
Moving the page title below the secondary image and using the teal overlay helps the page rely less on the strength of the user-uploaded image.
The rectangular shape of the secondary image field gives users an idea of how the image will be displayed on the profile page.
Note:
If Dabble finds that users are having trouble uploading images that work well in this space, I would recommend developing several generic patterns that users could choose from to occupy that space.
Final Designs
With the primary concerns that were raised in user testing addressed, we continued to refine the final designs based on internal feedback to create a pixel-perfect, balanced, and consistent design system.
Current State
New Design
New Teacher Welcome Screen
Results
Unfortunately, the project timeline did not allow for a full final round of user testing to assess the success of the design. We did perform one additional user test with an experienced Dabble teacher who rated the new design very highly.
“
The current site isn’t bad, but this is better. It feels very welcoming and friendly . . . there is an intention behind everything.”
- John-Michael Korpal,
Flying Dolphin Studio
We received very positive feedback from the client as well.
You were detail-oriented and I really appreciated your nuance of thinking through things … Thank you so much for all the great work”
- Jemal Swoboda, Dabble
“
Next Steps
-
Additional user testing to confirm that users understand how to use the progress bar for navigation after they have completed a page.
-
Refine the site copy related to Dabble partners. Terminology around this user type is inconsistent and some users felt “event partner” was off-putting or intimidating to some users who weren’t sure how committed they were to the platform.
-
Mobile screen layout and testing of the event creation flow.
-
Edit-in-place form
Developing the capability for users to edit their profiles and event details directly in a preview version of the final screen would make a huge impact on the ease of completion on these forms. We predict that this would result in better submitted content from users, which could lead to increased conversion rates.
-
Advanced microinteractions
The addition of illustrations to the site provides many opportunities for delightful user interactions. The illustrated figures could be animated to respond to user inputs in the form fields. We would recommend keeping these animations small and somewhat subtle, but small amounts of movement in the illustrations could add significantly to user feelings of engagement.
Reflections
My biggest lesson in this project was that I could still deliver value in my design with very simple adjustments to spacing and color. It was tempting to customize the design of every form field for a deeply engaging and innovative experience, but that was clearly not what the client needed in this case. I was impressed by the difference more minor tweaks could make in creating a more pleasing and straightforward user experience. Even with these minor tweaks the experience still felt clearly branded.
