User Personas

In terms of Demographics, two key personas were supplied as part of the project.

The Everyman — an average person who wants to have a good sense of comfort and belonging, even in unfamiliar places. These users rely on Voyage Vista with the expectation of an app that provides an experience they can more easily navigate.

The Explorer — someone who gets the most out of what life has to offer while trying new things. These users rely on Voyage Vista to find good recommendations of touring spots, along with finding enjoyment in experimenting with things such as the app’s layout.

The ideal Voyage Vista layout would fit the needs of both these Groups and provide clear communication without causing overload, while relying on their input to complete a task.

Design Development

Mood Boards

The two moodboards in this project were each created to represent goals aimed towards serving the two key User Personas that represented the selected demographic archetypes. The first mood board held images that symbolized the joy that the Everyman would feel from booking vacations with Voyage Vista. The second moodboard held images that represented the Explorer’s innate desire to see the sights and attractions that a new location they book would have to offer.

The design choices and brand elements that applied to my goals came down to striving for what would maintain the pleasant experience that the app is designed for.

Typography

The main typeface that I’ve chosen was Oswald, due to its standard yet legible structure that compliments the friendly yet practical sense of desired brand design of Voyage Vista.

Overall, these choices are meant to represent universal concepts that the User can understand and “feel” when noticing the theming of Voyage Vista, alongside observing bright pictures of people in more mundane yet relaxing scenarios inside new environments.

UI/Layout Development

Wire Frames

I started off by drawing rough sketches on blank paper to illustrate a handful of essential pages that Users would traverse across before turning them into low-fidelity wireframes.

I aimed to designate each page into a simple yet effective way that would quickly meet the Users’ needs, depending on which page they’re navigating. One way I achieved this was careful consideration of placement, like making assets such as buttons and text boxes to be front-and-center for Users to quickly notice.

I further developed the layout for function and appeal by proceeding with low, mid, and high-fidelity iteration.

After each of these low-fidelity wireframes were done, I selected the designs that would be the most functional before moving onto mid-fidelity wireframes by using as a blueprint to solidify structure I would be aiming for.

Finally, I moved onto the high-fidelity wireframes to put in final details like colors and imagery to complete what exactly each page would look like in the final product.

For the final version of Voyage Vista, I aimed to create a world-centered style of aesthetic that would encourage curiosity of Users to book a vacation and see what the world has to offer. This was done using Earth-based colors on the UI like blue and green to indicate friendliness while using beige for mild warmth. I used the Display font for boldness as I used typography to sort out information by integrating text size to emphasize important information. Overall, the key design direction I was aiming for when creating the designs invoke a mild yet friendly brand tone that would represent Voyage Vista’s brand.

The next step of development was to incorporate prototyping to verify the practicality that the overall design of Voyage Vista’s website. I went about by using Figma as my main tool to construct the layouts of each page would have. With the versatile tools that came with organizing different assets I created, I could swiftly use this as a reliable tool to prototype the possible concepts that could work with what I had in mind. One challenge I typically struggled with when using Figma was balancing the use of imagery and placement of assets while keeping the friendly nature of Voyage Vista’s brand.

Final Thoughts

When following through on the development process for the design of Voyage Vista, the methodology I relied on was to make the most out of any collected and chosen assets that would be included in the website’s final design. Every new key finding throughout development helped me shape the design of Voyage Vista to be accommodating and convenient while relying on the User’s general sense of logic to incentivize input.