top of page

Vista

This project is a combination of User Interface Design and 2D animation. For the UI section of this project, I am creating a travel app (Vista) that allows users from around the world to explore scenic routes and landscapes near them. The app will be presented with clean aesthetics and illustrated sceneries. In terms of how I plan to incorporate animation into this project, I will be animating a dynamic navigation and will follow the navigation sequences of a new user, much like the videos prompted on the Apple app store.

Overview

What is my project about?

Why?

Just last semester, I fell in love with User Interface Design and UI animations. Something about working with simple assets and turning them into animations with a clean aesthetic fascinated me, therefore, when I had the opportunity of producing my own project I knew that this was an idea I want to explore. I specifically decided to create a travel app because I have always LOVED landscapes and sceneries, especially when they are being illustrated, so this senior project is an opportunity for me to combine everything I have learned and my passion together and create a project that I love and proud of. 

Branding/Style Choice

01

Artboard 1.png
Primary Logo

I've been spending the majority of my time up until now doing research and developing an overall aesthetic for my app. In experimenting with different fonts and color pallets, I developed a solid foundation of the style of the app making it much easier for me to proceed and create other assets that might be needed.

The next steps now that I have established a solid foundation is to do more research and dive deeper into other travel apps and how it flows and functions. I want to begin wireframing and start to implement the current aesthetics into the user interface design and see how it turns out. I also want to begin storyboarding / animation testing for the actual video part just to explore the possibilities for UI animations

65968.png
Loading Screen Mockup
Icon Mockup by Asylab.png
App Icon Mockups
Artboard 1 copy 7.png

I utilized a warm color palette with the brighter, more vibrant colors used as highlights and buttons within the interface while using the darker colors to ensure the body text and titles are easy to read on a white background. Based on my research, many of the travel apps out in the public today refrains from using vibrant colors in order to keep a modern look and align with other applications; I wanted to challenge it and give my UI an environmental and immersive feeling.

I love the versatility of the Futura font family and primarily utilized the Bold and Book option for this design. I think that its overall aesthetics fit well with the style and mood I'm trying to convey for my travel application

Logo Animation for Ads

User Research/Flow

02

 During my research, I realized there wasn't a travel app out there that specifically dedicated itself to scenic routes/landscape views, and although most travel apps take user preferences into consideration, most are limited to preferred travel locations and over-generalized preferences along that line. There seems to be a lack of concern with the bulk of the travel apps when it comes to more specific, personal factors of travel such as weather, time, etc. I aim to address and solve these problems in my app in order to create a personalized experience for the user. 

 

This general app flow chart highlights the functionality of Vista, a simple-to-use travel app that allows its user to easily explore and locate their desired scenic routes/landscapes based on their preferred travel weather, time of day, and traveling method. Depending on when the time is opened by the user, the main landing page presents the user with different recommendations. The main navigation buttons give the user the ability to find a scenic route they potentially want to travel to and locate the possible route to that specific location depending on the preferred traveling method. The calendar in correspondences with the favorite function allows users to save specific locations, plan trips and set reminders. It will also alert the user of potential threatening weather if it overlaps with a planned travel date. Lastly, the user can tap on their profile to see their travel logs as well as customize different settings.

App Map Flow.png
App Map Flow

Interface Design

03

Yu_Chaofan_Vista_image_002.png
Capture.PNG
Capture.PNG
Capture 1.PNG

Final Deliverables

04

Project_Still_1 (1).png
Project_Still_2 (1).png

The final deliverables for this project included a fully interactive prototype, complete branding assets, logo animation, and final advertisement animation. It was exhibited during the 2022 University of Connecticut BFA Senior Exhibition show and received a multitude of awards both within the university and outside of the school.  

Click to Interact with the Prototype
bottom of page