Driving Growth Through (Re)Design:
TCDC Resource Center Website
What is TCDC?
TCDC stands for Thailand Creative & Design Center. It is one of the largest design and creativity centers in Asia. TCDC Resource Center is one among many services they provide, which was established in 2005.
TCDC Resource Center aims to be a place for designers, students, entrepreneurs and enthusiasts in design and creativity fields to develop and expand their knowledge and skills, as well as to help strengthen capability and competitiveness of Thai designers in a global market place.
We got an opportunity to redesign the entire experience of the TCDC Resource Center website. It contains more than 34,000 books, 210 magazine titles, and many multimedia resources covering various interests in design discipline, e.g. architecture, fashion, textile, graphic design, photography, film, etc.
We redesigned brand new UI, UX, and search system. A new reservation system, both front-end and back-end, was also introduced.
Existing Problems
- The original version was launched about 10 years ago when I was still a college students! The web design and technology were outdated. Of course, there is no concept of mobile-friendly existed back then.
- Too much information was displayed on a single page. They are probably most useful for librarians, but not so much for majority of users.
- Several services were not supported online. For example, availability of reading rooms at the center cannot be checked online. Or it was not possible to make a reservation for multimedia.
- Search function were not efficient. Unrelated contents often showed up as a result.
- Realtime data collected in the database was not reflected at the website. For instance, number of member currently using the center was not shown.
In short, the website looked almost devastated although it was the website for the main service of TCDC. The expected goal for the project were to gain better traffic (200%) and retention rate (50%). In addition, the website should add a value to the brand image of TCDC as best design and creativity resource center. And yes of course, it needs to look very neat as well.
Result After Redesign
350% more MAUs after launched (33% of all paid members) 57% retention.
Here I mention about the result even before I describe the process, because we are a data-driven team. We set the quantified goal before we start trying to achieve anything. We got a handful of positive feedbacks in terms of aesthetics and brand awareness as well.
In the end, it turned out that this project was a very successful project that we are proud of. I would like to write a bit about how we redesigned it. Hopefully it can be useful for others.
Here are the list of key ideas I used to approach the problems.
1. Step Back
I gathered user feedbacks about original version both online and offline. Then I organized and analyzed the data using personas, mental model and others. While my team and I were doing these UX researches, we realized the need to understand TCDC services deeper to get more insights. Our team used Service Design methodology to discuss with clients. We came up with the TCDC ecosystem, which will act as a service blueprint in the future. With these data, I was confidently ready to generate and execute the possible solutions.
It could have led me to the wrong directions if I did not step back and look at the project in a bigger picture. (See the diagram above.)
2. Clean and Organize
Although I have made many information architecture, this was first for library database, MARC. We spent hours to understand how it works and filtered only what users need to know. Then we worked with librarians to finalize the data inout manual for books, magazines, movies, videos, and etc.
We used the data input manual to cut unrelated and add new data that users need. The layout was designed to rearrange information based on priority.
Look at the image below. Left is original and right is redesign. You can see how we separated main interaction area (See location, Add to Your Shelf) from general information area (Title, Description, and Details).
Below is the final version. The global header gives more space in each page. It also stretches out to full width.
Rating, Review, as well as Recommendation sections are also integrated into the new version in order to enhance user experience.
The global header and navigation also play a big part in the renovation. The original version used a left sidebar as a global search, which took up one forth of the screen width. The browse collection is located on the right sidebar which only appeared on home page. Furthermore, the top bar was dedicated for static information which users hardly click based on our research data.
In the new version, we placed search, categories (browse collection), and static information at the top. They can be accessible anywhere in the website. Moreover, we designed this to be able to scale to many locations. Users can toggle the location between Bangkok and Chiangmai, which owns different collections. It was an impactful direction to clean and organize complex data while still fit well with responsive design style for all devices.
3. Repeat With Accent
We set up this style guide to be used for 3 services of TCDC. At this point, it includes TCDC Resource Center, TCDCCONNECT, MyTCDC (under development). It is a crucial communication tool for designers and developers. We developed the website in-house and managed dev teams. It is always the best and efficient to start with the style guide. So how did we make it?
The style guide mainly focuses on basic web elements such as typography, color, button, etc. We used the guide to discuss with clients to make sure what we design fits with their corporate identity and usability. When we commit to the style guide, designer, developer and client agree that we are on the same page.
Minimalism plays a big role in the design process. After we cleand and organized most parts especially information, we spent a lot of time to create a UX document, which gave us well-thought structures and patterns. When UX was done, the UI process was more about the look that kept repeating the same structures and gave some accents for main interactions.
4. Enhance and Engage
Search was the main problem that we needed to solve. It needed to show the right items as quickly as possible. In the latest version, we reduced the speed of the process to 1.7 seconds, 30% lower than using elastic search engine. We also improved the search suggestion to lead people to more correct resources. Users can also choose to search by item types as well.
We remodeled the shelf function that already exist in the original version(used to called “Book drop”). User can make lists of resources to share to themselves, friends and also to public. The next phase would provide a function for user to manage her own shelf with user account manage by MyTCDC, another services coming later in 2015.
TCDC is a very popular spot for designers and creatives in Bangkok. Many people come to the venue to study, read, or watch films. But they are often frustrated when there is no seat left as they arrive. Instead of expanding the space to serve more users, we solved this by offering the realtime data of currently available seats, reading rooms, and multimedia rooms.
Users can plan the visit based on the real data we provide. The original version had no online reservation function but in the new version, members can reserve reading rooms, multimedia rooms and other resources by themselves on the website. Lastly, We conducted a service design research with staffs to design the backend to manage all types of requests from users.
5. Build to Scale
TCDC plans to expand its services rapidly in the next 10 years. The new headquarter will be built at least 5 times bigger than now. It means more services, more members and probably more branches nationwide. The website is designed to support those changes as well.
At this moment, the same website and backend staff are used both in Bangkok and Chiangmai branches, with a plan to migrate the database to the cloud.
Lastly, the website needed to be improved all the time. I wrote this article as my crystallization process. I thought it may be useful for others who wants to see examples of real work that covers the entire process from the start to end. To be honest, there are lots of small mistakes we could have avoided. I would love to talk about it in details in the next article when I have a chance.
Stay tuned.
The newest version should be fully launched in November 2015. Please go visit library.tcdc.or.th
