Skip to main content

Posts

Our Clickable Prototype

  Part 3: Clickable Prototype - BookSwap We created a clickable prototype for BookSwap using Figma to bring our ideas to life and show how the app would actually look and work. This prototype covers the main user tasks and interaction flow that we planned earlier in our storyboard and conceptual design. Here's how we applied the design requirements for this stage: ● High Fidelity in LOOK We used soft tones like teal, purple, and white to give the app a clean, student-friendly feel. Fonts are kept simple and easy to read, with consistent use of spacing and layout across all screens. Our penguin mascot appears in several screens like the welcome, home, and profile pages to give the app a fun and memorable identity. All icons follow the same rounded, minimal style to match the overall theme. Main screens designed include: Welcome/Loading, Login, Home (Book List), Book Details, Favorites, Add Book, and Profile Settings. The visual design reflects how we want the final version of the ap...
Post a Comment
Read more
Recent posts

8 Minutes, 8 Ideas: Our Crazy 8’s Design Sprint

  When it comes to ideation, speed can spark creativity , and that’s exactly what Crazy 8’s is all about. Each of us grabbed a piece of paper, folded it into eight sections, set a timer, and sketched eight different UI ideas in just eight minutes. No overthinking, no erasing, just rapid-fire creativity! The goal? To diverge quickly , explore multiple ways to meet our user needs, and let go of the pressure to be perfect. Gallery of Our Ideas Dalila's design is a thoughtful, step-by-step journey through the BookSwap user experience. Her sketches focus on usability , clear navigation , and practical features tailored to student needs. Highlight ideas : 1. Login and register page 2. Homepage 3. Search books page 4. Add to Cart page 5. Real-time WhatsApp Messaging 6. Maps integration 7. Successfully Bought  Wija’s design brings a touch of personality and playfulness to the BookSwap experience, all while keeping user flow and clarity front and center. Highlight ideas : 1. Pers...
Post a Comment
Read more

Design Takes Shape: Our First Application Wireframes

After all the Lego builds, sketch sprints, and intense brainstorming sessions — we finally brought our ideas to (digital) life! Meet our first-ever wireframes: the early blueprint of the BookSwap app that transforms student needs into scrollable screens. These wireframes were born from the voted Crazy 8's sketches , carefully chosen for their functionality, clarity, and student-first vibe. Each screen was designed using Figma , and trust us — nothing beats seeing our napkin-sketch dreams glow up into real interfaces. References : https://www.figma.com/design/whXwmRVfEmlVzPHperbC3x/Wireframes-Chill-Penguin?node-id=0-1&t=clv6HY6PMTJCYoYu-1
Post a Comment
Read more

Sketch to Structure: The Voted Designs That Shaped Our App

  This is the winning combo from our Crazy 8’s brainstorm – where fast sketches met brilliant ideas and turned into the blueprint of our app!
Post a Comment
Read more

From Bricks to Blueprint: Key Outcomes from Our LSP Session

  After a whirlwind of bricks, brainstorming, and moments, we proudly present the final Lego models that captured the heart of our design direction. What started as a playful exercise turned into a solid foundation for our user-centered solution. This is the Finalised Lego Model for User Needs This model shows: The challenges our users face (symbolized by obstacles and barriers). Their goals and motivations (represented by upward paths or light elements). Emotional states like frustration, curiosity, and relief, all visualized in creative Lego form. This is the Finalised Lego Model for Features & Functions This build represents the core features we identified: Clear navigation paths Personalized tools Real-time feedback loops Support systems for guidance This is the Video Showing the Full Lego Experience Watch how it all comes together: Users and their needs Features designed to meet those needs Connections built to show how everything works in ...
Post a Comment
Read more

Building Ideas Brick by Brick: Our Lego Serious Play Session

   Lego Serious Play (LSP) Purpose :  Who said ideation had to be boring? With Lego Serious Play (LSP) , we swapped whiteboards for bricks and brainstorms for build-storms! LSP helped us physically build our understanding of users and features, turning complex ideas into playful, colorful models. It wasn’t just fun (though it definitely was!). It was strategic, collaborative, and surprisingly insightful. Evidence and Diagram of Each Models :  User Need Models :  We began by building models to represent different types of users and the challenges they face . Whether it was a frustrated user stuck in a maze of features, or a user craving simplicity and speed, our Lego creations captured real human emotions and experiences. Functions/Features Models : T ranslating those needs into features and functions . Each Lego model became a physical metaphor for a tool or function the app needed. Connection Models :  Then came the magic moment: connecting it all togeth...
Post a Comment
Read more

Tools will be used ~

  The tools that will be used... 1. Figma For this project, Chill Penguins developed a platform called Book Swap for UUM students, and we used Figma as our main design tool. Figma was chosen because it is practical, user-friendly, and powerful enough to support a full UX design process from wireframing to prototyping. Since it is cloud-based, it allowed our team to work efficiently without facing issues like version conflicts or access limitations. One of Figma’s major strengths is its real-time collaboration feature. It enabled all team members to edit, organize, and review the design together, which made the development of Book Swap more streamlined and cohesive. Key features we used: Interactive Prototyping: We built clickable prototypes to simulate the user journey across the Book Swap platform, making it easier to test and refine navigation flows. Component System: We created consistent design elements like buttons, navigation bars, and forms to ensure the user interface was c...
Post a Comment
Read more