EnMaze Website Redesign
EnMaze (Click here to check the website) is a New York based Chinese film production company, who is focusing on bridging the China-US film industries. They were seeking a designer, who can understand both Chinese and American users, to redesign their website. So they found me, with the following tasks:
They required a higher organized information structure with clarity and accessibility to deliver the core message.
They wanted a systematic and outstanding UI Design to emphasize their corporate identity.
Responsive Web Design
They needed a mobile-friendly responsive website to cater an increasingly significant amount of mobile end users.
To achieve those missions, I worked closely with their brand director and technical director to re-create the whole website, which included the information architecture, wireframe, visual interface and the front-end development.
Communication and Discovery
Based on their previous website, EnMaze already had a big picture of how the new site should look like. This preconception seemed to be a faster way to reach the design goal. However, going too further with this also would make it easier to ignore better solutions. So I lead them to act as their target users—which we actually are—to detect and analyze the way we explored EnMaze’s website and the emotional journey we experienced. It took a while for us discussing on some core questions to define the value proposition. We ended with answers as below:
Q1. What do users want to see on their website?
- Who EnMaze is
- What EnMaze does
- How to contact EnMaze
Q2. What attracts users the most?
- Famous movie
- Beautiful UI
- Right services
Q3. What make users decide to stay or leave?
Users are likely to be engaged with high motivation and intuitive user interface. Their motivation could be offered by web contents.
Engagement Curve based on the behavior model by BJ Fogg
With the clarity of the value proposition, I began to work on the IA (Information Architecture) of the website.
Nail Down the Structure
I started to design my first website since 2003. During these time, I've witnessed the web design tendency changing a lot, due to the increasing amount of mobile end users. The mainstream users became more impatient than before, so web pages have to simplify themselves as much as possible to be perceived faster. Less clicking and more scrolling on a page support easier navigation on mobile devices.
Since EnMaze is mostly targeting the new generation of filmmakers, I needed to clean up the old IA to adapt to the emerging market.
On the old website, users have to click the menu and go back to open all seven pages.
On the new website, users only need to scroll and click once to browse all the information.
I broke the tree view hierarchy into the horizontal structure. Instead of clicking a link to open a new page, users could browse basic information just by scrolling up and down. I also added bridges between the Home page and Works page inherently, which is convenient for users to jump swiftly.
As an emerging film company, to outstand themselves and impress potential clients, EnMaze should express their passion and energy through their visual identity. They originally used a web template which didn't match their requirements. So we needed to change.
I deconstructed the core shapes from their logo.
EnMaze already had their logo published to many presses. In this case, significant changes on the logo would obstruct their established corporate recognition. So what I did was keeping the existing logo, deconstructing the core shapes: the tilt angle and parallel space, to form their new visual system.
Color Palette Iteration
I chose black as their background color. Because black is the domain color of cameras, films and clapper boards, it represents the film industry. Then I derived the navy from their logo as the primary color. My first trial was using deep navy and gray to create a dark tone, but it felt less attractive and didn't express enough passion. So I adjusted the navy slightly brighter, and also changed the gray to blue, to bring more contrast and energy.
To quickly excite users and picture a positive image of EnMaze, we decided to use their movie clips as the full-width header background. In this way, users can immediately get what EnMaze does when the first time they open the website.
Video background on the full-width header.
Responsive Web Design
Responsive design doesn't mean pure scale. Due to the variation of devices and the limitation of browsers, it's hard to have a One-Size-Fits-All solution. So I started with the design of desktop end, laying out all the information on the full-size view, then worked my way down to the mobile layout.
According to the IA and the color palettes, I used Bootstrap frame to implement the UI design for 3 different platforms: Desktop, Tablet, and Mobile.
Responsive design for Desktop, Tablet and Mobile
(a partial view)
We initially considered using video header background also on tablet and mobile devices. But the fact was, on iPad/iPhone, inline videos weren't able to play automatically, and couldn't be overlayed as backgrounds. Some front-end developers used GIF animations or PNG sequences to fake "video", and others created complicated codes to support functions. I was exploring some of the approaches, but they either ended up with low-quality outcomes, or too many glitches causing extra works.
Struggling with this issue, I turned to think what mobile users want when checking a website. The slick design, or the beautiful assets? Apparently not. They want the functionality and efficiency. So to balance the aesthetics and performance, we finally made up our mind to set a static image header for tablet and mobile websites.
Mobile version with a static image header
What I Learned
1. Design from the beginning
Most of the time, clients are likely to start a project from the middle. They thought they already knew what they wanted from imagination, and asked you to build it based on a un-established document. As an experience designer, It's crucial to lead clients figuring out "why" before "how." This move is necessary to make everyone on the same page and avoid conflicting on fundamental concepts in the future.
2. Measure success
EnMaze needed these tasks completed within a stressful timeline(2-3 months) and limited budget, so as assuring it’s financially and technically affordable. For this reason, instead of a fully polished masterpiece which costs months to launch, my mission was to design a functional and decent light-weighted website, in the most efficient way.
The special point of EnMaze website is its localization. To ensure accessibilities for both US and Chinese users, I had to take many elements in account: the overseas capability of the server, the full supports of low version browsers, and even the built-in Google maps (China has blocked parts of Google services). This experience is valuable for my future cross-national projects.