A Wellbeing Movement

RoundGlass is a socially conscious global firm

At RoundGlass, we work to spur innovation and reimagine the journey of wellbeing and meaningful living through interactive experiences, cutting-edge applications, and captivating content. Our mission is simple, yet ambitious: to create a vibrant wellness ecosystem by investing in new technology, sharing knowledge, and ensuring that human beings are always at the very center of our approach.

We make it work by connecting industry, technology, and people to shape large-scale trends in health and wellness from the rural grassroots to the urban workplace.

We worked on a design system approach for all the communication websites of RoundGlass

Corporate website design served as the foundation for rest of the microsites within roundglass ecosystem: Products, Initiatives, Foundation and Sustain. Our goal was to ensure a consistent experience for our users, so that it easy for them to understand that all of these projects are interconnected and unified under the RoundGlass umbrella. Using the atomic design theory, we were able to identify our basic building blocks, components and templates to help us achieve scalibility and continuity in designs across all the websites.

Sitemap for the corporate website

Sitemap view of the corporate website and all the interconnected applications, experiences and initiatives

Whiteboard exercise for corporate web layout and a design system approach

We worked closely with the CEO to understand his vision, in order to reflect that as a story in corporate website

We took the atomic design principles and thought of few guidlines which will lead us to a design system

Setting few guidelines for all the illustartions and iconography

Examples of some minute user experience details that we thought of like loaders, empty/error state etc.

For our websites to communicate effectively, we devised a storytelling approach

1

Intrigue the user

Through empowerment stories from topics like mental wellbeing, physical wellbeing, better health etc. or a product elevator pitch.

2

Explain the ‘What’?

‘What’ do we intend to? Which problem are we focussing upon? This section throws a spotlight on the broader objective.

3

Talk about ‘Why’

After the ‘what’ part, ‘why’ tries to answer the motivation behind solving this problem, stakeholders involved etc.

4

Explain ‘How’

‘How’ should directly talk about the product or service that are being offered as solution. It should be supported with testimonials.

UI + Visual Design

With the sitemap, whiteboarding exercise and storytelling approach, we straight away jumped to the responsive design of the corporate website. It took us some iterations to get the final version which was approved by the operating council of RoundGlass. Please see the website prototype on the right.

Web Layouts

Elements of Design System

Colour Palette

Nav/Menu/Tabs

Typo + Scaling

Text Instances

Links + Button

Tiles

Input Fields

Misc

Others

Instances

Header Styles

Key Learnings

Creating a web design system that spans across 13 different websites of RoundGlass was really challenging. As a designer, I also gained the working knowledge of basic front end engg - HTML, CSS & JS

Responsive web design gets tricky because you’ve to design keeping the maximum and the minimum viewport width in mind. We always kept a mobile first approach, given the fact that most of the visitors on our old website were mobile users

We had to keep our designs simple, while allowing the room for content changes and CMS integration. Our stories, programs and events are dynamic in nature. Design approach for dynamic web pages gets different from general static web pages

To support the creative technologist, I took some of the HTML and CSS work. As a designer, I finally understood how positional & presentational CSS works. Learning HTML, tags, classes etc. will help me to collaborate efficiently with developers in future.

RoundGlass Corporate Website

Holistic Wellbeing and Meaningful Living™