Addressing Issues

Web and Mobile responsiveness was crucial for the Energy Management and Sustainability pages. Specific challenges included visual hierarchy, data representation, and spacing for optimal user experience on diverse devices.

Sustainability

Challenge

Client feedback indicated issues with visual hierarchy, particularly in the Performance section of the Sustainability module. Key data, such as revenue and performance metrics, lacked prominence and clarity.

Discover

Identified Issues: Analyzed client feedback to pinpoint visual hierarchy gaps.

Correction and Refinement: Addressed the missing visual hierarchy in the Performance section.

Content Prioritization: Highlighted crucial numbers and revenue data for improved user attention.

Senior Designer Collaboration: Engaged with the Senior to ensure the corrections aligned with their vision.

Outcome:

1. Significantly improved visual hierarchy.

2. Enhanced user understanding of performance metrics.

3. Strengthened collaboration with the Senior designers through effective problem-solving.

Energy Management

Challenge

Client feedback highlighted repeating years in the Energy Management page, impacting data accuracy and user comprehension. The goal was to align the presentation of consumption, cost savings, and emissions with the current website and wireframes.

Discover

Identified Data Inconsistencies: Recognized repeating years in the Energy and Emissions sections.

Data Alignment: Adjusted the representation of consumption, cost savings, and emissions to reflect accurate year-to-year changes.

Wireframe Integration: Ensured alignment with wireframes for a cohesive user experience.

Outcome:

1. Eliminated repeating years for consumption data.

2. Aligned cost savings and watt-hour changes with accurate yearly representation.

3. Implemented changes in accordance with wireframes and current website design.

Challenge

Competition in the Healthcare Market

Mega We Care, being a leader in the global pharmaceutical industry, faces stiff competition from various players. The challenge was to redesign the Sustainability Module to provide users with an intuitive and engaging experience that sets Mega We Care apart from competitors.

Enhancing User Trust and Engagement

Given Mega We Care's extensive reach and reputation, the redesign aimed to foster trust and engagement among users. The goal was to create a user interface that not only educates users about Mega We Care's sustainability efforts but also instills confidence in the brand, encouraging prolonged engagement.

Desktop Version

Sustainability

Navigating the design continuity from the previous designer posed multiple challenges that required a comprehensive understanding of the design direction set by senior stakeholders.

Design Direction Clarification:

Objective: Grasping the intended design style and adhering to senior-established guidelines.

Discover: Conducted a thorough analysis of the previous designer's work to align with the set design direction.

Color Styles Mastery:

Objective: Understanding the color palette intricacies, including primary and secondary colors, shades of grey, opacities, and contrast principles.

Discover: Meticulously studied the color styles, ensuring accurate implementation for visual harmony.

Spacing and Layout Understanding

Objective: Grasping the nuances of spacing, padding, margins, and gutter spacing, especially adhering to an 8-point grid system.

Discover: Studied the spacing standards meticulously, ensuring adherence to the 8-point grid for a cohesive layout.

Collaborative Design Process:

  1. Successfully integrated design changes while maintaining visual consistency.

  2. Achieved a cohesive user interface by aligning with established design principles.

  3. Collaborative efforts resulted in a seamless transition to close the project.

Mobile Responsive

That's the end of this tune.
Wanna hop to the next?

Client Work

Lolllypop Studio

2 months

Mobile + Web

Ui Design

Figma , Illustrator

Typography

Headlines

Lexend

Aa

Light

Regular

Medium

Bold

Body Text

Noto Sans

Aa

Light

Regular

Medium

Bold

Colors

Primary

Secondary