Crafting a new light
1-week solo concept project for a holistic healing and meditation centre in Manchester
The Client
Light of Hope is a holistic healing and meditation centre in the Manchester area. It consists of a group of committed people who work together to provide healing and teaching. Their mission is to offer hope, healing and meditation to all, through a holistic and heart-centred approach. They are a Community Interest Company (CIC), who use their profits and assets for the public good. The organisation is heavily reliant on donations, especially during current pandemic times.
The Problem
The current website lacks structure, an intuitive navigation and a strong brand identity. It is incredibly difficult to locate information about the company itself, the teachings it offers as well as any information or booking for the classes and events it holds.
The Challenge
Re-skin and re-brand the current website to better reflect the community space, increasing its accessibility for users and fundraising potential.
Deliverables
Desktop Research, Brand Values, Personality Traits, Brand Affinities, Tone of Voice, Moodboard, Colour scheme, Typography, Logo Design, Style Guide, Sketches, High-Fidelity Screens Across Three Viewports (Mobile, Tablet, Desktop)
Outcomes
- Project completed on time and to quality
- New simplified taxonomy
- Strong brand identity
My Approach
For the purposes of this project, my main efforts were concentrated on the latter 2 phases of the UX design process, namely the design and deliver stages. I started by diverging and gathering as much information and insight as possible, then I distilled those insights into my final design.
My Role
As this was a solo project, I had full creative freedom and happily took on the role of Lead UI designer. This project was a great challenge for me to create something that was beautiful yet functional.
Discovery
The discovery phase began by understanding Light of Hope’s mission and target audience. I also explored the meditation and holistic healing space, to see what other competitors were doing and how I could use this insight to set ourselves apart.
Research
Light of Hope are a Community Interest Company (CIC), who use their profits and assets for the public good. The organisation is heavily reliant on donations, especially during current pandemic times. I conduced an analysis of the current website to assess the status quo and these were my findings
- Non-responsive design
- No clear ‘calls to action’
- Extremely text heavy — no hierarchy of information
- Navigation is extremely confusing and the user can not locate what they need to easily and efficiently
- The visual aesthetics is very dated in its use of color and typography
- There is an overall lack of brand identity
Having conducted my research, the first page I decided to focus on was the homepage. This is because it is the first impression users get of the company, thus the most important. Currently, it is extremely text heavy, lacks hierarchy and a strong brand identity. The second page I deemed important to re-design was the meditation page, as this is one of their key offerings, and with the current design it is very unclear what their services are.
Starting the re-brand — Who am I?
To get a better understanding of the brand, I used a number of visual design techniques to establish its values, personality and traits.
First, I explored words that would best describe the company. The key words I felt that were most reflective of the brands values were
- Healing
- Mindfulness
- Holistic
- Modern
- Community
After deciding on these key words, I went ahead and started my word associations which would later help me with the development of my logo. Word associations help to come up with other possible meanings or translations for a specific word. I did this to further my horizon and understanding of the brands values.
From this, I came up with statements that further helped me define the brand
- Calming and tranquil but not boring
- Knowledgeable but not inaccessible
- Supportive and compassionate but not overbearing
Furthermore, I looked into the meditation space as a whole to identify who could be possible brands that Light of Hope could partner with. This helped me define the direction of the identity even further. Brands I considered were a mix of yoga brands as well as mindfulness/mediation apps. I picked these brands as their own values and ethos aligned very closely with the brand values I had identified earlier.
- Lululemon
- Outdoor Voices
- Beyond Yoga
- Maduka
- Headspace
- Calm
Taking this one step further, I created a ‘tone of voice’ for Light of Hope, which would embody the brands values and determine how the brand would speak to its audience.
“ We welcome everyone in our community with open arms. We approach everything we do in a calm, respectful way to reflect our practice of meditation and mindfulness. We are a dynamic, expressive and inclusive community space with a calm, modern exterior. We invite everyone to come experience the healing properties of meditation and mindfulness.”
Competitive Research
In order to get a better idea of what other companies in the meditation and healing space were doing in terms of branding, look and feel, I set out to explore various websites. I concentrated my search for companies in the Manchester area, seeing as these would be the closest and biggest competitors. My observation was that most other meditation companies lacked a clear brand identity. The majority of them also used a lot of cheesy, not inviting pictures and icons in conjunction with a lot of text, which was hard to read. There was not only an absence of hierarchy and organisation on the pages themselves but also a lack of overall structure to the sites.
Define
Moodboard
Next, I set about searching for design inspiration that evoked my key words I had chosen earlier and fully embodied the brand I wanted to create for Light of Hope. I gathered inspiration from websites, illustrations, paintings, business cards and any other creative material I could get my hands on. I came up with the following moodboard
Logo exploration
I wanted the logo to have a calm, inviting, but modern look. After putting together my moodboard, inspiration struck for my logo. A simplified sun — made out of a half circle, representing spirituality and lines for rays representing light. I then designed a simple text mark to accompany this icon and stitched the 2 elements together to form the logo. I then made sure to develop 3 different color ways (black, white and in color), which would allow flexibility and accessibility for the brand across all designs.
Style Guide
Having created my moodboard and logo, I went about choosing my main colours, highlight colours, typography and any other graphical elements, including buttons I would use throughout the site. I used the images I had gathered for my moodboard as inspiration for my colour ways, and once those were chosen, picked a sans serif and serif font that would nicely accompany this. Following, I created a style guide which would ensure consistency across the site and would make it easier for a developer handover at the end of the project.
Develop
Design Phase
This phase followed an iterative process, which started with sketches and due to time constraints, evolved quickly into high-fidelity designs. I then tested these high-fidelity designs and iterated on the feedback I received.
Initial Sketches
My initial sketches were concentrated on creating as many variations as possible, so I could explore how the content could be laid out and presented. It was about quantity over quality to get my first thoughts down. I then iterated on those and came up with various layouts which would improve the hierarchy of the site, breaking up the content — ultimately making it more digestible and easier to navigate for the user.
Testing
Having completed my first round of high-fidelity designs, I went out to test these with multiple users to receive feedback. I did this so I would be able to iterate upon the current designs, improving the user journey, accessibility, usability and experience through the site.
Iterations — Mobile
Feedback I received for the different viewports were the following:
- The main image and text were too small on the homepage
- The image on the meditation page was too small and the header felt disconnected from the text
- The call to action button was not very visible in the current color
- The play button for video content did not stand out enough and got lost over the image
- The spacing was too tight — users wanted more breathing room
Iterations — Tablet
- There was too much text on the homepage
- The mission statement was lost and not prominent enough
- The ‘what we offer section’
Iterations — Desktop
- Increased the size of the image, header and text so it would be easier for the user to read and navigate
- Altered the play button on the videos so its was more prominent and visible
Deliver
Final Design
Having gathered the feedback from my users, I analysed it and took it into consideration for my final designs which you can see below
Conclusion
Next Steps
Considering this project was done in such a short spam of time, some things I would still like to tackle and consider going forward are:
- Add more design elements such as highlighting key words, to tie this back into the mood board — also giving it a more modern look
- Design more pages — to see the flow of the site better and how everything fits together
- Usability testing — gather people’s feedback on ease of use of the site. Do an A-B testing to compare the before and after
Challenges and key learnings
I thoroughly enjoyed working on this project. Given my previous background in graphic design I took it on with ease. An area I struggled with was which content was important enough to keep, and which had to be taken away to simplify the site to make the content more easily digestible for the user. Also, the standard practice is to work yourself up from mobile to Desktop view, but I found this challenging. I was much more in a groove having designed Desktop and then working my way down, so this is something I would like to improve upon for my next project.
