Our passionate team is crafting an extraordinary and timeless destination brand, orchestrating a global marketing campaign, and building captivating websites and apps to bring it to life.
Contribution
Created UI pages 14+
Stakeholder presentation
Design system and component library maintenance 35+ components
Design QA
Team
12 Designers30 + Developers2 Researchers 4 Business Analysts
Role
Designer
Tool
Figma
Storybook
AEM
Date
03.2023-Now
.png)
Overview
We are assisting an important client in creating a website and app for regional tourism. Our services encompass brand reconstruction, marketing strategy, website design, website development, and more. Specifically, website design includes UI pages for user registration, ordering, various attraction introductions, and etc. We are also helping the client create a design system and component library, deploying it to AEM (Adobe Experience Manager), and assisting the client in using AEM to create a website.
.png)
Design system & Component library
Keep consistency of design
35+ component; 14+ pages
Figma libraries
Figma symbols and variants
Auto layout
Responsive design: Desktop 1440px, Desktop 1024px, Tablet 768px, Mobile 378px
Documentation: spacing, character limits, interaction, variation, maximum and minimum
Language: English, German, Arabic
Process
Reviewed UI pages
Merged similar components
Refined the UI flow
Presented to stakeholders
Gathered feedback and iterate
Handed over to developers
Conducted design QA in storybook and AEM
Showed demo to the client
Benefits
Keep consistency
Raise up edge user cases like errors
Meet accessibility (WCAG, key navigation, colour blind)
Enhance original design
Design thinking
Use Law of UX to enhance design
Hick’s law - The time it takes to make a decision increase with the number of choices
Reduced levels of menus
Miller’s law - Humans can hold about 7 options in their working memory
Limited the number of items in a list or menu to about 7 options
Fitts’s Law - The time required to move to a target area is a function of distance to the target and the size of the target
Check sizes of element
F-pattern and Z-pattern reading
Adjusted the position of buttons and text
......
Reduced levels of menus to reduce the cognitive load of users.
Design exploration
AI itinerary for senior travellers
Assisting elderly travellers, including those with vision impairments, in creating safe and budget-conscious travel itineraries
Market gap
Senior travellers are facing challenges
88% Of respondents travelled since having retired. There is a huge number of them (one-quarter of seniors) who still prefer to travel abroad during their holidays.
44% prefer to organize their travel individually.
Financial reasons and health problems are the main barriers to travel for seniorsSafety, nature, historical sites, quality of services, and easy transportation connections are the top five attraction factors for seniors when choosing a destination. Doing sports, snow, making handicrafts, dancing, and camping are the top five non-attraction factors.
.
Persona
Maria, a 68-year-old woman
Retired, love travelling, limited tech-savviness, presbyopia. At the same time, she has attention deficit disorder(ADD), easily overwhelmed by complex interfaces. Also, she wants to keep her budget under control as the cost of living rises but still want to travel all iconic spots. Living alone as her daughter working overseas. She also prioritizes safety during travel.
“ There are so many pages for attractions; I'm not sure where to begin. And, honestly, it's frustrating because the text and hotel details are overwhelming. I'm struggling to figure out how to calculate travel time and understand the transportation methods.
Planning an itinerary feels like such a hassle, and to make matters worse, I have presbyopia, making it even more challenging to see everything clearly on my mobile.
I'm genuinely worried about ending up spending too much money and not having a well-thought-out plan."
Challenge 1
How can we assist Maria in swiftly collecting useful information from numerous pages and crafting an itinerary plan?
Why do we choose AI to help create itinerary
Personalization
AI tailors travel recommendations to individual needs and preferences, ensuring a more enjoyable trip.
Safety
AI assists seniors in making safer choices by providing safety ratings, and real-time safety alerts.
Accessibility
Emphasize how AI addresses the needs of seniors with vision impairments, offering text-to-speech function and adjustable fonts etc.
Budger control
AI helps manage budgets, preventing overspending and ensuring cost-effective travel for seniors.
Benchmarking
.png)
Upon analysing the competitors of AI Itinerary, I observed that most of them enable users to choose a destination and date, check attractions, and view reviews. However, I found that only one of them allows users to modify attractions, select interests, display transportation options, and show travel times. At the same time, they also present a substantial amount of text, creating a storytelling-like appearance. However, this might pose a challenge for users with vision impairment.
So, we're confronted with another challenge.
Challenge 2
How do we integrate AI Itinerary with a more immersive and accessible approach?
I've come up with an idea to leverage an AI assistant and AI-edited videos of attractions. This would enable us to offer users a personalized itinerary with progressive disclosure, allowing them to edit attractions and transportation details. Additionally, we can provide a price estimation for their customized itinerary.With the AI assistant, users can select their profile and interests, listen to a voice or video introduction, and easily navigate back to the last attraction. The AI will also gather information on prices and travel times, also making the itinerary simple to edit.
Next Steps
- Make the layout and font size more accessible. Offer options to adjust font size and type.
- Add human assistance choice across the flow, and provide choice to quit and resume.
- Add progress indicator
- Address possible health problems like dehydration, infections, heatstroke, food and water safety
- Provide design for traffic connections and tips.
Takeaways
- Improved communication with stakeholders , tailored ways of communication with developers, BAs , designers and clients.
- Improved articulating design decisions.
- Increased ownership with products.