Improving UX and driving engagement for an environmental startup

Duration

1 month

Role

Product Designer

Project Type

Website audit and refresh

Client

Dharma with Danni is a small startup in central Indiana that specializes in combining three compatible practices: sustainability consulting, burnout recovery, and yoga.

Final design of Dharma with Danni home page

Website sample with burnout explaination "Burnout is today's workplace occupational hazard."

A bird standing in a body of water filled with trash

IDENTIFYING THE PROBLEM

We are in a climate crisis where, now more than ever, there is a need for a sustainable mindset, empowered environmental employees, and action in businesses and our personal lives. With budget cuts and lack of staffing in environmental spaces, these employees are struggling to stay passionate and suffering from burnout. Danni, of Dharma with Danni, believes she can do her part for the climate crisis with 3 complimentary practices: burnout recovery, sustainability consulting and yoga practice.

How could I create a website that showcase her services, experience, process and also functions as a space for others to understand the importance of climate action?

In this case study, you'll explore my thought processes while designing and implementing a peaceful website experience with emphasis motivating users, educating users, and creating a feeling of community.

Problem Space

PREVIEW OF FINAL DESIGNS

The original homepage of Dharma with Danni

Previous UI

What's new?

The overall site branding came from a crossover between the existing brand identity and the business offerings themselves. Throughout the site you'll find reminders of breathing, meant to convey a sense of peace, relaxation, and balance.

Balance + Peace

The change was requested by the client - and contributes to the brand's calming feeling.

Alter from dark-mode to light

Immediately upon entering the site, you'll find important CTA's, easy access socials, and clear and concise navigation.

Clear navigation

This is the space to introduce the Product section and showcase the types of products available.

The mission and services are front and center.

The final re-designed homepage of Dharma with Danni site

The Final Design

Brief overview of the solution

I gathered my research for this project through stakeholder interviews and industry research. Because the client already had a website, I needed to conduct a UX audit, understand industry standards, and help move the website towards a more cohesive and efficient representation of the client's hard work. A big priority for the client, was gathering her existing content and understanding how to convey the business to her potential clients in the best and most approachable way.

I prioritized the research findings into 3 key insights: users need to feel motivated, informed and feel like they are a part of something bigger than themselves.

Research insights

RESEARCH & DERIVING INSIGHTS

User's need to be motivated to explore the site and book a service. It's already taken so much for burnt out users to get to the point of searching for help & recovery. Lets make it easy on them.

1. Motivation

User's need to feel informed about the services provided, how the services work, how the services intertwine, and what it's like to work with Danni.

2. Information

Danni's audience is normally drawn to these activities to reignite the connection to their jobs, the Earth, and/or themselves. User's want to feel like they are a part of something bigger than themselves.

3. Community

Key Insights

Easy to find CTA's

Easy to find contact information

Easy booking services online

Branding is calming, lots of white space - laid out like breathing

Clear + intuitive navigation with emphasis information architecture

Newsletter signup

Events calendar

Inclusive terminology

Stats that show how many people are impacted by the subject

More information on Danni + who she is

Real testimonials + images with real clients

More information about the services + Danni's specific approach

Learn page - with stats about why are all of these things important

Showcase of Danni's qualification

Wireframe of the homepage of Dharma with Danni featuring sections on: services, "how it works," climate change information, who is Danni?

Wireframe of About page for Danni covering: who Danni is, what her qualifications are, what she does, why she does it, past projects, etc.

Wireframe of Services page, listing filters and all services broken off in sections

Wireframe of an individual service page with a complete description of the service and a list of suggested services to pair with the selected service

Wireframe of the Learn page that helps users get informed about the climate crisis and how Danni can help them become more sustainable or less burntout

Wireframe of the contact page that includes a message and a contact form

BRANDING & UI

GOLDPLAY LIGHT

Maven Pro

Danni sitting infront of a computer with a cup of coffee

Applying existing branding.

Danni already had talked through her branding with another consultant - they decided on the fonts and colors. We briefly discussed Danni's expectations in regards to how she wanted her brand to be perceived by her audience.

She had mentioned the following adjectives to keep in mind:

Sincere, Minimalistic
Approachable, authentic, affordable, knowledgeable, unique
[Stylistically] Cute but professional

FINAL DESIGN HIGHLIGHTS

Home page without interacting with the yoga graphic

Home page design after interacting with the yoga graphic

Listing of services Danni provides including: Sustainability consulting, Burnout recovery, and Yoga

Step #2 in How it Works section on the Home page

First section on Danni's about page explaining who she is as "an environmental and burnout specialist"

Section on the about page breaking down what exactly Danni does

Explanation of why Danni does what she does - Expanding on her efforts "To empower people and the plant"

The hero image of the services page featuring a cartoon Earth, dotted line indicating a journey, and stars

Explaining burnout section on the Learn page

A transformed, research-backed product.

Take me back to alexiking.com

OUTCOME & REFLECTION

I ended up experiencing a roadblock halfway through this project. The web builder [WIX] launched a newer and better version. I pushed the project deadline back one week to ensure that my client was getting the best from me.

My Challenges

Increased sales + leads
Increased awareness of Danni and her services
Increased understanding of the impact of climate change, how action is important, and how Danni can help

Projected Outcomes

Project Outcomes

With the project priorities [Motivation, Information, Community] front and center, the [ABOUT] page also puts more emphasis on Danni's professional background, her personal journey and a more clear description of what it is that Danni does. To build on this, I also added an additional page [LEARN] that was centered completely on bringing information and understanding to users about the complicated and tricky subject of environmental issues. The [LEARN] page gives users even more focused insight into the 3 separate but related services Danni offers.

Research-backed wireframes

IDEATION & WIREFRAMES