Mobile Webpage
Design Challenge
Design Challenge Submission:
The client presented me with the opportunity to show them an existing project within my portfolio, or create something new. I chose in this case to complete a new design for submission.
The Problem & Challenge: Help users discover the wonders of Sri Lanka, and find the best possible flights and accommodations.
Requirements and Restrictions: There was less than 2 weeks to complete the challenge. The very few restrictions included file specifications and some process documentation.
USER FLOW | 1 – About Sri Lanka
USER FLOW | 2 – Flights and Accommodations
USER FLOW | 3 – Destinations and Activities
THE SOLUTION AND PROCESS
I chose to design a mobile website for a travel company providing users with 3rd party airline flights and packages as well as activities and destination details. The tool would use third party API content to populate a travel itinerary planner. Advertisement containers were not yet explored in this design challenge but would perhaps serve as another source of revenue.
INSIGHTS AND PAINPOINTS
Originally, I planned on designing this as a product app giving users the ability to book flights within the product. I later realized this would be a much bigger endeavour requiring more time and research to make it viable. I also considered that users probably wouldn’t download an app that only served as a product featuring Sri Lanka alone.
Another challenge I had throughout the process was the absence of team members to share insights and also perform user questionnaires (within the time-frame). This was an individual design challenge where most decisions made were based on assumptions.
RESEARCH AND
INSPIRATION EXPLORATION
Searching for existing products and companies for solutions already known
to the general user for validity and inspiration.Exploring different web patterns for useful user-flows and content structure.
SKETCHES AND WIREFRAMES
The focus of this design exploration was on 3 primary user stories. About Sri Lanka (Home Page), search for trips, and discover destinations and activities. The wireframes above visualize the user stories searching Flights & Accommodations, and searching for Destinations & Activities.
USER INTERFACE LIBRARY | Style Guide
Branding components were explored to include a logo, typography, layout formatting, and colour palette. This design exploration would be expanded upon if creating a design system for a product. This content would be useful for a company that may be used as an agnostic platform source of truth. If can be helpful when scaling the product fully and across multiple platforms, as well as maintaining clients brand integrity.
HI-FIDELITY MOCKS AND PROTOTYPE | Figma
Created in Figma to determine a simple and easy to use user experience.
Visit the live Figma prototype here ––>.
Note: This is best viewed in desktop view due to mobile size limitations.
USER FLOW EXAMPLE | 1- Fights and Accommodation Card
This flow shows the visible flight details and how users select their journey.
Visit the live figma prototype here –>.
Note: This is best viewed in desktop view due to mobile size limitations.
DESKTOP EXPLORATION
The focus of this exploration is to show how the product might be scaled for desktop use.
