User Personas
Stephen
30 y.o. • High salary rate
User story
As a businessman, I want to be able to quickly find the business lounge at any airport to save my precious time.
Job story
When I travel for work, I want to buy tickets online so I can do it in advance and not have to go to the box office.
Jenny
24 y.o. • Middle salary rate
User story
As a girl, I want to be able to get help carrying luggage, so I don't have to lift heavy things myself.
Job story
When I travel to unfamiliar airports, I want to navigate the gates quickly and easily, so I don't miss my flight.
Jeremy
18 y.o. • Low salary rate
User story
As a traveler, I want to be able to leave the airport in a rental car with friends, so I don't have to take a cab.
Job story
When I fly somewhere with a connection, I want to be able to stay in a hotel at the airport so I don't have to travel far away from it.
Alex
27 y.o. • Middle salary rate
User story
As a frequent traveler, I want to easily access airport maps on my phone so I can find my way to shops and restaurants.
Job story
When I have extended layovers, I want to find comfortable workspaces with good WiFi so I can be productive between flights.
ProfileCard Component Documentation
Implementation
The ProfileCard component is designed to display user personas with a consistent layout matching our branding. It supports multiple color themes and adapts text colors for readability.
Props
- name: User's name (required)
- age: User's age (optional)
- salary: Salary level - 'High', 'Middle', or 'Low' (optional)
- role: User's role/occupation (optional)
- userStory: User story text (optional)
- jobStory: Job story text (optional)
- backgroundColor: Card background color - 'white', 'yellow', 'green', or 'purple' (optional, defaults to 'white')
- imageUrl: URL for profile image (optional)
Color Mapping
- White: Default - white background with black text
- Yellow: accent-DEFAULT (#FFE135) with black text
- Green: primary-light (#93D789) with black text
- Purple: hq-purple-DEFAULT (#9281e8) with black text