Responsive Website Design
Using Figma, myself and 4 other team members were recruited by Living Beam to design a platform for individuals to experience a virtual candle lighting in memory for loved ones who have passed. Inspired by her own grief journey, the client found a connection to her mother through lighting a memorial candle. She therefore wanted to help others find this same sense of connection. By lighting a virtual candle, users can honor, pray, and celebrate their loved ones in a special way that is most meaningful to them.
After meeting with the client, the team took away 3 main goals the client wanted to try to achieve:
Build an app of a virtual experience of lighting a candle for eCommerce website
Build platform for individuals wanting to heal or experience a sense of connection
Create an experience of community through spiritual wellness (different healing modalities, psychology, mysticism)
We focused first on adding a candle lighting experience through the Living Beam candle eCommerce website. Upon doing some competitive analysis, we found a couple of things:
1) Sites like this were scarce
2) The one site we did find doing the same idea felt a bit more dark with darker images used to perhaps symbolize mourning.
The client emphasized her need for something that felt more light and bright. We focused on this throughout our thought process in designing a responsive website. Grieving the loss of a loved one is important. It’s a necessary emotional reaction that, in its own way, helps us celebrate life. Keeping a light and bright tone inspires this sense of celebration.
Problem: How can we add a meaningful candle lighting experience to the Living Beam platform that allows users a sense of connection and healing from grief?
Role: User Experience Designer (Including: Research, Wireframing, UI, Prototyping, and Testing)
Type: Responsive Website
Timeline: 6 weeks
Understanding the Problem
This project focused on a topic of grief that I was familiar with as an Occupational Therapist, particularly working with children. Occupational Therapists use meaningful activities to help all people (children & adults) participate in what they need and or want to do in order to promote physical and mental health and well-being.
According to AOTA, "it is estimated that 1 in 20 children will lose a parent by death before 18 years of age; 1 in 5 families will move each year; and 1 in 3 children 18 years or younger have divorced parents (McGlauflin, H. (1998). Given all of the possible situations that bring about loss for children and youth, it is likely that occupational therapy practitioners will routinely interact with children who are grieving."
We started this project by conducting an initial round of Secondary Research and I, in particular, focused on sourcing background information about Grief and Loss from AOTA due to my experience.
Key Insights from AOTA
Impact on Occupational Performance from Grief and Loss:
Social Participation - Changes in behavior, such as irritability, acting out, social withdrawal, or clinging to parent.
Activity of Daily Living - Changes in appetite and the development of unhealthy eating habits, bedwetting, or alcohol or drug abuse.
Education/Work - Difficulty following directions or concentrating on schoolwork or changes in academic performance. and challenges assuming responsibility at internships or volunteer or paid opportunities.
Play/Leisure - Limited participation in activities of interest (Ayyash-Abdo, 2001).
Sleep/Rest - Altered sleeping patterns.
While these mentioned are directed specifically at children, you can imagine how these same occupations could be affected by all ages in the population. You can then understand that finding ways to help support others through the grieving process would have a tremendous positive impact on wellness.
Some of the ways that Occupational Therapists address Grief and Loss with their patients is exactly part of what Living Beam intends to establish:
1) engage the person in meaningful activities to foster the expression of feelings (e.g., journaling),
2) help establish routines (e.g., organizing school materials),
2) maintain feelings of wellness (e.g., yoga, taking daily walks),
4) therapeutic use of self - Sometimes children worry that they will forget the person who died, so it is important to help the child remember what was valuable in the relationship and preserve such memories through stories, pictures, and mentioning the person in everyday conversation. It is also important to anticipate grief triggers, such as anniversaries of important events, the birthday of the deceased , and favorite family meals. Such triggers can bring about strong emotions. Reassuring children that these experiences are natural can help normalize the experience (Schonfeld & Quackenbush, 2009).
The team analyzed one competitor that appears to be doing the same kind of experience for those looking for healing and comfort when dealing with death. We learned that the site was doing some really amazing things on connecting people together, especially around the world. What was lacking was a sense of celebration. The website felt dark with a sense of mourning. While it is important to experience these emotions per our research, it is also important to support healthy grieving and minimize further stress. The presence of light and gentle images/colors can help uplift those through a heavy healing process.
How Might We
Based on our client meeting and research, we went back to review common problems and goals. We used the “How Might We” method to identify opportunities. By framing the challenge as a "How Might We" question, we were able to set ourselves up for solutions to solve our client's needs.
How Might We Help Those Grieving...
...feel a sense of connection to their loved ones lost?”
...foster healthy expression of their feelings?”
...remember and perserve cherished memories of their loved ones lost?”
...connect to others that may share their feelings for support and comfort?”
...share their feelings, memories, emotions to promote healing and ways to cope?”
After the our client meeting and research, we decided to think through client's main priorities of the experience and the flow to solve these few problems:
Users should have time when going through the light a candle process to breath and reflect on the connection between those who have passed and themselves. Solution: Design a screen that prompts users to pause before continuing to dedicate a candle.
Users should be able to save and share a link of their memorial candle to others in order to establish a sense of connection. Solution: Make buttons highly visible and prominent so that users can see they can partake in this functionality throughout the process.
Users should be able to choose different languages (e.g. English, Spanish, and Portuguese). Solution: Allow users to see language selection on home screen.
Users should be able to seen other people's candles and tributes from all over the world. Solution: Design a gallery of images of the candles where you are able to click on the candle and see the person's tribute.
Users should walk away with a sense of emotion. Solution: Add a music feature as the experience of music across cultures has been a science-backed tool for well-being as it can trigger multiple emotional responses depending on beat and frequency.
Users should have a simple and friendly experience. Solution: Allow for plenty of whitespace and calming colors.
Users should be able to experience the virtual candle light as if it were a real candle. Solution: Incorporate screens for (0, 24, 48, 77 hours) where users can come and go and see their candle melt as a real candle would.
Users should be prompted to donate as donations keep the experience going. Solution: Include prominent donation buttons but also explain that there is no obligation and the experience is in fact free.
After gathering images of inspiration from Instagram, Dribbble, Behance, and Pinterest for what we wanted to model the Light a Candle experience after, we started to sketch out ideas, brainstorm, and thing about how each user story be cohesive across the experience while keeping in mind the needs of the user.
We developed wireframes that were consistent with our User Stories in order to understand how we could position the information and solve the problem of a connected, healing experience for those that are grieving while hashing out functionality.
The client mentioned that she would eventually like to create an app for this experience. In order to think about this, we first wanted to see how we could design the website into a mobile viewpoint. When designing for desktop or laptop computers, the content is in landscape (horizontal) mode. The screen is wide, content can be laid out in columns, and there’s much more flexibility to design. For mobile, things get organized in a vertical manner which is sometimes harder to conceptualize when trying to transfer a variety of functionality for the experience from desktop to mobile.
To start preparing for the high fidelity screens, our team worked together to make sure we were on the same page about what the imagery, colors, vibe, and how the UI would look.
The client was specific about wanting a warm, inviting, and modern approach to this experience. We therefore kept in mind the original color palette and typography of the Living Beam brand while incorporating an uplifting and clean approach to the Light a Candle concept.
The client had previously worked with a design team who had come up with colors and typography for the Living Beam property. Drawing inspiration from these design concepts, I tweaked the color scheme a bit and added a slightly softer palette to represent a more healing and modern feel for the site.
This guide would have all elements of the design defined so that our team and the website developer could stay consistent and cohesive when working on the project.
Website UI Design
After going over logistics, we could enter the high fidelity mockup stage. We wanted a simple, clean, and modern feel that would work responsively on web and mobile. Our biggest factor to keep in mind was how to prepare each frame for export, as we would be working with a developer to bring the site to life.
Futhermore, we went through about 4 different versions of our wireframe mockups before we decided on the final design.
Mobile UI Design
We adapted our website design for mobile and paid close attention to the details in order adhere to the 4 C's of design: consistency, continuity, context, and complementary.
We have had meetings with the stakeholders to validate that the design met the business needs. Once that is approved and all changes are made to client satisfaction, it will be handed off to the development team for build.
I know that design is a work in progress and isn’t going to be complete right away. The magic is in the revision. We are currently awaiting feedback and approval on high fidelity mock-ups. With every iteration, we will give the user a new experience.
What have I learned from this project?
From this project and my previous project, I learned I really enjoy working with a team and brainstorming ideas. Since I am working remote and on the West Coast, maneuvering between time zone schedules and learning different mediums of communication is imperative. It's important to stay flexible and go with the flow as much as you can as if there is anything that is constant in design, it's change. Slack has been a vital tool for my team projects and has played a huge role in making sure that everyone stays on the same page.
In personal projects that I've run solo, I was able be scrappy and run my own testing. However, I've yet to be able to run A/B testing on client project. I would had loved the opportunity to test different design ideas we had, given the time, to compare which design was easiest for users and produced more engagement with the lighting a candle experience.
Lastly, as we receive feedback from the client, we will continue to expand upon this experience and design. I look forward to talking more with the stakeholders, revising some more, and developing the website further into an experience that is truly meaningful for users.
"Great work! Overall this is a really good starting point."