Wonderland

UI/UX Designer | Front End Developer
Jan. 2024 - Apr. 2024

PROJECT OVERVIEW

Wonderland is an innovative app crafted to explore users’ mental well-being interactively. Inspired by “Alice in Wonderland,” it evaluates burnout levels through a playful quiz. By incorporating elements from the classic story, we guide users on a self-reflective journey into their mental health.

Group Members

Wonderland is designed and developed by Jillian Gonzales and Congling Wang.

Initial Design

Our initial design was created using Figma, with hand-drawn graphics using Procreate and Adobe Illustrator.

Usability Test Report

We conducted a usability study to assess user navigation, satisfaction, and overall effectiveness in stress relief.

Wonderland-A6-Usability Report by Celine Meow

Changes After Usability Test

Feedback revealed users struggled with too much descriptive text and unclear navigation. We improved accessibility by simplifying content and enhancing the quiz interface.

Final Design

After refining our content, addressing minor wording issues, and polishing our prototypes, we finalized the flow design of our app on Figma.

Development Process

Built with Next.js, Wonderland integrates OpenAI API for chatbot features. The app also includes AI-generated calming music and a quiz-based navigation system.

Demo of our app

Style guide

We also coded a comprehensive style guide using HTML and CSS to maintain design consistency across the app.

Images Created

 Our graphics have been hand-drawn to maintain consistency and thoughtfulness in our visual and stylistic language across the app. Outlined in black with accents of our primary blue colour, each element is carefully crafted to again ensure a pleasant user journey. This approach not only enhances user experience but also aligns with our overarching goal of immersing users as if they are the main character of a fairytale book. Every detail is curated to evoke a sense of wonder and magic, inviting users to embark on an adventure to learn more about themselves within our app.