About the Project
Participated in my first Hackathon where my team won 2nd place with the prompt Digital Equality and Accessibility. Please enjoy the short and sweet rendition of the project process!
Role: UX Design
Duration: 5 days (UX and Dev deliverables)
Team: 5 UX designers and 4 Developers
Research & Strategy
Competitive Research
We looked into many other possible direct and indirect competitors for pain points, features, accessibility availability, and user flow layouts.
Interviews on and off land
We did interviews of target users on and off land by taking advantage of one team member who was on a cruise during the hackathon.
Usability testing was done on an existing cruise app by the team member to get even more insight into pain points and thinking processes of people who would use these types of apps.
"I change the fonts because as I get older I adjust the font sizing like on my Kindle for reading because it gets harder to read. "
"I usually say no to notifications because it’s too much clutter....."
Insights:
Clear language
Clear navigation
Confirmation of accessibility
Transparency of accessibility
Multi-option accessibility
Control over notifications
Wheelchair accessible / mobility constraints routes
Allergy / diet considerations
Control over app accessibility options
Constant collaboration and reiterations with Development teammates
1st handoff - user flow /user case
After looking at competitive research and usability testing on existing apps we were able to come up with a solution for the flow of the mobile app quickly for the Dev team to get started sooner on the backend and connecting screens.
2nd handoff - sketch to low fi
Looking over accessibility issues that could arise we noticed that cognitive accessibility like memory and learning curve were not taken into account. We amended this by having the basic interactions and information architecture to be mirrored to lessen the cognitive learning curve.
3rd handoff - hi fi with notes
We made notes about interactions for low and hi-fi. During the last handoff, we also made separate cards and components (these would be buttons and anything with illustrations and any effects like shadowing) to make it faster for Dev team to implement.
Design
The why
The "Lato" font was chosen for our cruise app design targeting elderly users due to its exceptional legibility, readability at various sizes, user-friendly experience, familiarity, and inclusive design.
Color palettes chosen not only prioritize readability, contrast, and accessibility, but also align with the desired overall theme, mood, or brand aesthetic.
Cards were created based on modern design trends while keeping a clutter-free layout for accessibility to keep things consistent, efficient, and scalable.
By reusing these elements, we saved valuable time and effort while ensuring a smooth user experience. Using the same components across different screens, the app looked and felt cohesive, which made it more user-friendly. This approach was a smart way to work efficiently, launch faster, and keep the design looking sharp.
Accessibility at your fingertips
Fast response and step-by-step guidance are important especially for elderly users, as it aligns with accessibility principles by providing timely assistance and clear instructions, enabling an inclusive and user-friendly experience for individuals with diverse needs and abilities.
Adding features like "bigger text," "contrast," "zoom in," "saturation," "voice assist," "mobility resources," and "closed captions" are important for accessibility because they cater to the diverse needs of individuals with disabilities.
While we incorporated a range of commonly recognized accessibility features into the app to enhance usability for all users. We also wanted to take the opportunity to address specific mobility considerations relevant to the app's context, we went the extra mile by including a unique feature, called 'Mobility Resources', which is typically not found in similar apps.
Prototyping
Hi-Fi Wireframes of one flow
Prototype going through a couple of flows
SailEase video mockup.mp4Testing
Validation of design
User Testing - 3 users 1 round
Had them go through the prototyped flows while talking out loud
and asking them follow-up questions.
Key learnings:
We listened to user feedback after conducting usability testing and made some small changes to our project. To ensure that the 'I need special assistant' section stands out and doesn't get lost within the other content, we have redesigned the layout for the second screen.
Validation:
“The navigation was super easy, and I really enjoyed the bright and energetic colors. It made using the cruise app so much fun!”
Next Steps
Next Steps
Create an interactive onboard map to guide users from point A to B
With location share with party members
With wheelchair-safe routes
Include additional pages for Accessibility Assistance on Excursions
Upload Virtual tour for rooms, dining places
Concise onboarding
Flush out profile and options for notifications (notification inbox, off/on categories, and how notifications are received)