Visit California is the DMO (Destination Marketing Organization) website of California. The goal is to provide people, either new visitor or previous visitor, a place to explore California’s popular spots a swell as hidden gems. For this redesign, we want to elevate user’s experience by providing additional planning and exploration tools, also reconstruct the information architecture of the website to refresh the navigation experience for the user.

Define the User

Before kickstarting the design, we wanted to learn more about the audience whom we were designing for. The client has work with a marketing agency to map out their user persona, and with five provided personas, we decided to narrow down to two of them as our focused user group for this project.

• People who are visiting California for the first time; They are looking for a well-rounded introduction to California.
• People who have visited California before: Looking for hidden gems alongside the     popular locations.

Persona - Looking at Options

Persona - Same Old

Website Audit and User Testing

Our team did a UX audit for the current website to find out which issues were preventing current users from having a good website experience. As designers, I also did a heuristic analysis of the site. One of the main problems I found was that the site had an ambiguous information architecture which was difficult for users to navigate through. Therefore, the research team conducted tree testing with users to determine whether people had the same problem. The tree testing results confirmed my assumption: it is hard to navigate through the website to find desired content.

Tree testing result for current navigation

Information Architecture and Sitemap

Our team did an audit for the current website content and figure out the information on this website is structured based on location / experience type. After studying otherDMO or travel website, the team decided to maintain the existing content structure but redesign the navigation to improve user experience. We have a “Places to Visit” tab on the main navigation to direct user through location,and a “Things to Do” tab for people who like to look for content based on experience type. We did another tree test for the new navigation to trial the improvement.

Tree Testing Result for New Navigation

Brainstorm with Wireframe

We chose to proceed with the mobile designfirst as the website data suggests that most users of this website access it through a mobile device. We listed all of the screens we needed to work on and started creating a wireframe to brainstorm possible features and layout individually, then shared it within the team. There are two features I purposed at this stage that are adopted by the team and maintain to be used in the final version:

• I proposed that the website should have a Like system so that users can like articles and save them to a specific folder.
• I wanted to incorporate an enhanced map function into the browsing process so that     users can search articles and advice for trips based on location, as well as being able to eyeball the distance between each trip destination.

Wireframe - Map

Wireframe - Map

Wireframe - Card

Wireframe - Like

Explore the design style

Focusing our theme around California, our team proposed three different color palettes for the project. After couple rounds of discussion with the client, we decided to use the colour palette I designed for VisitCalifornia Road Trip Republic site – to main the design consistency across the brand.

Color Palette - Blue

We decide to create three page templates for this based on the information architecture and previous wireframe:

• Home Page - contains cards to landing page
• Landing Page: For Region, City, Places or Experience. This type of page will contains both cards to landing page and article page
• Article Page - layout for long text content

Home

Landing Page - 1

Landing Page - 2

Article

Card System

For the cards system, I designed different card style for each type of content

Bottom Navigation

Moved forward to a high-fidelity mockup -since it’s a ‘mobile-first’ design, we wanted to incorporate the mobile app experience into this website so that it is more intuitive for mobile users. I moved the navigation button down to the bottom corner of the screen instead of the top. By doing so, the button is located around the user's thumb area and so is more easily reached. For article, I made a bottom navigation bar instead of just one floating button, to provide the user a short-cut back to home or to their like collections.

Float Nav on Home

Nav - Expand

Nav Banner - Article

Nav Animation

Map

We decided to have a map view for the Region and City pages– based on my wireframe. My goal was to enable users to have an alternative way of exploring California - not only by navigating through the website and clicking on an article, but also by browsing through amap.

Map - Region

Map - Landing Page

Map - Article

Map Animation

Interaction Animation

I also made interaction animation for a couple of key screens or features to offer a live demo of how users would interact with those screens.For example, I made an animation for the travel video section to showcase how we planned to provide a smooth video-watching experience to the user.

Home

Video

Like

The main challenge for this project was to communicate with our clients and persuade them to be open to new ideas and features that they were not initially familiar with, especially if they were fond of their current website and were not expecting a drastic change. Our UX researcher team constantly provided support for the design team, which included conducting user testing for the new feature we proposed and backing up our design ideas with research and data analytics. The animations we made also helped the client to better understand the feature. For me, the most rewarding part of this project was during a demo of the home screen animation video to our client. The client said: “You guys are making us hate our current website now… we can’t wait to have the new design built here!”