Tianci Zhang

Tianci Zhang portfolio

Website Redesign – Cinema 320

Jan 2017 – Mar 2017
This is a website redesign project on Wordpress. I followed my website design process and added some user centered design concept. I enjoyed the requirement analysis a lot in this project, and the final site is simple and beautiful.

Portfolio
UX/web project
Web project

Overview

Cinema 320 is an independent movie theater. It started the business since 1983. Located at Clark University, it attracts audiences from Massachusetts, Rode Island and Connecticut. In 2004, Cinema 320 started to have a website, and now the owner is looking for a change.

In this project, I redesigned the website and highlighted the parts where people usually ignored on the old site. At the same time, The new site also spots what makes this theater unique and popular.

I follow the design process of Research, Analyze, Sketch, Mockup and Launch



Research

Goal

  • Find problems on the current site
  • Gather requirements from stakeholders

Approaches

  • Old site evaluation
  • Interview – Both the business owner and audiences
  • Field observation

 

I assisted with selling tickets before the show, which gave me chance to talk to the audience and the business owner casually. I also conducted interviews before and after movies, showing people the old website.




Also gathered requirements about the website from the business owner and the audience.



Analyze

Combined the requirements and problems, let’s see what we can do and how to do it. For the problems I can not solve this time, let’s see how much I can do for now.

Solution map & table

Here we have 8 requirements, which can be categorized into 5 buckets: function, content, maintenance, look & feel and marketing. (Marketing is out of our scope in this project)

When putting the requirements into these bucket, we can see some requirement’s can be fit more than one bucket. For example, The orange No. 1, to clarify location I needs to consider content writing, website function (Google Maps embedded) and content layout.

The requirements also has a hierarchy. For example, the budget requirement affects which platform I choose to work on, which affects how I realize the mail list function on that platform.

So, to make it clear, I need a table:

OrderRequirement numberRequirement Resources & ToolsSolution
1
3
No additional costKeep using Wordpress, and self-maintenance
  • Wordpress
  • maintenance training
2
3
Mail listWordpress plugins:
WP Mail, MailChimp...
  • Compare & choose one plugin
3
1
Similar site structure
  • Keep the old sitemap
  • add new elements
4
1
Specify locationGoogle maps and Clark University maps; Wordpress plugins
  • Graphics
  • Google maps
5
2
Specify movie scheduleSplit the long schedule page
  • One directory page
  • Individual page for each movie
6
2
ReadabilityTemplates and user test
  • Wordpress template and customize
  • User testing
7
2
Brandingwho we are; what we do; what we have done; who we work with
  • About page
  • campaign pages or show off the work
8
4
Attract more peopleMarketing Campaign, media relations, social media...
  • Link outside
  • bring in social media

Usually, the solutions did not come up immediately in my mind, it took some time and generated step by step. For example, here is the thinking process for the location solution:


Next, let’s reflect the solutions in the sitemap.

Sitemap & Information Architecture

To define how many pages I need and what information to put on each page, sitemap and information architecture give me an answer.




Sketch

I wire-framed the main pages, which helped me to remember where I should put the elements.



Mock up

With the wire-frame draft, I found a similar WordPress template and started building the site on my WordPress account. I modified the layout a little bit based on the template. The whole look and feel is simple, fresh and neat.

I presented the mock-up site to the owner, showing him how to update the content as well. With his approval, I was able to take the last step, migrating the site from my WordPress account to his WordPress account.



Launch

The WordPress migration should have been simple, however, I met a big issue.

I was using wordpress.org while the business owner was using wordpress.com, free plan. The new site template cannot be used in wordpress.com, and the owner did not want to change his plan, or purchasing server installing wordpress.org.

Eventually, I rebuilt the website on wordpress.com. It was not as fancy as the one before, but it still works.


In the end…

From this experience, I corrected my working process by adding more communication before research, more thought about mock-up and user test after mock-up. It saves time by spending more time in effective communication and information gathering.

(Light green is the old process, dark green are added process)

What can be done next…

Did the new site meet all the requirements?

Roll back to the requirement spreadsheet and check again. Does the new site include all of the needs? It also depend on how we define “success”. For example, if less people call and ask about the location and where to park, it means the map on the new site works out; if more people know/attend to the events off our regular schedule, the branding is successful.

Any more improvements?

Showing the result with metrics is more persuasive. WordPress can track the traffic, Google analytics counts the number of clicks and shows traffic report. I can also implement more SEO tools to enhance the website performance.