In Chengdu - Li Li Design Portfolio

In Chengdu

Chengdu is a fast-growing modern metropolis located in the southwest of China. It is one of the few super-sized Chinese cities that most visitors do end up enjoying. ‘In Chengdu’ is a responsive website designed to provide foreign travelers and visitors a space to get to know a more unique Chengdu, helping them to plan a better trip and have a better experience.

CLIENT

CareerFoundry

ROLE

UX/UI Design (individual project)

TIMELINE

Oct 2021 - Nov 2021 (5 weeks)

TOOL

Figma, Invision

View prototype

the challenge

How can visitors experience the real Chengdu better?

I was born and raised in Chengdu, China. Living overseas, I am often asked about my hometown. People are curious about this city with its deep cultural heritage, and while there are a few English blogs and websites that provide information about Chengdu, it is difficult to find an official local platform that provides the most comprehensive and up-to-date information about the city.

Travelers and visitors need a local platform that recommends the best parts of Chengdu so that they can get to know the real Chengdu better.

My design approach

According to the existing travel behavior studies, the majority of travelers use multiple devices (mobile phone, tablet, desktop) as they plan and book a trip.

'In Chengdu' website is fully responsive on various devices. This means users can browse the website at home or on the go. Since users heavily rely on their phones to search or check information when they are traveling, to provide my users a user-friendly experience with the 'In Chengdu' website, I implemented the mobile-first approach to help me prioritize content and organize the structure of my design.

Understanding the users

User persona

I believe that being able to fully understand my users builds the foundation of my design. To empathize the users better, I created my primary persona Emily, a recent college graduate looking to travel to Chengdu for her graduation trip.

User stories

Creating users stories helped me define my users’ needs, thus helped me identify the scope and features of my product.

As a traveler, I want to learn more about Chengdu, so that I can plan my trip better.
As a traveler, I want to know what locals eat, so that I get to experience Chengdu’s local cuisine like a local.
As a foreigner who is living in Chengdu, I want to know about upcoming events in Chengdu, so that I can join and attend the event.
As a user, I want to be able to see a place that I am interested in geographically, so I can get there easily.
As a user, I would like to quickly search articles about places/food/events, so that I can get more information about them.

design the solution

MVP & User flow

Based on the needs and goals of my persona, as well as the user stories I created, I narrowed the solution scope to these core features listed below:

Featured attraction articles
Events
Blogs
Sign in/register
Search
Subscribe newsletter
View map
Add to wishlist
Sort & filter

To visualize what screens I needed to create and how the users would navigate the ‘In Chengdu’ website, I created user flow. By doing so it gave me the clue of how to organise the key features and each screen in a more logical way.

Wireframes

After having a good understanding of the users needs as well as defined the core features of ‘In Chengdu’, I started to sketch the necessary screens. Since travel guide was text-heavy, I aimed to keep the layout of each screen minimal to avoid content overload. I tried different versions of each screen until I found a good combination that I think is going to meet the users’ needs. Then I turn these screens into rapid prototype using Invision to verify the user flow and the usability of the website. I conducted a think-aloud test with my friends to see if they could easily navigate the prototype.

The test results showed that users were able to easily navigate the website on mobile and they were able to find information they want. I kept all the feedback and moved on to digitalise the wireframes using Figma.

To make sure the visual hierarchy throughout all the screens was consistent all the time, I applied 4-column fluid grids for the mobile interface design. Meanwhile, to space all the content consistently throughout my design, I set up a base spacing of 8px. The 8px grid allowed me to use multiples of 8 to space elements in my design.

Moodboard

After rationalizing the solution I created, I created moodboard for ‘In Chengdu’ to help me communicate a distinct style and visual direction of my design.

The style of a city travel guide should show it welcomes its visitors, and since travel guide is usually text-heavy, it should be easy to read. I created this moodboard to present a warm, welcoming and refreshing feeling to the users - foreign travelers who are interested in Chengdu culture and want to visit Chengdu in the future.

Style guide

Since the ‘In Chengdu’ website was responsive, it was important to make sure the user interface design was consistent across all the breakpoints, from mobile, tablet to desktop. I created the style guide for ‘In Chengdu’ to establish consistency and a sense of reliability of the brand. More importantly, I also put accessibility under consideration when creating my style guide, to ensure that each part of the design was accessible to all the users. This includes color contrast, text size, touch target, forms, etc. For example, was the text readable against certain colors? Was the icon with a big enough touch target for users?

Feature showcase

Having search function in the navigation bar lets users look for destinations easily while saving a lot of space on the screen. Also it allows users to search at anytime without returning to a certain page. When users type in the search bar, it also recommends users ‘recently viewed’ and ‘popular destination’.

View map

Adding the map feature to our service allows users to geographically check locations, which helps users get to the place easier.

On top of that, users can also choose to view nearby attractions from the map, which helps users quickly locate the places that they are interested in.

Add to wishlist

Wishlist feature allows users to create their personalized collections of attractions and save them in their user account for future reference. Users will only be asked to login or register if they need to add something into their wishlist.

Sort & filter

This feature allows users to find, show or hind any contents about Chengdu based on different categories. By applying filter feature in the design, it provides users a faster way to navigate to the information they want in a more organized way.

reflection

What I've learned & What's next?

We should always consider how to implement the design on different devices.

This project challenged me to design for multiple breakpoints. I realize that it is important to ensure that the visual language and information hierarchy remain consistent throughout different devices since consistency helps establish brand trust.

UI design is not just about aesthetic.

A good design is more than just how it looks. For example, while keeping in mind that how it looks matter, we should also pay attention on the accessibility for different user groups. Nailing the balance between aesthetic and function is one of key to create useful and usable service for our users.

Next steps...

This project is more UI focused. But as a UX designer, I'm aware of the value of testing my designs. The next important step is to conduct usability testing to measure the utility and usability of the design, and conduct iteration based on user testing feedback.

SmartRyde