
Questify Web Application
A Comprehensive Case Study
UX/UI Design
Timeline: 5 months
Role: Lead Developer, UX/UI Designer, Researcher
Tools: Next.js, VSCode, Creative Cloud Suite, Google Suite
Description: Questify is an interactive quiz app that takes users on an adventure through British Columbia's nature, history, and urban landscapes. Explore the province's breathtaking wilderness, uncover its rich history, and test your knowledge of vibrant city life—all through engaging quests. Each challenge unlocks new facts, fun trivia, and rewards, making learning about BC an exciting journey.
View WebsitePrototypeStyle GuideProblem
Many British Columbians and visitors want to learn more about the province's nature, history, and urban landscapes, but there are limited engaging and interactive ways to do so. Traditional learning methods can be dull or inaccessible, and existing quiz apps often lack localized content specific to BC. Additionally, users need a fun, easy-to-use experience that keeps them engaged over time.
Site Map Visulization
The site map is included as a visual representation of Questify's initial structure, highlighting the navigation flow and organization of content. It helps illustrate the core challenge of designing a seamless user experience while ensuring clear category selection between BC's nature, history, and urban quizzes. By mapping out the app's structure, we identified potential navigation issues, such as users struggling to switch between quiz categories or access their progress easily.

Challenges
- Lack of Interactive Learning Experiences: Many people want to learn more about BC but struggle to find engaging ways to do so.
- Limited Awareness of BC's Diverse Aspects: While BC is known for its natural beauty, its urban culture and history are often overlooked.
- Trust and Accessibility: Building trust through design elements while maintaining simplicity for a non-intimidating experience.
- User Retention & Engagement: Keeping users interested and motivated to continue playing over time.



Solutions
- Gamified Learning Experience: Questify turns learning into a quest, rewarding users for completing challenges and progressing through different levels.
- Balanced Content Across Three Themes: The app ensures equal representation of BC's nature, history, and urban aspects to provide a well-rounded experience.
- User-Friendly Design & Engagement Features:Intuitive navigation, leaderboards, and achievements encourage users to return and explore more.



Research
Personas
- Persona 1: Emily (Young Professional, Single):A busy 28-year-old who enjoys quick, engaging ways to learn about BC in her free time.
- Persona 2: Mark (40, Dad with Kids): A father looking for fun, educational activities to share with his kids while exploring BC.
- Persona 3: Manny (Marketing Professional, In a Relationship):A 38-year-old who wants to stay informed about BC's history and urban development for work and social settings.

Usablity Report
- Navigation Issues: Some users found it difficult to switch between quiz categories.
- Clarity of Questions: A few quiz questions were too vague or unclear.
- Lack of Immediate Feedback : Users wanted explanations for incorrect answers.
- Engagement Features : Participants suggested more interactive elements like achievements and daily challenges.

Design Process
Color Palette
Typography
- Primary Font: Sora was chossen for the body text because of its modern, clean, and highly readable design. This font ensures that quiz questions and app instructions are easy to follow, providing a smooth reading experience across all devices.
- Secondary Font: Paytone One was selected for headings due to its bold, eye-catching style. It adds a sense of excitement and energy, making key sections of the app stand out while maintaining a friendly and engaging feel.
- Logo Font: The Zion font gives the Questify logo a unique and adventurous look. Its strong, distinctive lettering enhances the theme of exploration and discovery, making the logo memorable and reinforcing the app's identity.

Logo and Mascot
- Logo: The Questify logo features a yellow flag with the app name displayed on it, symbolizing adventure, discovery, and achievement. The flag represents the idea of completing quests and exploring new knowledge about BC's nature, history, and urban landscapes. The bold yet simple design ensures the logo is recognizable and inviting.
- Mascot: JayC is the friendly and quirky mascot of Questify, wearing an orange helmet that gives him a slightly derpy but endearing appearance. He embodies the spirit of exploration and curiosity, guiding users through their learning journey. His cute and approachable design makes the app feel fun and engaging, especially for users of all ages.


Icons
- Orange Icons: The orange icons were used in the side menu to represent the different sections of the app.
- Character Icons: These character icons represented each creator of the app.









Graphics
- Nature:Focuses on British Columbia's diverse ecosystems, wildlife, and natural landmarks. Includes quiz questions about forests, mountains, oceans, and provincial parks. Encourages users to learn about conservation efforts and outdoor activities.
- Urban: Highlights BC's cities, architecture, culture, and modern development. Covers topics such as landmarks, transportation, local businesses, and entertainment. Showcases the growth and diversity of urban life in the province.
- History: Explores BC's rich past, Indigenous heritage, and significant historical events. Includes quiz topics on explorers, early settlements, political milestones, and cultural traditions. Helps users understand the historical context that shaped British Columbia today.






Wireframes
- Low Fidelity (Top): A basic wireframe showcasing the initial layout and structure of Questify. It focused on navigation flow, screen placement, and key interactions without detailed design elements.
- High Fidelity (Bottom): A fully designed version of the app with final UI elements, colors, typography, and interactive components. This prototype closely resembles the finished product, allowing for refined usability testing and feedback.


Walkthrough Video
This walkthrough video provides an overview of Questify, showcasing how users navigate the app, select quiz categories, answer trivia questions, and track their progress. It highlights the app's interactive features and user-friendly design, offering a step-by-step look at how Questify makes learning about BC's nature, history, and urban landscapes engaging and fun.