ValWell Website
ValWell is a personal brand website that provides information about yoga classes and massage therapy. The design of the website looks increasingly outdated and parts of its user experience fell short of expectations. I set out to redesign the website so it can attract new clients and increase profit of the company.
MY ROLE
I aimed for creating a brand-new design system to ensure ValWell encompasses best-in-class usability
and aesthetics across all corners of the website and its mobile version.
I led the project and worked on all aspects of the new design system, including its UX and UI. For
this project, I used the design thinking methodology: empathize, define, ideate, prototype and test.
EMPATHIZE
WITH A STAKEHOLDER
Meeting with the stakeholder helped me to understand her business challenges. Together we identified goals of the website and aligned on expectations and constructed a shared vision for the website. Following this, I crafted an experience strategy outlining my phased approach and direction for the website. I made an Experience Map #1 to describe a process (from a stakeholder's point of view) from user's desire to find yoga classes/massage therapy to joining yoga classes/visiting a massage therapy.
EXPERIENCE MAP #1
WITH USERS
I conducted a range of online interviews with 7 representatives of the target audience. Questions were based on the Experience Map #1.
DEFINE
I made an affinity diagram. I took quotes and notes from the interviews and wrote each of them on a separate Post-its. Then, I reorganized them according to similarities, creating themes as I went along. This work helped me to make a User Experience Map to visualise and communicate the users end-to-end experience across various touch-points with the scheme. This allowed me to represent user pain-points and see where I needed to focus my attention. Mapping out the users emotions was key to setting client expectations about the aspirational emotional state I was aiming to design for.
PERSONAS
My research revealed that the concept of searching massage therapy or yoga classes represented
something different to users of the scheme. I discovered a couple of important things: one wasn't
mentioned in the interview with the stakeholder, and another was mentioned very often, but the
stakeholder was sure that it was not important.
After designating persona types and aligning this with my phasing strategy I was able to prioritise
who I would be focusing on supporting the 1st part of the website and the 2nd part of the
website.
I used personas constantly throughout the project to guide design decisions, priorities, and create
empathy.
IDIATE
I synthesized data from my research and analized competitors' websites to consider not only what the
website should do, but also how it should feel. Knowing who exactly I was designing for allowed me
to ask myself how the website can solve users' problems to achieve stakeholder's goals. I imagined
ideal experiences and focused on how my personas think and behave rather than getting into specifics
about interfaces, technologies or business goals.
Together with the stakeholder we brainstormed the different things people do before, during and
after searching massage therapy or yoga classes. I categorised and segmented the tasks into
behavioural affinities and aligned them. This gave me a way to visualise what existing functionality
and content would be useful, what tasks needed supporting, what opportunities were available to
innovate and also what could be discarded from the existing website.
Afterwards, I entered all the ideas into a spreadsheet and prioritised them against my personas
needs, tech feasibility, and business objectives. This helped me to make a structure of the website.
LOW FIDELITY PROTOTYPE
I made a sketch prototype to test our ideas and solutions quickly. I generated stacks of ideas about the arrangement of UI, functional and data elements, and interactive behaviours. Hurrah! Little pieces of this puzzle began to piece together.
TEST
I think that early testing is very important because it allows design components to be evaluated
prior to extensive development efforts.
I had to test if the architecture of the website and a navigation hierarchy was clear for the users.
Tree testing is the best here because it provides goal-oriented verification of navigation
hierarchy.
I made a set of tasks and asked 7 representatives of the target audience to fulfill these tasks.
While they were answering my questions, I was trying to understand what was going through their
minds. And if the task was failed I asked about why things didnt work and what was going on inside
their head.
NEW IDEAS FOR THE WEBSITE
I analized data after testing and decided to go back to the ideation step, because it was clear that I had to change some points of the navigation hierarchy.
HIGH FIDELITY PROTOTYPE
I used Figma for high fidelity prototyping. I made a mobile version first, because according to data from google analytics an old version of the website was mostly used with a smartphone. This is a responsive website, so it can be used both with a computer and a smartphone. The gallery below shows the final website for launch.
MAKE IMPORTANT THINGS CLEAR
The main goal was to help users to find all needed information and quickly make an appointment or sign up for a trial lesson. The main screen has been designed to allow users quick access to the menu and contacts. The size of the buttons “Menu” and “Contact me” makes tapping easier. The order in the menu is based on ease and logic of users' search.
DESIGN FOR ALL
The interface design strives to be confident. It does not contain UI-bling or unnecessary elements.
I used readable typography and high-contrast colors. All texts and elements are good for a screen
reader.
All my design decisions help to exude a sense of confidence in the design.
THE IMPACT
Compared with the previous version of the website, my newly designed website increased the conversion rate by 20%. The stakeholder also got more new intrested people and clients comparing with the period when she had the old version of the website.
PERSONAL CHALLENGE
This was the first time when I used knowledge about inclusive design for my project. I was nervous to offer my ideas to a stakeholder. I proved the importance of it and the stakeholder supported my ideas.
