[PRODUCT pt 1] Conceptual & Logical Design
.png)
Conceptual Design
.png)
In the conceptual design phase, we aimed to envision how our redesigned bus booking app would address the challenges faced by our user persona, Tom Harris. Guided by his specific needs as outlined in the user persona and scenario, we focused on three key user goals:
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.
For each user goal, we developed a storyboard that demonstrates how Tom interacts with the app to accomplish the task in an accessible and efficient manner. Each storyboard highlights how our design solutions, such as voice commands, large buttons, and streamlined workflows, alleviate the pain points faced by users with limited motor skills.
Video link:
Logical Design
Crazy 8 Method Sketching
To develop initial ideas for our bus booking app interface, each group member participated in a Crazy 8 method sketching, where we generated multiple design concepts in a short time frame. This method encouraged creativity and rapid exploration of interface designs that addressed Tom Harris’s accessibility needs.
Here are the sketches produced during this activity:
1)
2)
3)
4) Selected design
Finalized Wireframes
Based on the Crazy 8 method sketches, we voted as a group to select the most effective and user-friendly design elements which is design No.4. These elements were then refined and incorporated into the wireframes using Figma.
__________________________________________________________________________________
Background of the App Name: “Book MyBus”
The name Book MyBus was thoughtfully chosen to represent the essence of our accessible bus booking application: providing a straightforward and user-friendly platform for reserving bus tickets. The word “Book” highlights the app’s primary function, while “MyBus” personalizes the experience, making it feel tailored to each user’s journey.
Book MyBus embodies our vision of creating an inclusive solution for users like Tom Harris, who face challenges with traditional booking systems due to limited motor skills. The name is simple, direct, and easy to remember, ensuring users immediately understand its purpose. It reflects our commitment to designing an app that prioritizes accessibility, efficiency, and ease of use for all travelers.
Incorporating Design Requirements into Wireframes
Our wireframes for the accessible bus booking app were designed to align closely with the needs of our user persona, Tom Harris. These designs incorporate accessibility features, simplified navigation, and personalization options to ensure an intuitive user experience.
m needs minimal physical strain and interaction precision due to arthritis.
Ø Incorporation:
Ø Requirement: To
² Large
buttons and text in wireframes ensure easy tapping without
requiring fine motor skills.
² Voice-to-text
integration in key tasks (e.g., searching trips and
entering payment details).
² All
screens in the wireframe display consistent, clear layouts to reduce cognitive
load.
2. Simplified Navigation:
Ø Requirement:
Tom
prefers minimal interaction steps for tasks like searching and booking tickets.
Ø Incorporation:
² Streamlined
Search and Selection: The wireframes allow Tom to use the
voice-to-text feature to search for buses by destination and time on a single
screen. Search results are displayed clearly with large, accessible buttons for
easy selection.
² Separated
but Simple Payment Process: After selecting a bus, Tom is
directed to a payment screen with a minimal layout, large text fields, and
support for voice input to reduce effort.
² Clear
Navigation Flow: Each screen has clear “Cancel” and “Confirm”
buttons to avoid confusion, ensuring Tom can move through the process without
unnecessary steps or navigation complexity.
3. Customization for User
Needs:
Ø Requirement:
Tom
benefits from personalized interfaces due to his accessibility needs.
Ø Incorporation:
² An
Accessibility Setup Wizard is included in the wireframe’s onboarding
process to adjust contrast, or input methods (voice vs. touch).
² Adaptive
UI
features like gesture-free scrolling or auto-saved trip suggestions for
recurring routes.
4. Confirmation and Error
Reduction:
Ø Requirement:
Tom needs confirmation and minimal chance of errors.
Ø Incorporation:
² Clear
confirmation pages in the wireframes after booking, with an
option to review details.
² Error-proof
payment input, with voice-enabled forms and large input
fields.
__________________________________________________________________________________
Interaction Metaphors and Justification
1. "Voice
Assistant" Metaphor
Justification: Aligns
with Tom’s existing familiarity with voice-to-text and reduces reliance on
precise touch gestures. The metaphor of a virtual assistant mirrors real-life
interactions, making the app intuitive and user-friendly.
2. "Digital
Wallet" Metaphor
Justification: Payment
interactions are simplified with a wallet-like interface, where saved payment
methods or discounts are easily accessed, mimicking a physical wallet’s
organization. This reduces cognitive strain during the payment process.
3. “Simple Booking
System” Metaphor
Justification: Mimics a
real-world ticket counter experience where users sequentially select their
trip, confirm their preferences, and pay. The wireframes reflect this through
simple, step-by-step screens, making the process familiar and stress-free.
Justification for
Suitability
These metaphors focus on
reducing physical strain and ensuring intuitive, user-friendly interactions.
They simplify complex tasks like trip planning and payment, addressing Tom’s
accessibility needs and fostering a smooth, confident user experience.
.png)
Comments
Post a Comment