UI Case Study: Bliss Cremation and Green Burial Services Inc.
The Background
Bliss Cremation and Green Burial Services Inc. is British Columbia’s first 100% eco-friendly death care provider. Bliss helps family and friends celebrate their loved one’s life while making efforts to lessen environmental impact through ethical practices and greener alternatives.
Bliss wants to be the place in BC people go to when thinking about dying and green death. The owner of the company, Godwyn Young, is hoping to attract more customers using a new website.
The Timeline
Both the UX and UI teams were allotted 3 weeks in total to complete this project. On the UI side, the specific timeline entails:
During week one, we complete the initial client meeting and gut test — and use it to inform the Why of our project.
In week two, we figure out our design directions, our moodboards and our style tile corresponding with the chosen design direction.
In the final week, we wrap up our logo design and focus on designing the Hi-Fi screens once the UX team hands them off to us.
The Team
The team consisted of two UX designers, as well as three UI designers including myself (I’m second from the left in the picture below!):
The Challenge
Presently, Godwyn is falling below his targets in terms of how many families he serves in a year. He doesn’t receive any customer leads from his website, and would like to change that starting with a unique, intuitive website redesign.
Challenge: Godwyn’s website is content heavy and challenging to navigate in its current state. He wants to simplify it, especially in relation to his price lists as they are difficult to find.
The Goals
After meeting Godwyn during our kickoff meeting, we came up with the following goals for the project:
Business Goals: to simplify the user experience of the site to encourage more leads.
User Goals: to easily seek out help in their time of need and quickly learn about the services Bliss offers.
Project Goals: redesign the client’s existing desktop website to make it more intuitive, uplifting and unique
The Target Market
Based on their research, our UX team came up with a target persona for our project that we’ll keep in mind moving forward with our process:
Research
Pre-meeting Research
Prior to meeting Godwyn, we decided to look at his existing website to get a sense of his current brand. His website mainly uses a dark brown, white and golden colour palette, which conveys a seriousness and masculinity in his brand. The website also features a few images in nature, which are inconsistent visually as some images look refreshing and vibrant while others are dull and dark.
Kick-Off Meeting
In our initial meeting with Godwyn, we learned a lot about the Bliss brand and the inspirations behind it. Some of our key learnings include:
- Godwyn wants to distinguish Bliss from other burial service providers using an empathetic, comforting & open-minded personality for his brand.
- He wants to create a positive, uplifting experience for his clients, who are going through a difficult time. Godwyn mentioned he wanted to “Bring light in the midst of darkness” for his clients.
- Bliss is an environmentally conscious company — which aligns with Godwyn’s own personal interests in nature, as well as meditation.
- During our colour test, where we asked Godwyn to choose a colour palette he associates with his brand, he selected earth tones.
Contextual Inquiry
After visiting Godwyn’s store shortly after our kick-off meeting, we saw that the space stood in contrast to the website and looked to be a truer representation of his brand. It had brightly lit, white walls with lush images of mountains backdrops in nature. Visiting the store was instrumental in shaping our design directions going forward.
Gut Test
While we were at the Bliss Cremation and Green Burial store, we presented Godwyn with a range of styles of different websites in a gut test, which would give us insight into the design directions we wanted to pursue.
During this exercise, we showed the client 20 different slides, each containing a different design of a website. For each slide, Godwyn had 20 seconds to rate the design from 1 (Hates it) to 5 (Loves it).
Godwyns favourite designs include:
Rating: 4
- Godwyn thought this design looked simple, powerful and sleek.
- He loved that the hero image was full-length and encapsulated the elements including earth, fire and water.
- He would have rated it a 5 if the page was brighter, as he thought it looked too dark.
Rating: 4
- Godwyn was again drawn to the usage of a wide, full-length hero image in this design.
- He especially liked that a lot of bright, white space was utilized.
- While he was a fan of the green colour palette, he also thought that it was a safe choice to use.
- He also liked the pairing of icons with content and thought this was visually pleasing to see.
Godwyn’s least favourite designs include:
Rating: 1
- Godwyn didn’t like the colour palette used in this design — he thought it looked too plain.
- He especially disliked the use of boxes to contain content
Rating: 2
- Godwyn thought this design was more suited for a personal portfolio website— and didn’t like it at all.
To sum it up, Godwyn loved:
- A full length hero image that tied into the earth’s elements
- The use of a lot of white space
- A colour palette that included green to tie into his brand and love of nature
Godwyn disliked:
- The use of boxes to contain content
- Plain, dull color palettes
- Dark backgrounds
The Why
After our meeting with Godwyn, we set off to determine our why, i.e. what makes Bliss unique in comparison to other burial and cremation companies. We decided we wanted to focus on the themes of sustainability, bliss and positivity, and thought this separated Bliss from other companies in its domain.
Our first iteration we came up with was: To offer an experiential relief and closure for families of the deceased.
We thought the word experiential sounded formal and scientific, so we came up with a new iteration: To offer a blissful experience of relief and closure for families of the deceased.
After deciding to incorporate environmental sustainability into our why, our final iteration we came up with is:
Design Directions + Moodboards
Based on our research, we came up with three different design directions for the website. We presented these directions to Godwyn in a moodboard, style tile and home page mock-up.
Design Direction 1
For our first design direction, we wanted to convey a celebratory, uplifting and inviting mood. My team-mate, John Kwan, executed this design direction:
Visual language
Colour
John decided to use contrasting, cool and warm colours to convey a fresh, inviting mood in this design direction.
Space
As you’ll see in his mock-up, John decided to fill space with contrasting colours + a fully-stretched image. The end result is a space that feels purposely crowded and colourful.
Shape
Shapes contrast in this design direction as well, as roundedness and pointed edges are used simultaneously.
Movement
Inspired by the flicker of a candle and the continual stream of a waterfall, movement is fast and flowing in this art direction.
Moodboard and Style tile
John wanted to re-create the feeling of being at a spa using his moodboard. He used colourful imagery to evoke an uplifting, fresh mood. These same images are also taken in various spa settings, so they simultaneously evoke a feeling of warmth, comfort and relaxation as well.
In John’s style tile, we see his visual language in action, with a contrasting warm and cool colour palette and the use of pointed shapes for his icons and elements. The typography he selected for his design direction includes a classic serif for headings called PT Serif Caption and a sans-serif for body text, Lucida Grande.
After presenting this design direction to Godwyn, we learned the following:
He liked:
- The flat, pointed buttons — although he mentioned he likes rounded buttons too.
He disliked:
- The typography used for the header and body text.
- The use of different colours for header and body text; he preferred them being the same colour for consistency
- The background image used. He didn’t like that it was blurry and had candles in them. For Godwyn, this didn’t communicate a feeling of visiting a cremation and burial website.
Design Direction 2
For our second design direction, we wanted to convey a peaceful, inviting and environmentally conscious mood. My team-mate, Umaru Danladi, executed this design direction:
Visual language
Colour
Uma decided to use analogous green colours to correspond with an environmentally conscious mood in his design direction. He uses a lighter blue to contrast the green colour palette and to also evoke a feeling of calm, peace and tranquility.
Space
Inspired by our feedback from Godwyn about the utilization of white space, we decided to make use of a lot of white, open space in this design direction to again, correspond to a peaceful, inviting mood.
Shape
Shapes contrast in this design direction as well, as rounded and boxed shapes are both used together.
Movement
Mirroring the growth of trees and plants in nature, the movement is organic and slow in this art direction.
Moodboard and Style tile
To convey an environmentally conscious, peaceful mood, Uma uses a lot nature imagery in his moodboard — with photos of grass, vines and a green mountain backdrop. These images are contrasted with white rooms — which invite a feeling of calm and peace.
In Uma’s style tile, he communicates his visual language using contrasting design styles for his UI elements including filled in/outlined icons and rounded/boxed-in buttons. He also includes his colour palette here and we again, see the analogous greens contrasting a light blue hue. Uma uses a slab serif typeface, Roboto Slab, for headers and a sans-serif Lucida Grande for the body text.
After presenting this design direction to Godwyn, we learned the following:
He liked:
- The Slab-Serif typeface used for the headers
- The use of white space to show content
- The translucent, green header
He disliked:
- The picture used — he thought it looked bleak
Design Direction 3
For our third design direction, we wanted to convey a comforting, invigorating, peaceful and environmentally conscious mood. The final design direction was executed by myself:
Visual language
Colour
I had the elements in mind while designing this art direction, especially earth and fire, so I decided to reflect this in the colour palette I selected. I chose the greens and clay beige to represent Earth and the orange to symbolize fire. While using a green colour palette is an obvious choice to portray an environmentally conscious mood, contrasting these colours with an orange hue is not. The orange glow is a distinguishing factor; it invigorates the palette with its warmth.
Space
Reflecting the vastness and openness found in nature, I wanted space to look wide and open in this design direction.
Shape
To evoke a feeling of calm and peace, I decided to emphasize rounded shapes with soft edges in my design.
Movement
Reflecting the organic symmetry found in nature, I wanted movement in this direction to look symmetrical. I also wanted things to move fluidly and gradually throughout the website, similar to water in a small creek.
Moodboard and Style Tile
Since I wanted to convey an environmentally conscious mood, using nature imagery in my moodboard was essential. I included an image of a forest in the autumn, for example, because I thought it captured the blissful, uplifting mood we were after. Although plants and trees are dying in the autumn, the change in seasons — with its orange, yellow and red hues — is beautiful and uplifting to observe. I also wanted to convey a feeling of comfort using images of blankets and burning incense, and peace using meditation in nature.
In my style tile, I’ve included the palette I talked about earlier — with greens being contrasted by orange accents and beige/white neutral colours. I’ve applied my visual language to my buttons and iconography using smooth, rounded shapes. For my typeface, I selected Poynter Display for headers and Lato for body text. I selected Poynter Display because it’s a serif typeface with a classic look to contrast the more modern sans serif body text, Lato. Lato was selected because of it’s smooth semi-rounded shape, and its legibility at a small size.
After presenting this design direction to Godwyn, we learned the following:
He liked:
- The orange buttons because it looked “unique and edgy”. He thought it stood apart from other green burial and cremation websites he’s seen.
- The background image used because it includes both mountains and water. He thought the image itself looked bright and uplifting as well.
- The serif typeface used for headers
He disliked:
- The reflection of water sitting behind the icons — he thought it made the page look too busy.
After reflecting on the three different directions presented to him, Godwyn selected my design direction as he felt it included the ‘wow factor’ he wanted for his website. He especially liked the colour palette and background image used in my mock-up. While we moved forward with this design direction, we made some changes to accommodate a few other things Godwyn wanted — including utilizing more white space in the website.
Style tile
The final style tile corresponding to the chosen design direction is above. We changed the header text to Merriweather because it had more weights — which would be helpful in creating hierarchy in our content if we wanted. Additionally, we changed the colour of the icons to green to better contrast the white background of the website. We also ended up using three different colours instead of the original six. Our final logo design is included in the style tile as well, which I’ll speak to more in the next section.
Logo design
During our initial client meeting, Godwyn mentioned he wanted to continue using a butterfly in his logo because it tied into the story behind his brand. He associated butterflies with a feeling of bliss that he himself experienced during the loss of a loved one. His logo currently looks like:
With this in mind, we began iterating different versions of his logo on paper:
After numerous paper iterations, we mocked up our favourite logos on photoshop and illustrator, and came up with the following:
John’s logos design:
- Beginning from the top left, the first logo simply contains a butterfly, with its wings making up the B of ‘Bliss’.
- The logo next to it is meant to represent a butterfly and urn at the same time.
- The logo on the top right also uses the butterfly’s wings to make up the B for ‘Bliss’, though it’s different in that the wing disintegrates into small pieces. John thought this drew a parallel to ashes disintegrating in the air; he also thought the disintegrating pieces looked like leaves as well.
- The typeface used for all three logos is script, to convey a personalized and human touch to the brand.
My logo design:
For my design, I decided to narrow in on one paper iteration to perfect it as much as possible prior to presenting it to Godwyn. I used colours from our palette in the final style tile to ensure branding is visually consistent. In the butterfly design, its wings symbolize leaves as well — to tie into the brand’s sustainability focus. The font pairings include Tangerine script to create a personalized, custom feel to the brand, and Lato for visual continuity and legibility.
Uma’s logo design:
For Uma’s logo design, he created an elegant butterfly that tied into the current branding and aesthetic of the company. He used an earthy brown colour paired with a script font to execute his logo design.
Final logo:
After presenting our logos to Godwyn, he liked the butterfly I designed because of its elegance and relation to sustainability. Though he liked Uma’s typeface more, so we decided to pair my butterfly design with Uma’s typeface to create the final logo.
Final Website Design
UI design
In the final week of our project, the UX team handed over the mid-fi screens for us to design in hi-fi. With our design direction set and logo complete, we were ready to get set and design!
In terms of UI, a few key elements of our design include:
- The use of imagery throughout the website. Majority of our screens include, at least, one image on its page. The imagery we selected forms the basis of our design; we carefully curated them to reflect our desired uplifting and environmentally conscious moods. Since the imagery creates a natural colour palette for our website, we decided to predominantly use two colours from our original palette, green and orange, to complement them.
- A fading visual effect for banner images. On each page of the website, we’ve included nature imagery at the top, with a fading effect that blends into the white space below it. Rather than abruptly ending each image, we wanted it to organically flow into the rest of the page.
- Custom-made iconography. My team-mate, Umaru Danladi, custom designed all of the iconography we have on our website, a total of 13 icons. For a 3-week time span, I’d say that’s impressive! Without boxes to contain content, the iconography helps us differentiate sections of the website in an organized way.
- A borderless header. Up until a few days before our project was due, our header was bound in an orange box. I thought that the orange header clashed with the rest of the website and didn’t correspond with the chosen design direction. We wanted the website to look open and airy, and the box containing the header did the opposite of that. I decided to ask my team members what they thought about removing the orange header, and it turns out we were all on the same page about it! I’m glad I asked because we removed it, and it made a world of a difference for our final design.
Speaking of final design, view the full prototype in the link below:
Do you think we solved the problem using our design solutions? Let’s find out! First, let’s revisit the challenge:
Challenge: Godwyn’s website is content heavy and challenging to navigate in its current state. He wants to simplify it, especially in relation to his price lists as they are difficult to find.
Project Goals: redesign the client’s existing desktop website to make it more intuitive, uplifting and unique
Utilizing white space to contrast both the content and the bold, green iconography helps make the website more intuitive and easy to navigate. How is that? The contrast helps identify sections more easily; the icons and accompanying content ‘pop’ as a result of it. Additionally, for the price-lists specifically, (see screen in above section for an example), alignment was especially important to utilize in identifying them more easily. We added dots as well, so that people could essentially trace their finger to match the product/service with the corresponding price. Overall, I think that the use of nature imagery and a green/orange colour palette creates an uplifting website that differentiates itself from others within its domain.
For future considerations, I’d change some of the banner images as I think a few of them are too similar to each other. I’d also also consider creating a fading effect for the footer as well.
If you liked my case study, please show me some lurve and send some claps my way — I’d appreciate it! I’m also interested in any feedback you might have, so feel free to leave any comments as well.
Thanks for reading,
Fatimah
