“ Dr. Sun Yat Sen Classical Garden (Vancouver’s Chinese Garden) was built in 1985–1986 using the time honored principles and techniques of the original Ming dynasty garden(1368–1644) . Fifty-two master craftsmen from Suzhou China, working with Canadian counterparts, completed this landscape masterpiece within a year. The intricate halls and walkways are constructed with precise joinery and without the use of nails, screws or glue.”
Mission
Vancouver Chinese Garden builds for spreading Chinese culture, also bridges the gap between Chinese culture and Western culture.
Time
3 Weeks
My Role
As the UX designer in this team project, I corporate with my team to understand the goals of the project from the business perspective, user perspective, and project perspective.I facilitate the team to brainstorm the creative designs and lead them to focus on user-based design rather than personal preference design. I encourage everyone to express their ideas and think outside of the box, also aware the rationale behind the design. I do research with my team and reorganize information architecture of the current website by the card sorting and iterate the design by testing. I design the wireframe and the prototype with my team and present the final work to our client.
My Task
User Interview, affinity diagram, feature Prioritization, user flow, domain research, competitive analysis, persona, scenario, card-sort testing, paper prototype, digital wireframe, clickable prototype, A/B test, presentation.
Problems and Opportunities
According to our client, the original website and overall online digital presence disconnect with current trends. Dr. Sun Yat Sen Garden Society is an organization in transition, adopting a new innovative and entrepreneurial spirit, it needs a website that will reflect that visually and help them functionally as well. Due to many of the limitations of the current website it has been a challenge for them to increase their capacity and their ability to scale and reach new audiences.
Because the organization is 100% self-sustained, it is imperative for them to be able to change with the times and relate to audiences to keep the doors open.
Research Method
- Domain Research
- Contextual Inquiry
- Interview
- Card Sorting
DAY 1
Kick-off Meeting
As a team, we brainstorm the meeting questions together and have the kick-off meeting with our client. During the kick-off meeting, we understand the business of Dr. Sun Yat Sen Society, the background story of Dr. Sun Yat Sen Park, the mission, and purpose of the organization and current issues they face, frustration, and expectation of the project.
Finding:
- The Park has two part which Dr. Sun Yat Sen Park open free for public, and Dr. Sun Yat Sen Chinese Classical Garden(Chinese Classical Garden) sell tickets for public
- Biggest customer group of Chinese Classical Garden is tourists, also include students visit for school field trip, and facilities need venue rental.
Scope
We analysis the three type of goals basing on brief and information from kick-off meeting, and list the feature requirements before we start research.
Considering the limitation of the time, we decided to focus on MVP of this project, which is generating sales of Chinese Classical Garden and increasing awareness. We plan to reorganize the information architecture of the original website, do domain research and research two biggest user groups to figure out the pain point of users. Tourist and school field trip organizer occupied the largest proportion income of the organization. Therefore we target them as our primary user groups.
DAY 2–7
Research
Interview
We create our interview questions basing on tourist user and field trip organizer user. We interview people randomly at the beginning because we assume that everyone can be the potential customer of the Chinese Classical Garden. However, the result we got too general, and the motivation depends on personal preference. Then we add one screen question and narrow down interviewee scope to the tourist who has been to the Chinese Classical Garden. Also, we visit the Chinese Classical Garden and interview people who attend the garden tour to figure our their motivation, frustration, and feeling of the garden.
Finding:
- Tourists are disappointed with the trip. They think the garden is too small compare to another garden.
- Organizers are all actively looking for the details information about field trip programs.They also mention about the appropriate education content to match students’ age and materials for the teacher to prepare for the field trip.We do the affinity diagram after the interview and generate the information and the insights from the interview for UI style setting.
Contextual Inquiry
We visit the garden twice and talk to the tourists. We also interview the staff who have worked for ten years in the garden and invited her to do the cart sorting of the navigation bar. The staff of Garden wants to spread Chinese culture and the spirit represented by the objects inside the garden. However, it ‘s hard to let people understand all the concepts during twenty minutes tour. The garden is not traditional understanding of garden; it is a home for ancient Chinese scholar.
Finding:
- The tourists misinterpret the garden concepts of Chinese Classical Garden.
- The organization doesn't market the right concept of the Chinese Classical Garden.
Basing on traditional cognition, people more easily to relate flowers and plants to the concept of the garden. However, the Chinese Classic Garden is more culture-based garden compare to nature viewing garden in western culture. The whole garden mimics scholar’s the home in Ming Dynasty, and the details of architecture reflect the lifestyle of an ancient Chinese scholar and express the spirit of Chinese Culture. The architecture surrounds the garden, reflect the balance of yin-yang theory. The garden more like a museum carries the belief of harmony from Chinese culture in Vancouver. The purpose of the whole park built for spreading Chinese culture also bridges the gap between Chinese culture and Western culture.
Card Sorting
We give the scenario and the task for people to find the information they want. We figure out that people confused about the information in current homepage and navigator bar. Therefore we marge some pages and recreate first level of navigation bar, also test people to confirm the content under first level navigation.
Finding:
- Overwhelming information
- Busy layout
- Confusing drop down menu
Goals Conformed
DAY 8–9
PLANNING
Persona
We create two persona basing on research result to help us better understand user’s goal, frustration and motivation.
User Flows
Site-Map
This is the original site map. We use the card sorting method to let users to categorize all the sub-page without first-level navigation ,and ask user to label each category they created. Basing on testing result we do the design studio and compare the difference version of we designed.
Then we do the affinity diagram and test the first draft of navigation bar by card sorting.
According to testing result we adjust a little details of the navigation bar, and having the second meeting with our client to conform the information archietecture content.
This is the final version of the navigation bar.
DAY 10 — 11
Design
Logo
According to client’s needs , she wants to add more modern design element into new website. Therefore, we change the font of logo and choose a less egged and mordenlized font as an option for client. The client is very satisfied with the changing.
Style Tile
We create five mood-boards basing on insights from interview. We test them and pick the one receives the most right feeling feedback as our fist draft mood-board.
However,considering the misinterpretation of garden concept from research, we decide to add some scholar home’s related elements into mood-board and style tile. We adjust the mood board, and test is again, then finalized the mood-board and style tile.
Grid
Day 12–14
Wireframe
We design the mobile version before desktop version. The mobile first design helps us break the section, place the order of information, utilized the mood colour before we jump to the desktop version.
According to data from Google Analytics offered from client, we figure out that most user use laptop to view original website and top four navigation destinations include ‘Rates and Hour’, ‘Event’, ‘Photo Gallery’ and ‘Directions’. Therefore, we ‘add rates and hour’ link in homepage, also design the fix heading with ‘buy ticket’ button and ‘open hour’ to increase exposure rate and encourage people to buy ticket. Then we arrange the content by the story we want to tell. We also add scholar’s home section and four representative culture based elements in home page to help user build their cognition of Chinese Classical Garden.
However we couldn’t align the order of section due of different perspective consideration. We assume many situation, and have different ideas about the order of section basing on google analytics and storytelling line.
Hence, we do more A/B test for home page draft. Variation A represents the hypothesis of storytelling case, and variation B represents the hypothesis of generate sale toward business goal (also basing on top navigation destination page from Google Analytics) .
The testing result shows that people prefer variation A, because they think it is easier to read and understand begin with some introduction. They want to know what it is before making decision to know further information about what they want to do.
Then we do the design studio for several round to align the rest part of design.While considering the data from google analytics still a problem we need to pay attention to, we decide to add a fix button with the navigation bar. Afte we settle the information archietecure of homepage we test it and design the rest other page according to new site map and user flows.
Then we apply the method to design rest of page, and transfer them to sketch. Due to the constrain of the time, we try to focus on MVP to decide which page to design first. Then we can devliveral the MVP focused page during presentation.
Mid-Fidelity Design
DAY 15
High-Fidelity Design Hurdles !
When we design the high-fiedelity screen we recieve the feedback that the design more tends to modernism style than culture-based design, also the design didn’t reflect the mood we want to express. Though spend one day to discuss the style and iterate the different version of UI design, we still changing the style of homepage. Also we have 48 hours left to deliver the final project, and we still can not align the design of homepage. It is a big crisis for us because change home page style can affect the rest page of design.
However, we didn’t give up and reduce the requirement of design because of the time. We split the task, so one of us start to organize the logic of presentation and making slides. Rest of us settle home page style and apply the style to rest pages.
After one day struggle, we come up some great ideas that adding latern and brush elements to replace the boxy design. The latern is one of the representative Chinese culture element always seen in garden. The stroke shape adding the sense of movement, which also emphasizes the scholar’s home concept and adjust users’ expectation of the garden. The stroke created by Chinese Calligraphy Brush Pen, also relates to scholar’s life element. The round shape of latern convey the soft and static state, and stroke’s shape adding the strenth and dynamic state. The balance of two element not only break the common design, also express the ying-yang balanced spirit of the garden.
We finish the design on time, and present the project to client at Day 17.
