Create a website not only serve as an information page, but also a local guide and a touch point lead to booking page.
Deliverables
- create 23919 users and 116655 page views in 3 months. - create 27.3% clickthrough rate and 4.7average position on google search - Cooperate with marketing, public relations, and event planing staff in our team and fulfill different UX metrics' goals around the different periods.
Outcome
- In charge of the end to end design and communicate with the stake-holders. - Develop the website with a RWD solution.
Challenge
- We have 67 open spots and the stake-holders are more then the amount (70+) . - Design and develop in a fast period. - Modify the the website with roll planning method in the different stage of the activity: 1) propagation period 2) selling tickets period 3) in the activity 4) retrospection period.
Project Description
Open House Festival is a global, annual festival celebrating the architecture and urban landscape of a city. It is staged by the charity Open City which campaigns to make a a more accessible, equitable and open city. During the Open House festival, many buildings considered to be of architectural significance open their doors for free public tours.As a visitor to the Open House Festival you can get access to a huge number remarkable buildings, landscapes and neighborhoods all over the city. With a wide range of special events, guided tours, and activities for children and families, there is something for everyone And Open House Hsinchu is a long-term program with 3 years. In the 1st year, we collected 67 urban architectures in the Hsinchu. We invited and gathered the space owners to have a profound communication about the city culture by the process of discovering and selecting open spots. By the localizing, annual, global festival, we seek to build a knowledge system and thus enrich the well-being of residents in Hsinchu. We create a public platform to list the events and media to invite the participants engaged in the atmosphere "living in Hsinchu".
Project Achievements
1. The 5th Asia city to enrolled in Open House with 67 open spots in 1st year. 2. Held 4 virtual summit and 1 physical summit in one of our open spots. 3. Held 6 localizing, physical activities combined with the local culture. 4. There are 120,00 visitors to our 67 open spots to participate our 2-day festival and we recruited 380 volunteers. 5. Collaborated with 3 cross-domain professors(Architecture, public communication, technology management) and 16 students.
Design Process
01 Research
02 Wireframe
03 Prototyping and sharing iteration with stake-holders
04 Developing and Operation the website
Collecting the requirements from Product Owner and redefine them with UX research methods. - Comparative Research - User Journey Map Go to the location and experience the user journey - Identify the users' habit to finish each goal on different platforms.
Discuss concepts with Product Owner and stake-holder to generate the wireframe in Whimsical.
Ideate an solution and discuss with stake-holders with a prototype
- Prototyping in Figma - Stake-holder provide more scenarios based on the prototype
Developing and operation the website based on the users' behavior
- Developing the website with WordPress and several plugin( SEO / Google Map API / security) - Speculate the statics on google analytics(GA) and evaluate the UX Metrics
Research
Problems / Challenge
The Open House Hsinchu company needed a website for their brand. The website needed to serve different roles in different period among their activity in 3 months. We also need to communicate with more than 70 stake-holders ( The public sector, space owners, PR, EP, and Marketing staffs...etc )to ensure our website contents and information are all in a proper format.
Goals during different stages
1) propagation period -> Provide detailed information for the participants and make them curious and sharing the events. 2) selling tickets period -> Provide them a smooth experience to collect the tickets. 3) in the activity -> Serve as a local guide to make their travel experience smooth. 4) retrospection period -> Provide them the collections of all media they have taken part in.
Stake-holder terrtory map
To handle such a complicated issue related to localization, cultural, and communication, we also needed to communicate with lots of stake-holder to ensure online service works for them. During the different stage among our festival, we planed to talk to stake-holders to optimize the usage of our schedule.
Observation / Simulation
To understand the scenarios and the environment our users facing, I went to the each spots to understand the user journey. And we also create a testing page with different mechanism on KKtix to simulate the situation like ticket-grabbing and discussed several mechanism with stake-holders.
Comparative research
I collected several similar service (Open House London, Open House Chicago, and Open House Seoul) and the service with similar core features with our service (The map and spots finding feature in Airbnb, the virtual museum touring feature in CHIMEI Museum...) to obtain some inspirations for our design.
Although there are maps embed in the Open House Website, the map function is convenient for understand the information of the spots and not fit for finding a spots in the quickest way. So I collected and reviewed the exists services with similar intent on "finding spots quickly". For example, the Airbnb local experience is an easy-use case for us to learn.
We prepare an alternative virtual program for the accident if we cannot hold a festival during the COVID-19. Before start a travel, planing well also a normal practice for tourists. to save their time. So we also referenced the virtual museum touring feature in CHIMEI Museum website. We also compared to the iStaging and other VR method to exhibit our content, and our stake-holders thought that reveal too many content would eliminate the curiosity, which didn't meet our goal to enhance the interaction of the citizens the the space owners. Also, installing an APP for 1 times activity is not reasonable for the tourists, so we gave up the VR / AR app method and turned to a friendly responsive experience: allowing our service to serve as a mini APP on mobile devices.
Define the UX Metrics through the Google Analytics
The Open House Hsinchu company need a website for their brand. The website need to serve different roles in different period among their activity. Because we cannot interview users immediately due to the tight schedule, we observed the statics and define different UX metrics among different stages, and different page served as different functions.
1) Propagation period: Provide detailed information for the participants and make them curious and sharing the events.
We evaluate the our landing page and content page with different UX metrics separately.
Landing page Function: attract users to interact with more content. Bounce rate: lower Dwell time: (X) Referral & Sharing: higher
Content page Function: engage users with attractive and rich content. Bounce rate: (X) Dwell time: longer Referral & Sharing: higher
And we also customize our content for sharing on different media to promote the bounce rate from different media resource. Our bounce rate on average is 27.3%, which indicates our website content hooks our users and allow them to interact more.
2) selling tickets period: Provide them a smooth experience to collect the tickets.
We expect higher bounce rate and shorten the dwell time to make sure our users can enter our page quickly.
Open spots list page Function: Allow user view open spots list in a table view and direct link to the booking page. Bounce rate: higher Dwell time: shorter Referral & Sharing: (X)
3) In the activity: Serve as a local guide to make their travel experience smooth.
Solve the problem users direct report to our fan page and our staff and correct the information on time is important for the stage. We collect all the feedbacks message on the fan page and have a questionnaire for each event to fixed our festival experience. And the issue related to website service would be write into our user report.
4) Retrospection period: Provide them the collections of all media they have taken part in.
Activity record page Function: Allow user view past event and retrospective all the media we produce (The photos, the video, and the podcast) Bounce rate: (X) Dwell time: longer Referral & Sharing: (X)
UX Strategy & SEO
A successful service is not only a good design, but also related to a good public communication and event planning. So I collaborated with PR and EP to obtain a best practice to stick our users.
1) Propagation period: Content is the top priority before release to press conference
To promote the SEO on search engine, I cooperated with the PR staff to communicate an opportune moment to release news interviews to attract more visitors on website. We design and develop the attraction information page 1st before we held a press conference to use our budget where it is most needed.
2) Selling Tickets Period: Release more times and regularly to hook users
Also, I cooperated with the event planing staff to release spots and ticket for 4 times separately to provide rewards and hooks the users. And it also prevent from the crowd to get flooded with our website at the same time, the strategy promote our user experience and ensure our server work well.
3) In the activity: correct and add the short-form content for the micro-moment.
In the activity, it was also a peak period fro using website, and the users usually move dynamically to to seek as many as spots. Our service also design for the behavior for a mobile friendly interface for location guiding and spot finding. And we also provide short-from video content on the instagram to allow our visitors use their micro-moment wisely to indulge themselves in our festival.
Last but not least, I used the google search console and SEO tool to make sure every statics go well and fixed the problem immediately.
Design
Read detailed information on the Desktop
We generated rich content for each open spot to allow the desktop user read more.
Sharing news and short videos on the mobile
All the news and report will use Instagram & Facebook as media appendix with our website link to hook users.
Book a ticket on the Desktop
With a list view, we allow user to book tickets on the desktop in an efficient way. To attract people, we also support a view rich in graphic. The two version with same content serve for different functions.
Support Smooth Cross-platform Experience for Local Guide Map & Spot finding
Allow users can use local guide and find spots with full page on mobile & desktop to plan their trip.
Retrospective Page
After joining an event, the participants would ask our fan page for their photos. And we also had podcast talk to the space owner. So we combine all media in the same page to allow retrospect their trips.
Product Videos
Outcome Review
Our digital solutions collaborate with PR, event planing strategy led to our successful outcomes.
Statics Review: Users' habit for finish the task on different platforms
To identified users' habit for finish on different platform, I examined the statics on GA, and tried to find out something would trap users.
In our statics on GA, we can valid our design hypothesis:
1. People use different device fit for different situation.
In our statics on GA, we can valid our design hypothesis: people use different devices on different situation, and the mobile users are not overlap with desktop user. It imply that the investment for development feature base on the task attribute and platform is right( compare to develop feature fit for all platforms.
2. People read more on the desktop and use desktop to deal with complex process.
1. View the information of each open spot on the Desktop. 2. ticket-grabbing on the Desktop.
3. People sharing and moving with their mobile device.
1. Local guide and find spots on mobile. 2. Sharing event on mobile, especially on social media.
Statics -> Design implication:
The demographic provide some important insights for our next year events.
1. Females more than males
There are more female participated in our activity: which means the visual design for the next year can toward the direction which female will like, or we should spread our news on the platform which attracts females. On the other hand, if we want to attract male to our festival, we should find the channel males will use more often.
2. Young adults(35-44) are our active users.
Before designing the service, we guess the Y or Z generation would be the active users due to they are more active on the social media(which is our commercial strategy would mainly hit). The result imply that we need more investigation and user research for our target audience.
3. There are more international users using our service than we expected.
In the funnel chart in GA, we can see there were users whose ip address located in the USA, China, and Bangladesh...etc). However, we only provide Traditional Chinese version for our website. It imply if the budget allowing, we need to provide an English version for our service the next year.
Reflections
To use Google Analytic as a UX tool, we need to treat and dig into the data carefully, because it is lack of qualitative finding in-depth. We try to find some clue for our iterations among the user journey. If we have adequate time, it is better to make some usability with think aloud method. And the statics in the GA also give us a glimpse to the festival will happen in 2022. The hardest thing is that we need to tackle on the complicated political relationship. When we got some political party's help, even if it is the Public sector, we cannot obtain open spots which the authority were belong to another political party. Also, became the 1st year to hold the festival, there were many situations we couldn't predict. For example, lack of public transportation system may results in the lack of young people ( especially for the Z generation or Alpha ). The budget and the timeline also limited the potential of an online experience could be. Ex. if the booking system was built in our website, it can provide a more seamless customer experience. Last but not least, I think we could install HotJar in our service to observe the usability issue and the user behavior on our map design to understand the statics on the funnel charts.
.gif){kind=small}
