3 months, doing the research, analysis, and design.
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.
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.
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.
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.
Based on the conducted research, six distinct personas were identified and were categorized based on the following criteria:
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.
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.
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.