UI/UX Design Intern at The Odyssey
duration
November 2024- Present
Role
UI/UX Design Intern
objective
The Odyssey is a start-up company that focuses on creating a mobile app that enhances the experience of exploring new locations as a traveler. The user will complete fun activities alone or as a group at the location and earn virtual satisfaction points.
design system
color system
Image 1. This is the set of the main colors that The Odyssey will be using for the app complete with its primary, secondary, and tertiary colors. My involvement was creating the secondary and tertiary colors that would compliment the primary colors and including the hex, RGB, and CMYK codes of each color.
modals
Image 2. This the modal or pop-up notification that lets users know something has gone wrong and needs to be revised. At the top left is the image of the modal in dark mode for users with light sensitivity. The X is a close out button that the user can press to get rid of the modal. The circle with an X over it is to represent a place holder image for the modal. At the time, the image or images have not yet been selected to put in place. Below the place holder image is the title of the modal and the description as to why the user is seeing the modal. FInally below the description are two action buttons that the user can take action on. These buttons can be optional depending on the user flow of the app. Below the single modal are two columns of other modals showing the light view (left) and dark view (right). Both are representing the active and inactive action buttons as shown by their filled colors.
cards
Image 3. This is an image of a card in dark mode for users with light sensitivity. The card is made to help users get as much information as they can at a glance for each location that they visit. Below is a description in detail of the six components that make up the card.
Image 4. This is the expanded view of Image 3. It shows at the top left the card in light mode and right below is the same card shown in dark mode for users with light sensitivity with the description of what each component does. On the left is a column of the same card shown 5 times. It is to represent the selection of the components by showing the different colors to express that they have been either selected, unselected, or active.