Project Details
Role
Design research, branding, social media marketing strategy, visual design, UX/UI design
Tools
Figma and Illustrator
Timeline
School project - Fall 2022 (Sep. 9 - Dec. 14, 2022)
Personal upgrade (Nov. 9, 2023 - )
Background
This project was originally for the branding and marketing in my college program, and in this course, I worked on a mobile app branding for an adventure tour company that has started a new business targeting travellers aged 20 - 40 who like outdoors in all seasons throughout Canada. After the long period of lockdown, the demand for online booking has increased, and the client wanted to add their signature function to match the user’s activity level to the tour.
Problems
How to match the user’s sporting level?
This is the function that the client’s website wants to have so that the user can customize their tour to fit their sporting level.
How to provide the quote timely?
Providing the quote right after knowing the user’s needs can increase the satisfactory of booking a tour, and this could be how the travel company can differenciate from other competitors.
Solution
Q&A Session with Virtual Concierge
Create a Q&A session page just like the travel agency does at the store to customize a tour for the client.
Timely quote by AI calculation
Provide a quote immediately after the Q&A session by AI calculation to fit the activities to the client’s needs.
Prototype Demo
Sorry! The final prototyping is still in progress.
The demo video will be up as soon as it’s done.
Design Process
The original case study was for branding and marketing and focuses a lot more on colour schemes, logos and Instagram marketing.
Since the original deliverables don’t showcase my UX/UI design skills as well as the fact that some critical design skills are missing, I have upgraded my design process. I decided to add a user journey because it is important to investigate how each persona would interact with the product. Also, after the user journey, the user flow, wireframes and more detailed prototyping are added to improve this school project as a relevant product-design case study.
Precedent Research
Both of them ask questions one by one and propose a plan based on the answers. The plans are returned to the user by email later on, so the person does not get an immediate reply on the screen.
Pros: The first is that it can acquire the personal information of potential customers, which will enable the direct sending of promotions, new information, and other advertisements. The second is the ability to filter customers. Users who are not seriously considering a customized tour will not fill in their email addresses in the form to acquire a quote.
Cons: On the other hand, there is a problem: responding to customized tours by email means that more human resources for customer support are needed, which will impose a cost burden. If the system can automatically provide a certain level of plan proposals right after the user answers questions, it would not only increase user satisfaction but also help the company reduce its customer service costs.
Competitor’s Analysis
Two websites were analyzed which are based in Canada and offer adventure tours throughout all seasons in the country.
Arctic Range Adventure is a Canadian travel agency that mainly offers package tours of the northern lights in the Yukon region and Moose Travel Network is a Vancouver-based travel agency specializing in the Western Canada area.
Insights
As for the matching system, neither of the two companies had anything similar to that function, such as filtering tours based on experience level, and users had to consider the contents of each package on their own.
A start-up company with a few varieties of tour packages might lose out to competitors that offer a variety of tours and activities, so the innovative service that offers the perfect match based on the customers’ needs through a matching system would be a good strategy to be competitive in the travel industry.
Persona & User Journey
Three personas and user journeys were created to investigate how the majority of the users in different sporting levels and situations would interact with the product. Their thoughts and possible actions helped what functions need to be on each task.
Would you like to skip this school project section to jump on upgraded UX/UI design process?
School Project - Visual Design in Branding
Logo Design
This is the naming and logo brainstorming during the school project. The left image is a hundred naming ideas which I explored relating words based on the business. The initial brand name was Oak Travel since the oak tree is Canada’s signature. The tree is nicely flexible and hard at the same time, giving the perfect shape to fit any user.
After proposing this idea to the client (professor), she liked the bottom logo and also mentioned that the logo looks more like “Teak,“ another hardwood. I took the idea not only because of that but also because Teak sounded like the shortened word of Oak Travel.
Mood board
From the three mood boards, I decided to take this deep natural colour palette. When I imagined the contents of this tour company including pictures and the logo, the deep green of Canadian mountains, icy gray, and reddish dark brown of hardwoods matched the concept of this brand. This mood provides the users calm and relaxing imagination of their travel experience with this company. This colour palette also provides the feeling of trust and a warm welcome of this tour agency.
Social Media Marketing
After the brand naming, I designed the social media marketing strategy by distributing the ratio of Instagram content.
According to the instruction, the ratio of the posts by categories was set.
30% of the posts are the products such as package tours, the 50% are for lifestyle to emphasize the importance of healthy lifestyles in nature and outdoor activities. Topical posts are about recent studies regarding the relationships between nature and health to demonstrate the philosophy of this company and the benefit of the products, which is set at 15% of the entire posts. The remaining 5% is for contests and giveaways such as incentives for surveys and campaigns.
The post images have four types: images only for lifestyle posts to emphasize the beauty of nature, images with a title for lifestyle posts to describe the purpose of the picture, images with a title and a tag for product posts to be easily recognized, and solid colours with a title for topical, contest and giveaway posts to provide a visual break with a sequence of pictures.
Initial UI Design
This is the initial prototype of the school project. However I did my best in the short period of time for this prototype, I could only design the visual design of the mobile app screen from log-in to receiving the quote.
After this school project was over, I decided to redesign the prototype by adding an ideation process for a responsive website.
The reason why I changed the product from a mobile app to a website is that the users would access from websites rather than installing a mobile app for this new startup travel agency which only provides tours in Canada, according to my personas.
Personal Upgrade - UX/UI Design
User Flow
Considering the three target users, I created this user flow to investigate what pages are needed to guide them to the quote function and book a tour smoothly. When landing on the home page, the user clicks the button to start the Q&A session, being asked the questions one by one. Once the user finishes the session, the AI calculates and builds a couple of plans that fit the answers. The suggestions are listed on the quote page and the user clicks the list to see the details. After deciding on the tour, the user proceeds to the booking.
Information Architecture
Wireframing
Although this part is still in progress, the entire pages on desktops have been completed.
These designs are carefully considered pixel perfection by using the auto layout system on Figma, which allows designers to understand how the developer works when it comes to coding the design.
The next step is to design the tablet and mobile versions and turn them into hi-fi prototypes.
UX/UI Prototype
Sorry! I am still working on this section.
The updates will be up shortly, thank you for your patience.