Description & Goals

Puzzley panel had significant complexities since the product was developed without considering many user experience criteria. In this project, working along with Puzzley team, I only tried to redesign Puzzley app builder based on its users’ data to reduce these complexities and improve its UX as well as UI.

---

Competitive Analysis

Puzzley has several national and international competitors. I chose three national and five international projects similar to Puzzley to study their services, tools, typography, and colors to take advantage of their best practices.

---

Survey

I started my study on the experience of Puzzley users by preparing a proper survey and disseminating it among one hundred randomly selected clients. This survey included demographic and product experience questions.

---

Information Architecture

Generally, the information architecture of Puzzley panel were remained almost unchanged. However, vertical menu was transformed to a horizontal navigation bar with some changes in the order of its items and a Call-to-Action button for creating new application was added.

---

Persona, User Story & Scenario

Based on the conducted research, six distinct personas were identified and were categorized based on the following criteria:

• Demographic (Age, Gender, Degree level, and Occupation)
• Installation and examination of new apps
• Maximum budget spend on building an app
• Experience in building an app
• Purpose of building an app
• Knowing about Puzzley
• Number of apps built using Puzzley
• Average time of building an app using Puzzley
• Advantage of Puzzley
• Favorite category for building an app using Puzzley

These personas have their own stories and reach the panel using different scenarios.

---

Usability test results

In order to perform Usability test, five Puzzley users with similar characteristics to the product personas were randomly selected. The result of this experiment showed how much Puzzley app builder can be unresponsive and what parts need to be changed to improve users' quality of experience.

---

High Fidelity Prototypes

Once the site architecture and general functionality and flows had been established, the wireframing began. After rounds of usability testing and considering the results of UX research, the design’s merits and demerits were popped up and helped to shape a more desirable solution.

---

Color Palette & Typography

There is only one primary color in Puzzley Brand Identity Guidelines that was used when designing new panel. However, two other colors were used to ensure enough contrast wherever necessary. IRANSans was the primary typeface used in this project as Puzzley has been using IRANSans for its main site and legacy panel.