Design Lab 10-Hour Design Challenge
Design a responsive website landing page for a travel website in a 10-hour time window.
Design the homepage that users will see when they first find the travel website "Wayfarer". It needs to show featured destinations, explain briefly the company's mission, and include a call-to-action to sign up for the newsletter. While coordinating the design with the landing page, create 3 sample screens for an iOS or Android mobile smartphone app. This app aims to give travelers a way of accessing information about destinations while they’re on the move.
1. Sketches
Low-fidelity sketches created the framework of the design expediting the process of a digitized solution.
To begin designing the website, I created several sketches for both desktop and mobile layouts. Specifically, I made four sketches for the landing page and three sketches for each mobile screen. These sketches helped me determine which key elements I wanted to include in the final product. I then compiled this information into a Home v.1 Landing page, as well as designated mobile screens.
2. Mood Board
Compiling an assortment of existing travel website examples created a baseline of source material to aid in the development of a digitized solution.
I picked examples of travel websites via collaborators from Dribbble. This allowed me to identify the overall theme and atmosphere I wanted the site/app to convey, as well as best UX/UI practices in digitizing the solution.
3. Color Style Sets
Establishing a range of colors to communicate the brand of the "Wayfarer" travel website expedited design decisions for a digitized solution.
I began to identify the colors that would best convey the desired atmosphere. As a best practice I like to work with off-black and off-white to establish a theme of subtlety and sophistication. In highlighting which design assessment photos, I wanted to utilize, finding a color gradient that meshed well with the photos, and enhanced the site/app’s aesthetic led to me choosing a deep forest green to compliment the colors of off-white and off-black.
4. Font Styles
Distinguishing the typeface for the desktop and mobile sites allowed for a clear communication of the brand'sidentity.
The goal was to create a font style that is both visually appealing, and easy to read. I went with a geometric class type font to promote symmetry within the design, and to add to the atmosphere of minimalism and sophistication. I chose to display the font styles for both the desktop and mobile versions of the site, to express clarity, and proof of concept.
Digitized Solution
Wayfarer Travel Website
Conclusion - Lessons Learned
What the process taught me, things I'd do differently
Being my first timed design challenge much was learned as I was pushed to deliver a quality product within a deadline. I'd like to share what the process has taught me, as well as things I would augment within my design process.
1. Micro-adjustments subtly lead to profound iteration in UI - In this design challenge, I learned how important subtlety is in developing a design that is polished and meets industry standards. It is often micro-adjustments in the presentation of UI elements that create the desired effect of a polished and professional aesthetic.
2. Mood boards can set the stage and provide direction in digitized solutions - In this design challenge, I began implementing Mood Boards as a way of providing direction and expediting design decisions. I learned that by leaning on the work of other designers in the UI/UX field, I was able to find clarity in creating designs that were both distinct yet in line with an aesthetic norm. If I could change anything in my process, I would have started creating Mood Boards earlier in my study of UI/UX design.
3. Color and font are invaluable tools in conveying an app/website's identity - In this design challenge, I learned the power of color and font in conveying the brand identity of a product. The tactful implementation of color and font can communicate elements of a brand that are concise yet subtly expressive. I learned the various tools to identify color gradients, and utilize the optimal blend of colors to create UI Designs that "pop".