Largest Chinatown Outside Asia.- SanFrancisco.com

Project Overview

Sanfranciscochinatown.com is a website to provide online resources to plan a visit to Chinatown. This project designs the website to improve the user experience of visitors and make it a one stop tourism resource page of Chinatown San Francisco.

The Design Process

The Design Challenge

Business Goal

User Goal

Solution: The Redesigned Information Architecture.

• Intuitive Navigation Bar.
• Increase discoverability and fundability of relevant information.
• Uniform status visibility.
• Consistent structure throughout the website.

1. Heuristic Evaluation

Why Heuristic Evaluation

• Help identify and focus on website issues without the involvement of users.
• Help discover usability issues of minor interface elements that affect the overall user experience.
• Conducting Heuristic evaluation this early in the design process provides the design with feedback without having to spend a lot of money or time.

Usability Issues from Heuristic Evaluation as Key Oppurtunity Areas

2. Content Audit

Why Content Audit

• Make an inventory of the information that the website is providing.
• The quality of website content and its relevance.
• Identify the opportunities for redesigning the information architecture.

After identifying the interface issues, I did a content audit for a more in-depth information about the structure of the website, the scope of information provided. The initial web crawl was of 400+ pages. So I decided to evaluate each pages based on 3 criteria:
‍
1. Effectiveness
2. Accuracy
3. Value
‍
It was during this stage that I came up with a set of goals for the Users and the Business to help me further with the redesign as I did not have direct contact with the users of the website or the business.

Usability Issues from Content Audit as Key Oppurtunity Areas

3. User Senarios and Task Analysis

Now, I had enough information about the issues of the User Interface and the content and the goal of the website. Now I decide to focus on the User Experience part.
‍
The website seem to have a value goal that it wants users to achieve and it has various categories of information, that are outdated, however I see a huge opportunity in this website as a one stop online site, where users can not just learn about its rich history, culture and heritage but also experience it in Chinatown in real time.

Why User Scenarios and Task Analysis?

• Determine the type of users and what type of information they want to know, and type of tasks they wish to complete.
• Find what kind of preferences users( prospective tourists) might need the website to offer.
• Empathize with the users and design an information flow that gives a seamless experience to the users to register for events and find tourism information

Task Analysis User Senario and Tasks

Number of Participants : 3
Demographic : 25- 29 years

Scenario
‍User is planning to visit San Francisco. User wants to explore Chinatown as much in the limited time of their trip.
‍User goal
‍Plan a trip to Chinatown by learning about places the user can visit in Chinatown and things user can do in Chinatown.
‍Tasks
1. How to reach Chinatown.
2. Finding places to visit in Chinatown.
3. Exploring things to do in Chinatown.
4. Indulging in the culture through shopping and food

Task Analysis Insights

Usability Issues from Task Analysis as Key Oppurtunity Areas

1. Sitemap

With the knowledge of business and user needs, I created the original sitemap of the website and then based on the information from the heuristic evaluation, content audit and the task analysis I created the first iteration of the sitemap.

Original Sitemap

First Iteration

After I had the Original Sitemap, I designed my first iteration of the sitemap based on the Heuristic evaluation, content audit and task analysis insights.

Final Iteration

I reworked on the hierarchy of information and the navigation go the website by careful considerations from my research methods. I also tested my sitemap with 5 UX designers. And I came up with a final Sitemap that I decided to develop into the Wireframe.

To wireframe, I started off with hand sketches. Once I had an idea of overall wireframe design, I started wire framing in  Axure XP. I made various iterations till it made sense to me.

1. Navigation Bar

The Navigation Bar needed to be optimized with intuitive tab names with more natural mapping. I also added sign up/ log in for returning visitors to give them more personalized experience and recommendations. I also added a search tab to help with discoverability and findability of thew website content.

2. Homepage

Previously the Homepage had an excess of texts and links that was neither scannable or readable. The homepage was also not helping to direct visitors to current events or happenings. I redesigned it to make users more enthusiastic about the events , informing them of 'Highlights for the week' for them to plan.

3. Events Page

I added filters like category, price range, location and dates. Preferences, I found users are interested about that I found out about in Task Analysis.

4. Attractions Page

Previous pages were very text intensive and didn't help users to get an idea about the attraction. There were too many links that was not always helpful. I redesigned it to include images, reviews and duration of the visit that would help them with the planning and get interested about.

5. Store

I changed the store page to include more images and categories to explore by. I replaced 'Special Deal' links with Exclusive Deal Zone, to make the deals more findable. I also added stores of Chinatown that users can explore before visiting Chinatown to buy souvier for friends and family, another thing visitors cared about as found in Task Analysis.

6. Blog

To encourage users to stay engaged and return back, I added a Blog page for users to post their experiences in form of blogs and vlogs and images, that would also be helpful to new visitors to watch and be excited about Chinatown visit.

Challenges

• Designing an information architecture that matches the mental model of users
  ‍While doing task analysis, I observed that users independently needed similar kind of information at similar stages which didn’t map well in the existing website. For instance the restaurants was under attraction and the user was apologetic for not being able to find where to get the restaurant informations.
• Saying a lot in less words
  ‍A big part of building information architecture, I found is saying a lot in less words. Keeping in mind the attention span of users, their time and the importance of information, having a good command over the language and being able to communicate the information in a crisp, concise an inviting way is a super power, a designer strives towards.
• Figuring out what is business need without a stakeholder
  ‍This website was built with a goal to be a rich resource of informations the users might need to visit the website, however there was no clear objective about how the business would profit from it. Without any market research and stakeholders to tell the requirements, as a designer, it was challenging and fun at the same time to have the independence to figure it out on my own.
• Designing the website from wireframe : Having worked on this website, I really wanted to redesign it based on the wireframe I created.

Design Takeaways

• User attention is a commodity
  ‍One of the things I learnt about is how in today’s world, user’s attention is a commodity and to make designs usable it is important to learn to structure and provide relevant information in a concise manner.
• Importance of language
  ‍It is very important to be fluent and professional in the language one wants to design in, it makes the process of designing faster.
• Observing users can provide most answers
  ‍When in doubt, it is always best to go back to user and observe them to find answers to design blocks.

More of My Work.

SUMMER'22 INTERNSHIP

JobStart by SureStart

A dedicated platform to help recruiters find the perfect match for their needs and vacancy through skills and help companies remove unconscious bias in hiring.

View Project

Information architecture'22

Chinatown San Francisco

Redesigning the website of Chinatown San Francisco by solving the major and minor User Interface issues of the present website.

View project

Adobe creative jam, top 10 finalists

GoodBuy

Good Buy facilitates conscious buying by helping users identify ethical brands that make a difference through their transparent fair trade factories and inside stories.

View PRoject

cybersecurity solution showcase, first prize

Make a Phish

Make a Phish is a platform to create phishing email awareness amongst employees and teams by helping create fun and engaging phishing email competitions.

View PRoject