Drzzle

Case Study

Overview

Year: 2017

Role: Product Designer / Software Engineer

App: https://login.drzzle.app
The goal was to create a product from scratch with an intuitive experience yet remain very flexible for users creating websites. We wanted to lower the learning curve for less technical users wanting to learn a new product and still remain appealing to more technical users.

Research

Over my many years of designing and building websites of all sizes for people I had my own list of pain points I wanted to tackle as a user but I felt it was important to get perspective from all angles on this. As part of my research, I conducted interviews with agency owners, designers and developers. I read forums on competitor websites and joined slack and social media groups for some really good insight.

I came up with the following personas for this product.

Mark Picasso

Male / 30
Profile: The Designer. Tech savvy. Site count can range from 1-20+

Location: Austin, TX

Occupation: Digital Designer. Works on a range of design mediums including UX, Visual, Video, UI etc. Mostly a freelancer making ~60K/yr.
Motivation: Create production ready code during the design process. And give their clients the freedom to edit their own content.

Goals: Concentrate strictly on design. Get websites and prototypes online quick.

Pain Points: Writing code. Deploying websites.

Susan Biggs

Female / 35
Profile: The Agency Owner. Somewhat technical. Site count can range 20-100+

Location: Boston, Mass.

Occupation: Owner of a digital agency. Deals with a range of things including content, managing clients, building relationships. Sometimes dabbles in design. Makes ~100K/yr.
Motivation: Manage all clients in one dashboard. Give clients the freedom to make their own content edits.

Goals: Concentrate more on gaining new clients. Automating easy tasks.

Pain Points: Making sure clients pay on time. Difficulty juggling tasks.

Joe Cruz

Male / 40
Profile: Small Business Owner. Non technical. Only needs 1 website.

Location: San Diego, CA

Occupation: Owner of a roofing company. Mostly does manual labor and handles business related matters. Makes ~50K/yr.
Motivation: Quickly have a nice website deployed for an inexpensive price. Very intuitive experience. Easy to setup templates so he will not have to do much.

Goals: Allow visitors to contact them and learn about services through their website. Low maintenance.

Pain Points: Writing code. Deploying websites. Anything web technical. Can't design. Overwhelming UI's.

Sally Sale

Female / 27
Profile: The Online Seller. Somewhat technical. Only needs 1 e-commerce website.

Location: Portland, OR

Occupation: Creates physical goods and needs to sell them online. This is mostly a side hustle until it takes off. Salary from day jobs can range 30-50K/yr
Motivation: Sell goods online. Manage inventory online. Have ready made website templates.

Goals: Analyze traffic and demographics. Promote website and sell as much as possible. Make "easy" edits to website on the fly.

Pain Points: Writing code. Visual Design. Scaling website traffic.

Donny Miller

Male / 25
Profile: The Developer. Very technical. Site count can range from 1-20+

Location: Seattle, WA

Occupation: Software Developer. Works on both front and backend development. Very familiar setting up CMS's. Mostly a freelancer making ~100K/yr.
Motivation: On the hunt for an intuitive CMS alternative to others like Wordpress, Drupal etc. so their clients can have an easier time making edits. Have ready made templates as he is usually not design savvy.

Goals: Manage clients in one control panel. Have recurring income each month.

Pain Points: Hounding clients for payments. Finding ongoing work. Visual Design.

Cody McBanks

Male / 38
Profile: The No-Code Enthusiast. Somewhat technical. Site count can range from 1-20+

Location: San Francisco, CA

Occupation: Serial Entrepreneur. Loves to start a new business to see where it goes. Has a day job ~60K/yr.
Motivation: Easy to use UI. Ready to go templates. Quickly deploy a website so their idea can get to market quickly. Flexibility in design and content. Affordable pricing.

Goals: Get an idea to market without writing any code. Use a lot of integrations to orchestrate a work flow. Scale quickly.

Pain Points: Writing code. Deploying websites. Visual design.

Design & Flow

Early sketches and mock ups are a little different from the finished product but it was definitely a good starting point to iterate from. In the effort to create an intuitive experience for these users, I went with the minimalistic approach. I made it a rule to not show any unnecessary controls/buttons unless the user needed them. This allowed for an easier barrier to entry but also allows more technical users to dig through more options as needed.

The product was broken down into 2 major areas. The admin dashboard and the page editor. You can see more into the thought process on the flow planning of each by clicking on the images.
Admin Dashboard
Drzzle Admin Dashboard
Page Editor
Drzzle Editor

Final Solution

After reiterations based on data from feedback and analytics I'm very happy with the final solution for the MVP. Users we pleased with the intuitive nature of editing components and making edits as well as managing all of their website's in one control panel. In the future the goal is to create more components that are specific to the type of website the user is editing so that we can dynamically tailor the experience based on that type (eg restaurant, real estate, weddings etc.)
/
Drzzle is currently live at login.drzzle.app and has a free tier. Feel free to create an account and test it out!
Continue Shopping
Cart Info & Shipping Payment Confirmation

Shopping Cart

    Subtotal:

    Info & Shipping

    Contact
    Email
    Shipping Address
    First Name
    Last Name
    Company
    Address
    Apartment, Suite, etc.
    City
    ZIP Code
    Phone 000-000-0000
    Discount Code
    Subtotal $0
    Discount $0
    Shipping $0
    Taxes (estimated) $0
    Total $0

    Payment

    Email:
    Ship To:
    Shipping Method:
    Payment Method
    Name on Card
    Card Number
    Expiration Date (MM / YYYY)
    Security Code
    Billing Address
    Address
    Apartment, Suite, etc.
    City
    ZIP Code
    Subtotal $0
    Discount $0
    Shipping $0
    Taxes (estimated) $0
    Total $0
    Hang tight while we complete your purchase...

    Thank You for Your Purchase!

    We have also sent your receipt to your email address.