case study: 
droip website builder

image-droip

About the product

Droip is a WordPress drag & drop website builder that makes website designing and building a lot easier.

Collaborators

Kawshar Ahmed (CEO & Product Owner) 
Mohan Haque (Lead Product Designer) 
Ahmed Manna (Product Designer)

My role and responsibilities in the project

Competitive analysis

Qualitative user interviews

A/B testing

Design system

Visual design

Onboarding process

Design documentation

Design QA

Collaboration with engineers

Who is droip for?

People who want uniqueness rather than readymade and...

  • Indie developers, designers, and small agencies who mostly build websites for their clients 
  • People that care about design

What are the pain points?

Can't design and develop seamlessly with no-coding knowledge and...

  • Struggling to keep up with the latest web design trends and technologies
  • Difficulty adapting to accessibility requirements in technology
  • Desiring uniqueness instead of relying on ready-made solutions

What were the objectives?

Users should be able to design custom websites visually and...

  • The platform must be a complete solution
  • Ability to add web interactions visually
  • Accessible for everyone
  • Processes have to be simplified and a low learning curve
  • Controls should be at granular levels
  • Built-in collaboration as per roles
  • The platform must be scalable
  • Self-hosted and easiest website management

Research methods and activities employed for the project.

Unfortunately, I am unable to disclose any research findings or data due to confidentiality concerns.

market analysis

Social Media Listening

Qualitative User Interviews

JTBD

Competitive Analysis

Journey Maping

Value Proposition

A/B Testing

droip solutions

1

Complete pack for website designing and building

Media manage and edit

As a digital product designer, I merge user experience, visual design, marketing, and business principles to create beautiful and functional products.

mediaclip-pathimage-edittext-path

Form creation

As a digital product designer, I merge user experience, visual design, marketing, and business principles to create beautiful and functional products.

formform-elements

SEO settings

As a digital product designer, I merge user experience, visual design, marketing, and business principles to create beautiful and functional products.

seoopen-graph

Interaction and animation

As a digital product designer, I merge user experience, visual design, marketing, and business principles to create beautiful and functional products.

interactiontimeline

Modality

As a digital product designer, I merge user experience, visual design, marketing, and business principles to create beautiful and functional products.

modalmodal-position

Font manager

As a digital product designer, I merge user experience, visual design.

fonts75b9dc49e475ebc743e4fba6ba9de467

2

Visual web interactions and animations

interaction

Media managing tools

interaction-library

Media managing tools

timeline

Media managing tools

timing-editor

Media managing tools

3

Customizable

canvas-view

Media managing tools

autosave

Media managing tools

canvas-resize

Media managing tools

zooming

Media managing tools

4

Granular controls

grid-controls

Media managing tools

stroke-controls

Media managing tools

custom-grid-cell

Media managing tools

advanced-typography

Media managing tools

units

Media managing tools

psuedo-selector

Media managing tools

5

Easiest management

layer

Media managing tools

page-settings

Media managing tools

reuseable-symbols

Media managing tools

6

Scalable

dev-mode

Media managing tools

custom-code-element

Media managing tools

custom-attributes

Media managing tools

7

Reduce interaction cost

add-element-from-canvas

Media managing tools

non-modal-menu

Media managing tools

mergin-from-canvas

Media managing tools

inline-bar

Media managing tools

8

Accessibility

accessibility-options

Media managing tools

color-blinds

Media managing tools

global-search

Media managing tools

keyboard-shortcuts

Media managing tools

color-contrast-checker

Media managing tools

frame-282

Media managing tools

what peoples saying about droip?

img-testimonial