Background
I worked on redesigning Save Our Street Dogs’ (SOSD) website, which proved to be an interesting journey.
Save Our Street Dogs’, or better known as SOSD, is a non-profit organisation that has a clear mission to eliminate cruelty and abandonment of animals and to improve their lives through rescue, education and advocacy. This is achieved through a whole myriad of arrangements, including raising fundings, organising outreach events and caring for Singapore street dogs.
Lean UX Approach
As this was a school project, I had to employ the Lean UX approach as I did not have access to the SOSD team. As a result, I had to make some assumptions on the business outcomes, users, user outcomes and features, and hypothesise what users needed, before testing out with real users within a short time frame.
Five Elements of UX
In this project, we also went through the five elements of UX, namely, the strategy plane, scope plane, structure plane, skeleton plane and surface plane.
Business Goals
I started off by visiting SOSD’s website and reading their annual reports to understand their business model. To better visualise and connect the dots, I used the Business Model Canvas framework, which was helpful in highlighting how SOSD needed to target a range of audiences for their business model to work.
To elaborate, we assumed that SOSD’s primary business goals were to:
- Rescue rehabilitate and rehome stray dogs to give them a second chance at life
- Receive support as SOSD is a volunteer-run shelter with no funding
Therefore, SOSD had to target a range from people who donated money or in-kind, to people who helped to temporarily foster the dogs etc. This is mapped out in the 9 components of the canvas:
For the purposes of this project, I will focus only on the people who were looking to adopt as the long-term impact of adoption is more evident compared to fostering and donation.
Product Objective
The product objective had to cover the business goals, brand identify, and the success matrices, i.e. how do we know if our product has been successful in reaching the goal(s). By analysing SOSD’s website, I deduced that SOSD’s website was targeting to potential adopters, people who are still on the fence about adoption, decide whether they should move forward with their decision. This meant that there were opportunities to improve the user experience in a way that would help to increase the rate of adoption. For instance, by easing the process of information gathering and adoption, and/or bringing more potential adopters to the site to encourage them to adopt, if suitable.
User Needs
After better understanding the business outcomes, I had to form assumptions of my users with a proto-persona. The reason for using a proto-persona, rather than the traditional persona, is because we we did not have access to SOSD’s staff members. The proto-persona was revised as we gathered more information along the way:
Validating Assumptions
To validate assumptions, we came up with a quick survey using the Lean Survey Canvas framework and managed to gather around 10 responses within 3 days. It was a fast way to gather insights from my users.
Some of the questions include:
- Would you ever adopt a dog?
- What stops you from adopting a dog?
- What would encourage you to adopt a dog?
- How do you decide which organisation to adopt your dog?
Here are some interesting insights:
- 100% of interested adopters would decide on which organisation to adopt from by word of mouth
- 71.4% said that they would be encouraged and would decide on organisation if their values aligned
- 57.1% also said that they would be more inclined to adopt if there was more information on adoption process
These insights helped to reshape some parts of our proto-persona to adapt to the research findings.
Feature Hypothesis Statement
After coming to understand the business goals and user needs, I could come up with features in our product that could address these needs. These were expressed through hypothesis statements that covered the business outcomes, users, user outcomes and features:
- I believe that SOSD would be able to have more adopters if they state their values clearly on the front page of their website.
- I believe that adopters would be more inclined to adopt a dog if the steps for adoption are clearly laid out in the first section on the information for adoption.
- I believe that adopters would feel more assured about adopting a dog if they see the many success stories SOSD has featured clearly on their website.
- I believe that SOSD would be able to have more interested adopters if they spread their public awareness by allowing users to share their success stories on social media.
We then used the Effort versus Impact Scale to prioritise the many different hypotheses and to narrow down on which features to test first. By splitting them into quadrants, I ranked the importance of the features into user needs .
Putting them in a linear fashion in the “MoSCoW” order:
Some of the must have features include:
- Adoption timeline and tracker for users to understand the process better and stay up to date with their progress
- Social sharing of success stories and a section for successful adopters to share tips and tricks for new adopters
Some of the crazier ideas that did not make it include a tinder app for the dogs and adopters to swipe and match. This was a fun round of coming up with ideas and features for the site.
Content Inventory
Before we started wire-framing, we started by listing out the current pages of the SOSD website in a Content Inventory. This allowed us to take an overall look at all the pages that are currently available. With this, I could examine, assess and evaluate the quality of the content listed in the inventory.
I then determined whether to leave the content as it is, update it or remove it. As we have decided to focus mainly on the adopters and adoption process, I removed most of the content relating to the other users to focus more on the adopter’s needs. I added more sections to explain the adoption process and make it clearer for the potential adopters when they are navigating the site.
Information Architecture
Due to the pandemic, we were not able to meet up with many users. Thus, I conducted an initial card sorting to categorise and help arrange the content on the website. This could help ensure that users would be directly connected to the information they are looking for. Some of the changes include:
- Moving the ‘Sponsoring’, ‘Donating’ and ‘Fostering’ sections under the ‘Take Action’ section to reduce the number of sections and streamline the information
- Adding ‘Success stories’ as a feature on the home page and more extensively in ‘News and Stories’
- Removing the ‘Thanking our Donors’ and ‘Community Outreach’ section
- Moving ‘What we do’ under ‘About Us’
The Lean UX method has been rather interesting — especially since we’ve started from an assumption rather than from research. I am definitely able to appreciate the usefulness of this method, compared to the more common design thinking approach, as this would allow us to help an existing organisation when we do not have access to their staff.
Do check back on our progress soon as we embark on the next steps!
After the break!
And…we’re back! We followed up with content framing. The idea was to think about what are the critical pieces of content that had to go into the various pages, and how to order them in a logical manner most easily absorbed by our users. Note that at this point, we haven’t actually started on the wire-framing, so there are no design components. The focus of this exercise was for the critical pages of the adoption flow.
Interaction Design
To improve the connection between the user and our site, we took a closer look at the 5 dimensions of Interaction Design. In our case, we see a lot of potential in telling more compelling and moving stories in the stray-to-adoption journey. Some of our considerations could be:
- Words — Persuasive and caring
- Visual Representation — Pictures of successful adoptions and happy dogs
- Physical Objects — Designed for laptops
- Time — Short periods throughout the day to check on progress of adoption or new dogs
- Behaviour — Feel inspired to adopt and help out the stray dogs
Interface Design
We are now ready to think about the interface design of our website, with the the fundamental principles of interaction in mind.
Firstly, to identify the areas we should take note of when redesigning, we conducted a website audit according to those principles and tried to keep in mind how our targeted users would interact with the product.
Simplifying the Menu Bars
The Navigation Menu is overly crowded and that makes it confusing for the user when navigating the page for the first time. The amount of information may overwhelm them and stop them from finding out more.
There are also many different coloured and types of call to action buttons and it would be less likely for users to know which buttons to click.
The call to action is hidden within a huge chunk of text and is not stated clearly as a button. Users would find it difficult to find out where they should click to indicate their interest in adoption.
Navigation Design
To ensure that our users would be able to complete the job to be done (i.e. submit their interest to adopt a chosen dog) smoothly, we mapped out the navigation journey in a user map. The user map showed how each step was linked to another via lateral, forward or reverse navigation:
Information Design
We made a few decisions about how we would like to present the information to our users:
- Friendly tone
- Keeping it short for ease of understanding
- No technical terms, since they don’t mean anything to users
- Emphasis on the welfare of the dogs (e.g. being upfront about why the user’s data needs to be collected)
- Focusing on the most important mission — to adopt SOSD’s dogs
- Intentional imagery that expresses the mode of the page
Solution
Here are some examples of how we incorporated it to our design:
Leading users to find out more about SOSD and how they can help
To immediately catch the attention of our users, we went with a strong hero image overlay to create contrast with the yellow adopt now button. By making the adoption button clearly visible, it would encourage people to find out more about adopting the stray dogs, bridging the business goals and user needs. This is aligned to our business model canvas that prioritised adoption as SOSD’s most important mission.
Driving users with compelling stories
In our interviews with users, we found out that most users would be moved by success and true stories from past adopters. Thus, we decided to include it in one of the sections of the homepage to encourage users to find out more about adoption through compelling stories instead of just having the clinical steps for adoption stated out.
Thumbnails were chosen selectively to allude to more information and provide a peek into the content of other pages:
This is followed by a section showing a few featured dogs of the week. These could be randomised to put all the dogs from SOSD in the spotlight
Thumbnail used as a sneak peak into the content of other pages (i.e. detailed page of each dog). The use of the actual dog image to reinforce a connection with the to-be-owners, and also as an additional check that the applicant knows which dog they are applying for.
Our layout relied on fundamentals of a column grid, with a hero image at top that ‘breaks out’ from the grid due to its importance in setting the tone for the whole page. The two pages’ hero images below evoke a different set of emotions:
This is also consistent throughout the news and stories that SOSD might choose to post about, including the success stories.
When the users click on the Adopt Now button, they would be brought to the Adoption Overview page where they can find out more detailed information about adoption and the steps they would have to take.
Once we’ve tugged at their heartstrings of our users, we will want to encourage users to pick a dog that they may be interested in adopting, and provide them with useful information.
After some research on the dog of their choice, they would have to go through an adoption checklist before they are brought to the form to register their interest.
Once the form is filled up, the users would receive feedback that their form has been successfully submitted.
Sensory Design
Let’s now take a step back to understanding the overall look and feel of the website. SOSD’s current colour scheme of red, hot pink, green often ‘fight’ each other for attention. The red and green can also give off a feeling of warning to the users.
We looked into some possible options to pivot our colour scheme towards, as seen in our mood board. Our aim was to create something fun and delightful, just like how it should be when welcoming a new member into our family. We eventually picked the yellow and blue for something upbeat and fun:
We did not include sounds and touch in our sensory design. Instead, we felt that users should definitely take the chance to visit SOSD’s shelter to see, feel, touch (and even smell) the dogs that they are considering to adopt, to make a good and considered decision.
Conclusion
With that, the five ‘planes’ of UX have taken flight. It has been a really insightful journey getting to understand how users think and navigate their way through a website. It has been an intense 12 weeks of this Lean UX journey and I honestly had fun trying to improve the user experience while navigating through the SOSD site.
I hope you’ve had as much fun and insights as we did while reading our UX journey.
