top of page

ESGhub

ESGhub by MioTech is the world’s leading network connecting and engaging companies, financial institutions, and supply chains, to collect, analyze, and report ESG data. I art directed the sleek look and feel and made the website responsive.

Role

UX/UI Designer,

Art Director

Category

Technology

ESG

Agency

MioTech

Type of Work

Research

Visual Design

Art Direction

Results

  • Digitalize the paper-based procurement process to improve usability, convenience, and security.

  • Developed the aesthetic and visual style of the product that complements the parent company.

  • Designed responsive interfaces, facilitating navigation and information seeking.

ESG Hub.png

Research

Market Research

Explored and discovered different types of ESG platforms locally and internationally. Identified strengths, weak-nesses, opportunities, and threats that we may have in order to create an in-formed design solution.

Interactions & Usability

Researched on various methods of in-teractive design and animation. Applied Nielsen Norman’s 10 Heuristics of Usability, which are the rules of thumb when designing the UI.

ESG Industry

Conducted research to better under-stand the ESG industry, topics of focus, common themes, products, and services.

Inspiration

Drew inspiration from web designs all over the web, from Pinterests to web-sites from unrelated fields. Pitched ideas to the founder and team, and collaborated with them through voting.

Design

Information Architecture

Working alongside the marketing team, we strategically planned the information architecture and contents of the website.

Screen Shot 2023-11-18 at 16.34.17.png

Wireframes, Interactions, and Animations

I proposed two concepts for the website layout with annotations and directions of what the interaction and animation should be like.

Screen Shot 2023-11-18 at 16.36.34.png

Lo-fi Prototypes

Working from the wireframes, I proposed 2 lo-fi different concepts:

sleek and modern, and clean and minimal design.

Screen Shot 2023-11-18 at 16.36.18.png

Mid-fi Prototypes

The founder and design team wanted to move forward with the sleek and modern design concept. These variations were created chronologically from left to right. I was exploring different layouts in order to find the one that best communicates priority messages, direct users to desired actions, and reflect the brand identity.

Screen Shot 2023-11-18 at 16.37.49.png

3D Illustration

Screen Shot 2023-11-18 at 16.40.10.png
Screen Shot 2023-11-18 at 16.40.27.png

Home

Screen Shot 2023-11-18 at 16.45.02.png
Screen Shot 2023-11-18 at 16.41.06.png

Why ESGhub

Screen Shot 2023-11-18 at 16.45.36.png

Additional Pages

Screen Shot 2023-11-18 at 16.46.18.png

Mobile Version

Screen Shot 2023-11-18 at 16.46.42.png

Design Impact

Art Direction

In the early stages, I spent time with the Head of UX in order to distill business concepts and the founder’s needs. This helped me to pitch ideas and present the creative vision to the founder. Leading me to establish the art direction which guided the Product Design Team’s outputs.

Content Design

I collaborated with the Marketing Team by designing the hierarchy or layout of the contents by messaging priority.

Brand Identity

I ensure all of the creative outputs/visuals are consistent with the overall brand. I achieved this by researching the ESG industry, learning more about the company’s offerings, and working from existing brand guidelines.

More Work

Screen Shot 2023-11-18 at 16.05.24.png

Sun Hung Kai Properties (SHK)

HKSTP.png

Hong Kong Science and Technology Parks (HKSTP)

bottom of page