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.
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.
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,I gathered requirements about the website from the business owner and the audience.
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.
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.
Where is the cinema?
This is one the most popular question. From observations and interviews, I found, always, people couldn't find the exact location before each show.
Sketch & Mock up
I wire-framed the main pages, which helped me to remember where I should put the elements.
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.
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.
(yellow parts 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.