Jacqueline Garrett

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.mp4

Testing

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

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)