[PRODUCT pt 2] Prototyping [Final Clickable Prototype]
.png)
Prototyping
Introduction
We transformed our design ideas from the conceptual design stage into a high-fidelity clickable prototype using Figma. This prototype serves as a critical step toward realizing our accessible bus booking app. Designed specifically for our target persona, Tom Harris, the prototype reflects both aesthetic appeal and functional accessibility, providing an intuitive experience for users.
This post will walk you through the prototyping process, the design choices we made, and how we incorporated HCI design principles to ensure usability and accessibility. You can explore the final version of our prototype here:
Prototyping Process
Step 1: Translating Conceptual Design
We started by reviewing the sketches and wireframes from our Crazy 8 brainstorming session and conceptual design activity. Using these as a foundation, we built the visual layout of the app screens in Figma. Each screen was carefully crafted to reflect our intended design, ensuring consistency and alignment with the user persona's needs. Feedback from the wireframe evaluation phase helped us refine the visual hierarchy and ensure accessibility across all screens.
Step 2: Element Specifications
Key elements, such as buttons, input fields, icons, and navigation menus, were designed to be intuitive and accessible. We chose a clean and minimalist layout to make the app easy to use for our target persona, Tom Harris, a 55-year-old accountant with arthritis.
- Buttons: Large, easily tappable buttons to accommodate limited motor skills.
- Fonts: Sans-serif fonts for readability, with adequate size and spacing.
- Colors: High-contrast color scheme to enhance visibility.
- Icons: Clear, universally understood icons for navigation.
The clickable prototype was designed to simulate real interactions, enabling users to navigate the app and perform the three predefined tasks:
1. Log in using voice commands for keyboard shortcuts.
2. Select the bill to pay using large, easy-to-click buttons.
3. Confirm payment with minimal navigation.
Each task was mapped out as a complete interaction flow to ensure seamless user experience.
Step 4: Content Specifications
The prototype includes placeholder content, such as bus schedules, seat availability, and payment details, to provide a realistic testing environment. All text was written clearly and concisely, following established HCI guidelines.
______________________________________________
Design Principles
We adhered to Nielsen’s Heuristics and Shneiderman’s 8 Golden Rules during the prototyping process to enhance usability:
Consistency and Standards: Uniform design elements across screens ensure users can easily recognize and use app features.
Visibility of System Status: Progress indicators for booking and payment steps provide feedback at each stage.
Error Prevention: Confirmation dialogs appear before critical actions, such as seat booking.
Flexibility and Efficiency: Shortcut options, such as saved routes or payment methods, make frequent actions quicker and easier.
These principles guided us in designing a prototype that is both functional and accessible, meeting the unique needs of our target persona.
Our prototype is:
- High-Fidelity in Look: Includes final color schemes, fonts, icons, and layouts.
- Medium-Fidelity in Feel: Clickable, with functional navigation for testing purposes.
- Medium-Fidelity in Breadth: Covers the complete interaction flow for the three tasks.
Features such as large touch-friendly buttons, high-contrast visuals, and simple navigation ensure our prototype remains accessible to users with limited motor skills. The prototype is compatible with both desktop and mobile devices, ensuring accessibility for all users.
______________________________________________
Screenshots of the prototype (with example process)
- You can explore the final version of our prototype here:
Next Steps
With our prototype completed, we are now preparing for Usability Testing, where we will test the prototype with users similar to our persona. Feedback from these sessions will help us refine and finalize the design, ensuring the app meets the highest usability standards.
Stay tuned for updates on our usability testing process and results!
.png)
Comments
Post a Comment