Interactive Web Report | UX/UI Lead
Team structure:
UX/UI Lead x 1, Project Manager x 1, Visual Designer x 1, Developer x 3
​
Deliverables:
​Wireframe & Prototype, UX Design, Visual design & illustration, Information Architecture, Front-end implementation, Design guideline, Usability Test
​
Tools:
Adobe Photoshop, Illustrator, inDesign, inVision, Bracket, Microsoft Powerpoint, Excel, GlooMaps
About the project
The CLP Sustainability Report (SR) was used to be published on paper, until we brought it to digital since 2017. The goal was to present the principles, activities and performance that have been achieved by CLP towards sustainable development. The websites are structured to provide easy access to all key topics indicators and information.
​
We are achieving three main benefits through this digital transformation:
​
Public Exposure - Audiences are easier to access through computer or mobile device
Environmental Concern - Reduce the printing papers which match the theme of "sustainability"
Easy to maintain - Easy to managed by CMS for sustainable development
In this project, we need to worked closely with client's branding consulting team from Australia, who mainly provide art direction and the branding guideline, and our role is focusing on UX consultation, visual & interface design and development.
Design Process
Research, Analysis and Ideation
​
We began by conducting a megatrends analysis. This involved case studies on the client's competitors, reviews internal strategy documents and policies and conducting interviews with user groups and stakeholders.
​
Consider the scale of contents (more than hundred pages!) and the sustainable development, I proposed to use a template-based approach in this project. I designed 10 templates as guidelines to cover all categories of pages on the website, and based on these templates to expand the rest of the content pages.
​
Content audit is conducted for pages and contents review for building the Information Architecture. The sitemap was designed using card sorting method and discussion with the client using interactive sitemap tools GlooMaps.
Content Audit on content creation and URL naming
Use Card sorting method to brainstorm the sitemap
Wireframe and Userflow Design
​
After the confirmation on sitemap, the wireframe design and userflow are presented to client using inVision to demonstrate the user experience.
Visual Design & Illustration
​
To present the complicated and tedious report, we need to make it clearly and entertainingly. We keep communicating with the branding design team with the art direction and beautify the look & feel with illustration design and interface design.
Moodboard provided by the branding consulting team
Data Visualization
​
Infographics and interactive graphs are also used to help to illustrate the whole picture more easily and attractively.
Implementation
​
Provide interactive HTML templates prototypes and design instruction to developers as guidelines for the in-depth implementation with responsive design for cross browsers and devices.
The total development time is about 1.5 month. I managed daily sync-up meeting with developers and keep tracking on the development progress and usability testing. Test cases and amendments are recorded using online issue log spreadsheet.
Issue log spreadsheet for daily progress Sync-up meeting and Usability Testing
Feedbacks
​
Public feedbacks on SR 2017 are collected and stating that the landing page is a bit too informative and not easy to navigate the topic of information that they need.
For the design on SR 2018, we propose a more direct and easier way on landing page - a centre access point, by just providing quick-links for main topics, and so far the feedbacks are positive.
Different approaches for the landing of SR 2017 and SR 2018
Besides, consider the public exposure and some target user group (stockholders) are elderly who may not familiar with using computer or devices, we decided to make an additional in-essence brochure to present the report highlight in SR 2018.
