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

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

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