Obviously Sustainable - Landing Page

Whats is Obviously Sustainable?

Obviously Sustainable is a company that join hands with businesses and communities in shaping society for the better. To helps industries craft their social mission and run hyperlocal programs with communities to deliver sustainable change.

The Goal for Obsus’s Website

• Brand Awereness : As a company's platform for sharing content about sustainable change, such as sharing eco-friendly tips, interesting facts, or how to reduce carbon footprints. This website is a company's commitment to the environment through projects such as supporting renewable energy or recycling waste.

• Partnerships Easier : One of the purposes of this website is to display previous projects or work results to attract partners or investors and make it easier for companies to build relationships with other organizations or individuals about sustainable change.

• Increase Awareness and Education : This website is a platform for educating the public about the importance of sustainable change and highlighting specific issues that are in line with the company's focus, such as sustainability or waste reduction.

• Increase Sales or Conversion : website as a channel to offer company products or services.

User Targets

• Individuals Who Care About the Environment : youth generation, professionals, or families who care about the environment by providing information on how they can contribute to change, such as eco-friendly tips, sustainable products, or donation programs.

• Entrepreneur and Corporation : Companies looking to implement sustainable practices, whether small or large scale, are providing B2B Solutions, such as gut consulting, waste management, or green technologies that can improve the efficiency and digestion of their systems.

• Investors or Financial Backers : Individuals or institutions looking to invest in environmental and sustainability initiatives by providing information about the company's positive impact, annual reports, or investment opportunities.

• Academics and Researchers : Universities, researchers, or students interested in sustainable change can provide research publications, statistical data, or collaboration on sustainable change projects.

Scope

This is Obsus' first website, therefore I created the overall website design, namely the layout of the visual elements and the user flow in accessing this website so that it can reflect the company's vision in terms of the impact of environmental change, here are the pages that I created for this website:

• Homepage : The home page section includes the header, hero section, our missions, workstream, Milestone, Our partners, tertimonials, tagline, form section, footer. On this home page, especially in the Our missions and workstream sections, I had a little challenge in making the design because I had to provide important information in visual form.

• Workstream : How companies implement their vision of sustainable change.

• Partnership : Contains partners who have collaborated with Opsus, they want a little animation to display the partner logo.

• Team : Contains member profile details of Obsus’s team

• Research : Contains articles related to the company's vision

• Contact Us : Contains the company email address and company office address

My Role and Responsibility

As a UI/UX designer, I am responsible for creating the design and user experience in accessing this website. My task include:

• Initial Consultation : Seek information from clients to align perceptions

• Collaboration : Collaboration with developers, namely explaining design concepts, user flow, and user experience goals to developers. Sharing wireframes, mockups, or prototypes that have been created.

• Testing and Validation : Checking the implementation results in the development environment (UI Prototype). Providing feedback if there is a discrepancy with the design.

Design Proses

My design process for this project starts from understanding the client's needs and goals, and analyzing the target users so that company information can be conveyed effectively and aesthetically appealing. Here are the details of my design process for completing this project:

• User Research : I work with the project manager to map out the targets of this website.

• Looking for design references : I am looking for design references that I will apply to this project.

• Execution : Starting a design with the Figma application includes creating a prototype to make presentations with clients easier.

• Feedback and Revision : After I made the design, I received feedback from the client and user and then I improved it.

Website Design Inspiration

Benchmark:

• https://www.seismic-change.com/

• https://www.jakartapolicyinnovation.com/

Coverage

I discussed with the obsus representative, they wanted
intended feeling when layout viewed: hopeful. Consisted of a clean, mainly white layout, with several colors (blue, green, pink). They also gave the color code to be implemented in the website:

Soft Sage Green: #A8D5BA
Mint Green: #98DDCA
Sky Blue: #A1CAF1
Soft Clay: #E6CCB2
Warm Coral: #FFAAA5
Red Burgundy #99334d

Sitemap

A sitemap is a structural representation of a website that shows the relationships between the pages within it. Sitemaps are used to help users and search engines understand how content is organized, here is a sitemap from the Obsus website that I created:

Challenge

One of the main challenges in this project is that they want quite a lot of colors to be implemented in the website. In addition, the challenge in creating our missions and core services is to create visuals that are easy for users to understand the information the company wants to convey. Collaboration with the backend and frontend to determine visuals according to the limitations of the technology used. Another challenge is to create a responsive and consistent design on various screen sizes so that it is easy for users to access the website through various devices, both desktop and mobile.

Mockup

A design mockup is a visual representation of a digital product design, such as a website or app, that shows its final appearance and visual elements. Mockups are more detailed than wireframes but do not have the functionality of a prototype. They are typically used to show stakeholders how a product will look before development.

Hero Section Design

On the hero client, we want an image that fills the screen as well as a tagline, a short description of the company and a CTA button. There is a slight problem, namely that when the background is light in color, the text will not be very visible. The solution is to add a little shadow to the text so that the information presented can be conveyed clearly to the user.