Puzzley
User Panel
Puzzley is an online app builder that lets you create apps with drag-and-drop functionality, no coding required. Its feature-rich panel allows users to easily customize their apps.
What is Puzzley?
Platforms
Tools
Role
Timeframe
Study Overview
Problem Statement
The Puzzley Panel had significant complexities, as it was developed without many user experience considerations.
Study Goals
In this study, I aim to reduce user confusion and improve task completion rates.
Solution Impact
Since I redesigned the entire process, we experienced a significant improvement.
My Role
As a UI/UX designer, I collaborate closely with the product team to identify user challenges, communicate design solutions, prioritize outcomes, lead the design process, and align expectations with development teams.
User Research
Competitive Analysis
Puzzley has several national and international competitors. I chose projects similar to Puzzley to study to take advantage of their best practices.
Functionality
User Interface
Typography
Color
This analysis allowed me to observe how other products addressed similar challenges through their innovations. It also provided insights into how they used colors and typefaces to highlight different sections or features.
Survey
I began my research on Puzzley users by designing a comprehensive survey, which I distributed to 300 randomly selected clients. The survey covered demographic details and questions about their product experience.
Maximum budget spend on building an app
Favorite category for building an app using Puzzley
Average time of building an app using Puzzley
Advantages of Puzzley
Apps built using Puzzley
Knowledge about Puzzley
Purpose of building an app
Experience in building an app
Experience in building an app
Demographics (Age, Gender, Degree level, and Occupation)
Survey Results
Some charts from the survey results.
Prioritise Changes
Given that I had only three months for the entire redesign process, I decided to focus on the following needs that could be designed and implemented within the timeframe after discussing the expected changes with the development team.
Help & Support
Pre-built Templates
Step-by-Step Guidance
In-Person Usability Test
Using Snagit
To conduct a usability test, 5 users with characteristics similar to the product personas were randomly selected. Each user is assigned specific tasks in the Puzzley panel. During testing, users are prompted to think aloud and vocalize their actions while their screens are being recorded.
System Usability Scale
Using Pen & Paper
Each user is requested to complete a System Usability Scale form, reflecting their experience with the product and providing us with their suggestions.
Re-Design Process
Information Architecture
Using FlowMapp
I transformed the vertical menu into a horizontal one and added a ‘Create app’ call-to-action, giving users more workspace and the ability to start app creation from any point.
App Templates
I proposed adding App Templates to the panel so that users can create their apps using pre-built templates and customize them based on their needs.
Some Before & After
Desktop Version
The fresh look and feel of the desktop version offers a new and improved experience for Puzzley users.
Before
After
Before
After
Before
After
Before
After
Before
After
Visual Design
Desktop Version
The fresh look and feel of the desktop version offers a new and improved experience for Puzzley users.
Visual Design
Mobile Version
Despite the majority of users using the desktop version, I tried to employ a mobile-first approach to improve the mobile version.
Recap
The Challenge
The Puzzley User Panel had significant complexities, making it difficult for users to understand how to use it and create an app.
Study Goals
Understanding users’ challenges and working to reduce major complexities to enable them to create apps faster.
Solution Impact