Reaching decision-makers that count with an integrated thought leadership programme.
The Startup My City was a content hub to create awareness and educate the target audience about Hitachi’s social innovation solutions. It’s a part of the company’s Global Brand Campaign.
Hitachi wanted to boost its profile as the industry leader in the Social Innovation Business and connect with Global Business Leaders and Decision-makers. It then reached the audience through the channels they trust. The company partnered with The Economist Intelligence Unit as the source of information on a theme that interests them.
As this case study heavily focuses on the visual, I’ll be brief and let pictures speak themselves.
2. Grid System
This project was launched over 5 years ago and the specs may look outdated from the current perspective. We developed a responsive web design with 1024px max target screen and 12 column grid structure with the following breakpoints:
- 996px for PC & Tablet (Landscape)
- 768px for Tablet (Portrait)
- 580px for Mobile (Landscape)
- 400px for Mobile (Portrait)
The company had established its own framework as part of the Design System –— we didn’t use an open source framework such as bootstrap. I took part in the front-end development and collaborated with a front-end engineer from beginning to launch.
3. Screen Flow
The content consists of 4 main sections:
- Home screen
- City Reports
- The Economist Intelligent Unit articles and videos
- Hitachi Branded articles and videos
4. Style Guide
5. Home screen
As part of the Brand Campaign site, we had to maintain a uniform and cohesive web experience with consistent colour, typography, and other visual elements.
6. City Report
The team delivered 20 cities reports in total (ASEAN + APAC Comparators). We wanted to highlight the summary of the findings by showing them in a format that is easy to digest: Charts and mini Infographics.
7. Articles and Videos
As a designer, I truly spent a lot of time and energy to ensure the design fits nicely in multiple screen sizes. Especially on small devices, we had to manage the screen efficiently and without compromising usability. Text legibility and readability are non-negotiable.