UI/UX Design
Branding
Mobile Development
Viaja is a mobile application designed to support safer travel for women travelling solo by allowing users to 'check in' their locations with family members and friends. Personalized profiles protect user privacy and location information, and enable the send/receipt of friend requests. Once connected in the app, friends can view each other's 'check-in' information on a social media feed.
User research was conducted through informal interviews and surveys to create two main user personas based on common pain points and goals. Because Viaja was not solely designed for travellers, but also their close friends and family, two archetypes were created: The Frequent Flyer and the Worried Parent.
A user flow diagram was created to display onboarding new users and 'checking in' -- the main functionality of the application. Because of this, I determined that 'checking in' should be available on the home screen, rather than having the location feed displayed. As shown in the figure below, once logged in, users must enable location services on their devices before viewing their current location on a map interface and 'checking in' with friends.
User flow deliverables served as blueprints to create low fidelity prototypes using Figma. The design was then tested with Maze to highlight navigation problems and inefficiency. Notably, test results indicated that users found it difficult to search for friends and add/remove friends. Design changes were implemented iteratively to reflect user feedback throughout the project.
Solo travel is often stressful & isolating. Viaja's branding reflects its mission to create a positive, personal user experience with playful typography and simple logo and graphics. The color palette is dynamic, with a range of hues to accommodate various UI components.
Efficency, scalability, and ease of use were key factors in selecting technologies for development. A three-tier architecture pattern was applied, separating the application into logical and physical layers, with React Native representing the presentation tier, Express.js and Node.js as the REST API, or logic tier, and Firestore as the backend database.
Development was split into sprints to convert the application requirements & user feedback into code. Additional requirements were also applied throughout the development stage. For instance, a custom map style was created on the Google Cloud console to highlight public transportation, hospitals, and attractions near the users’ active location.
don't be shy
