top of page

Puzzle

Puzzle is an AI-empowered, prompt-based browser application designed for non-professional designers or those who are beginners in the subject area of design, seeking a straightforward path to producing design deliverables. It aims to minimize the learning curve and maximize customization to ensure that the results not only spark creativity but also meet the requirements. 

Research & Ideation

Artificial intelligence has been omnipresent nowadays. Amongst all, generative design tools hold great potential, but they rarely reach full utilization, especially for inexperienced users. In response to these difficulties, our team aims to develop a solution for users without a design background to gain quick proficiency in the tool. Therefore, we propose:

​

How might we develop an accessible user-centric AI design tool for users without a professional design background to accelerate their design process?

 

​

Interview

The interviews helped us develop insights to explain possible motivations, pain points, goals, and desires around designing. The data were then transferred into the creation of personas and much more.

​

Questions:

  1. If you want to design, such as posters, or icons, what might be your approach to the solution?

  2. What do you think is challenging in the process of design? 

  3. What are your priorities when you are designing? (What is important to you?)

    • Why? 

  4. Have you ever used AI or automation tools for design tasks before?  Yes - 4 / No - 5

    • If so, can you describe your experience with design tools or software in general?

  5. Through your process, Where do you think AI could enhance this process?

    • What types of AI-powered features or functionalities would be most helpful in your design work?

  6. Are there any specific design software or tools you currently use or prefer? What features do you like about them? 

    • If not, what types of AI-powered features or functionalities would be most helpful in your design work?

  7. If you are new to a design tool, what would make it more intuitive for you?

    • Any preferences for the interface and overall experience?

  8. Are there any concerns or limitations you would have in integrating AI into your design workflow?

  9. Can you share any additional thoughts or suggestions that you believe would be valuable for us to consider?

 

Findings:

  • Ideation is usually the most important and difficult part of the design process

  • Struggles with feature discovery and complex functionalities that result in a time-consuming onboarding process.

  • Pain points in fixing a tiny portion of the design solution without changing the rest, lack of flexibility. 

  • Desires for various functionalities to meet different users' needs. 

  • Frustrations with repeatedly typing in similar input for a similar type of design. 

​

Personas

Personas act as representations of the target users. The two personas below are created based on user interviews and reasonable assumptions. Components of the personas include characteristics, goals, desires, pain points, and matching scenarios.

 

What I learned:

  • Personas are valuable to help bring everyday user needs and desires forward before starting designs

  • Personas guide team members with a common understanding of target users' goals, desires, and pain points surrounding design topic

  • Personas are realistic summarized representations that can act as references during the design process 

Problem

Design & Prototypes

Design Requirements

Based on our previous research, we have come up with a list of design requirements: ​​

​

  1. Multiple possible solutions based on users’ needs

  2. Customization and flexibility, allow users to choose

  3. Auto predictions and completion

  4. Real-time collaboration, allows multiple users to work together

  5. Simple instructions for users to learn the functions 

  6. Real-time design suggestions & Ideations

  7. Possibilities for motion graphics design assistance: animation, video, etc.

Paper Prototype

Wireframes

Usability Testing & Heuristics Evaluation

Our team conducted Usability testing and heuristics evaluation using paper prototypes and wireframes and collected insightful findings to improve our high-fidelity prototype:

 ​

AutoSave - Visibility of System Status

​

Challenge Identified: A participant during our usability testing highlighted a lack of visibility regarding the Autosave feature's status. Despite Autosave being active, users were left in the dark without any visual confirmation of their work being automatically saved.

​

Solution Implemented: To bridge this gap, we introduced an "Autosave switch on" indicator at the upper left corner of the interface. This visual cue reassures users that their progress is securely saved as they work, aligning with the principle of Visibility of System Status by keeping users informed and at ease.

​

Version History - #3 User control and freedom

​

Challenge Identified: Feedback from our paper prototype testing sessions revealed a user need for more control over their interactions. The absence of undo and redo functions limited users' ability to easily revert to previous states, hindering their freedom to experiment and modify content confidently.

​

Solution Implemented: Addressing this, we added a version history section on the left side of the interface. This enhancement allows users to navigate and revert to previous versions effortlessly, significantly improving User Control and Freedom. Users can now explore and create with the assurance that they can backtrack and refine their work as needed.

​

Auto Answer - #6 Recognition rather than Recall

​

Challenge Identified: Initial usability tests underscored a significant cognitive burden placed on users by requiring manual entry of detailed information. This process not only slowed down user interaction but also contravened the heuristic of Recognition Rather Than Recall, as users struggled with remembering and inputting extensive details.

 

Solution Implemented: To alleviate this issue, we leveraged AI to suggest auto-generated answers based on user inputs, thereby reducing the reliance on memory and enhancing the efficiency of information collection. In the final prototype, users are presented with AI-suggested responses, enabling them to select relevant answers quickly and with greater ease. This adjustment streamlines the user experience by prioritizing recognition over recall, making the process more intuitive and user-friendly.

Style Guide

Style Guide.png

High-Fidelity Prototype

Reflection

Project Reflection

Design Solution & Reflection

​

As aspiring UX designers, mastering the art of teamwork and developing interaction designs collectively serves as a significant milestone. Throughout this semester, we have reached a notable achievement with our design solution, "Puzzle," for the AI-powered design generation tool. While recognizing that it may not yet be flawless, we remain committed to continuous learning and open discussions about potential enhancements in the future. This journey has not only honed our design skills but also underscored the importance of collaboration and iterative improvement in the field of UX design.

Challenge and Improvement

​

We faced several challenges, one of which was the need to establish a common understanding of basic design elements before initiating our final digital prototype. This process involved reaching a consensus on specifics like button size, margins, and layout details. Successfully navigating this hurdle enabled a smoother transition from low-fidelity to high-fidelity designs, thereby enhancing our efficiency and improving the overall quality of our work. The importance of this step lies in the fact that without established guidelines, we would have had to devote additional time to adjusting interface details. Establishing these design standards and habits is crucial not only for the current project but also for future UI development. Adhering to these guidelines helps in making our design process more flexible and effective.

Future Changes

​

Based on our A/B testing and usability testing, we plan to combine the warning icon and instruction. The combination of text and warning icons can enhance users' understanding and click-through rate, and automatic instruction can create a better user experience. Additionally, we decided to change some instruction words personified to help users understand and empathize better. In addition, we also add some detailed reactions and feedback (such as animation and scroll bar on the style page) to enhance the interaction between the AI system and users.

What I've Learned

This project almost contained every piece of the design process. Designing a product from zero is very challenging, especially on a topic of AI-based applications that I have never worked on. I need to research the capabilities and some practical uses of AI to understand what kinds of interactions we can implement. I could go beyond the current power of AI, but they need to be reasonable. This project has taught me not only my design skills but most importantly, the essence of teamwork. Learning how to handle relationships among teammates is as important as technical skills. I appreciate my team and this opportunity for this project. 

Design & Prototypes
Research & Ideation
Reflection
bottom of page