Skip to main content

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 clean and professional.

Commenting Tools: Team members could directly leave feedback, which helped in organizing ideas and improving the design efficiently.

Plugins and Resources: Plugins helped us quickly access additional assets like icons and sample content to speed up the design process.

How Figma supported a user-centered design:
Figma allowed us to focus heavily on user experience by giving us tools to visualize, test, and refine the interface based on how UUM students would interact with Book Swap. Its features made it easier to ensure that the final design was intuitive, consistent, and truly catered to student needs.




Comments

Popular posts from this blog

Meet the Team Behind the Book Swap System

WELCOME TO OUR BOOK SWAP SYSTEM 🕮 We’re a passionate team from Chill Penguin aiming to reduce textbook waste and promote sharing through our Book Swap System. What is Book Swap? Book Swap is a student-powered system where textbooks are exchanged instead of bought. It’s sustainable, budget-friendly, and community-driven! Follow us for updates, events, and book listings.

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...

Usability Testing Report

Usability Testing Report Book Swap System Initial Prototype For our initial prototype, we have created the interface for both primary task and subtask as stated below, and some extra features such as checkout with QR to pay. Primary task : To search and buy secondhand books. Subtask: Manage user profile. Add desired books to wish list. Seller can post an ad to sell books. Have chat session through WhatsApp Messenger. Also have checkout session in app-purchase. We design our prototype by following Schneiderman's 8 Golden Rules : Principle 1 : Strive for consistency   Maintain style of icon and the location of it in the navigation (settings, back, home, fav item) Principle 2 : Enable frequent users to use shortcuts User can use sort books by school, adding favorite books to the wish list and the page has WhatsApp button that lead to chat with seller to make a deal. Principle 3 : Offer informative feedback  Has sound effect whenever user click fav item. Also, “loading page” ...