Coastal Nomad App & Landing Page
Coastal Nomad is a travel social network platform developed for travelers by travelers where travelers can follow other travelers, chat, share photos and find common interests.
Service
UI/UX Design & Web
Client
Miscellaneous/ Personal Project
GOAL
My ultimate goal was to create a new type of social media app for travelers to share their travels. These connections could turn into friendships with travelers from around the world. I wanted to create a predictable, simple and beautiful interaction app.
ANIMATED PROTOTYPE
After the visual mockups were created and complete I animated the prototype in the Principle app.
RESEARCH & INSPIRATION
I conducted research focused on different types of social media platforms and sites, such as Instagram, and Flipboard, where I also explored inspiration for the UI and navigation.
USER PERSONA
In order to solve a real user problem, you need to have a clear problem statement in mind; in order to write this problem statement, you first need to understand your users and their needs. I created a user persona detailing what this user in this particular scenario needs..
USER FLOW
To lay out content and functionality I created wireframes and a user flow which takes into account the user needs and user journeys. I created a user flow chart to begin determining screen to screen user interactions.
WIREFRAMING
After considering features involved and overall functionality, I created to high-fidelity wireframes work out the UX of the platform along with the components like navigation, toolbars, and user profiles.
BRANDING
COLORS
TYPOGRAPHY
LOGO FORMATION
LOGO
THE SOLUTION
The final solution for Coastal Nomad is an app for strictly for travelers to connect with other like-minded travelers, share their stories, and photos online.
LANDING PAGE
NAVIGATION
Here are the 4 main sections within the app. These can be accessed using the main navigation bar displayed at the bottom of the screen. The are 4 icons displayed.
TIMELINE
On the left is the navigation bar icon for the home screen (timeline). This provides access to the main feed of posts posted by people you follow. Posts are shown in chronological order. You can like and comment. Hashtag symbols(#) are generally shown in the caption of a post.
ICONS
Like Icon:
Comment Icon:
Upload Icon:
The Upload Icon in the right hand corner near the navigation bar takes you to a section where you can create a post.
The Explore Page has 3 different categories including (Following, Trending & Videos).
FOLLOWING: Which adventure travel activities you follow.
TRENDING: Adventure activities that are currently trending on the app.
VIDEOS: Videos that are on the app.
FOLLOWING PAGE: Specific activity that you follow (for example Scuba Diving). On this page, it shows posts that travelers share. You can like, comment and find other travelers to follow from the common interest you share. You can access this from the main Explore Page by clicking on activity.
EXPLORE PAGE
Coastal Nomad offers the option to search for profiles, browse photos and videos. The Search Icon (leads to the search page). Searches are quite flexible in the matches that they come up with. You can narrow your search by clicking on the 4 categories listed: ALL, PROFILES, PHOTOS, VIDEOS.
SEARCH & BROWSE
The bell icon in the main navigation bar takes you to the NOTIFICATIONS screen where it lists recent likes, comments and follows on your account.
NOTIFICATIONS
The message icon on the main navigation bar takes you to the INBOX screen where it lists recent messages, unread messages and favorites. Tapping this message icon will bring you to your inbox. You can access it anytime you want to view or reply to messages.
The 3 categories in the top bar are
-INBOX ( new messages and messages you've already read )
-UNREAD ( messages you haven't read yet )
-FAVORITES ( messages you've favorited )
To send a message you will notice the plus icon in at the very right corner of the screen.
INBOX
Access to the navigation side bar can be found by selecting the hamburger menu in the top left hand corner.
On the navigation side bar there are 4 links:
-PROFILE ( Goes directly to your profile )
-BOOKMARKS ( Has posts that you have bookmarked for later )
-SETTINGS ( You can access your settings from here: privacy, edit profile, etc. )
-LOGOUT ( Logout of your account )
You can exit out of the navigation by pressing the X (close button) in the top left hand corner.
NAVIGATION OVERLAY
The navigation side bar takes you right to the PROFILE screen.
The PROFILE screen shows your total number of posts, followers and accounts you are following. You can edit your profile by going to settings on the navigation side bar.
Below this information this information an overview of your gallery is shown as grid by default. This grid consists of square thumbnails of your images displayed in a grid that is 2 columns wide.
This has an advantage of allowing you to consider the look of your gallery when posting images.
When people discover your profile they will see your profile photo and gallery.
PROFILE SCREEN
