Skip to main content

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 app to look.

● Medium Fidelity in FEEL

  • The prototype works smoothly on a desktop using mouse and keyboard, as required.
  • All clickable buttons and icons allow users to move between screens and simulate the app flow.
  • The WhatsApp button on the book detail page includes a sound effect to give feedback when clicked.
  • Although mobile gestures aren’t supported, the prototype still gives a clear experience of how users would interact with the real app.
  • The navigation bar is working across all key pages to create a consistent feel.


● Medium Fidelity in DEPTH

1. The prototype covers all main tasks and sub-tasks, including:

• Login and home screen

• Browsing books and viewing details

• Favoriting a book (simulated)

• Viewing the favorites page

• Adding a new book

• Filtering books based on school/faculty

• viewing the profile page


2. We recently added a filter feature to the home screen so users can find books based on their school/program this was inspired by the pain point in our empathy map.

3. Some features are simulated only: the favorite button is clickable, but it doesn't save to the favorites list dynamically.

4. The camera icon on the Add Book page is also a placeholder it shows where users would upload book photos in the real app.

5. These limitations are expected in Figma and are included just to show the design intent.


<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://embed.figma.com/design/SU33rN9c5NngVoXMbjrdLF/Prototype-BookSwap?node-id=102-47&embed-host=share" allowfullscreen></iframe>


This link below is our clickable prototype in Figma :

https://www.figma.com/design/SU33rN9c5NngVoXMbjrdLF/Prototype-BookSwap?node-id=102-47&t=epQjOCrxuEFdoPbk-1 

Comments

Post a Comment

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.
Post a Comment
Read more

What are the Problem Here?

 THE TEXTBOOK STRUGGLE IS REAL ! Buying textbooks every semester is one of the biggest headaches for students, not only are they expensive, but finding second-hand options often feels like searching for a needle in a haystack. While new students scramble to find affordable books, senior students are left with stacks of used textbooks they no longer need, with no easy way to pass them on. This mismatch creates a real gap: first-years face financial pressure, while seniors miss the chance to recoup some of their costs. Without a simple, centralized platform to connect the two, valuable books go unused, and students end up spending more than they need to. It’s an ongoing cycle of wasted money, time, and resources, and we think it’s time to change that.
Post a Comment
Read more

Inside a Student’s Mind: The Book Swap Experience

  EMPATHY MAP This image shows an empathy map for users of a book swap or second-hand textbook marketplace, likely for UUM students. An empathy map is a visualization tool used in design thinking to gain deeper insight into users by exploring different aspects of their experience. Core Components of the Empathy Map Central Focus The map places the user (represented by a silhouette) at the center, with six key sections radiating outward to capture different aspects of the user experience. THINK Section (Left, Light Green) Key thoughts : "Are the books in good condition?" "Can I trust this seller/buyer?" "Why buy new if I can get it cheaper second-hand?" "I want to save money on textbooks and still get good quality." This section captures the rational considerations and questions users have during the book swap process. DOES Section (Top, Light Blue) Key behaviors : "Sends messages to negotiate prices or ask about book condition....
Post a Comment
Read more