5 Elements of UX + Lean UX Case Study: Animal Lovers League Singapore (Part 2)
Intro
For the second part of our case study, my teammate and I applied the 5 elements of user experience and the Lean UX method to redesign a non-profit organisation’s website — Animal Lover League in Singapore. Click here to read Part 1 of the case study which includes the use and integration of the first three planes of the User Experience(UX).
For the first part of the case study, we defined the Product Objectives, User Needs, Lean UX Hypothesis Statement, Content Framing, 5 Dimensions of IxD, as well as Information Architecture (IA).
Now that the strategy, scope and structure for the website have been more clearly defined. It’s time to move on to the next plane.
04- The Skeleton Plane: Interface Design, Navigation Design and Information Design
The skeleton plane comprises three design aspects which are Interface Design, Navigation Design and Information Design. Through this plane and by utilising these three aspects, we were then able to improve the arrangement of buttons, photos, contents, user flow and the wireframes of the website to achieve the business objectives and meet user needs.
Interface Design
Interface design ensures a clear definition for everything users will see on the website with specific interface elements. A good interface design allows users to perform their tasks efficiently.
We drew inspiration from The Design of Everyday Things by Don Norman and Material Design by Google which provided the concepts necessary for a successful digital product in terms of the principles of interaction design, buttons, layouts and other UI elements.
Navigation Design
Navigation design does not only provide users with a means for getting from one point to another on a site but also promotes usability. An effective navigation design should be able to communicate the relationship between the links, labels, other UI elements and the contents of the page the user is currently viewing. The correct design and implementation results in an enhanced understanding and experience for users.
With this in mind, we redesigned the user flow from the current website. The new user flow requires fewer steps for users to complete a task (donate/volunteer) and provides them with a clearer and more effective CTA. Users are able to better understand and navigate the website.
Information Design
Information Design can come from data visualisation or the planning and shaping of content to satisfy the information needs of the users.
In this regard, we defined the type system, writing, icons, imagery and the hierarchy to make sure the information on the website is in a clear and legible manner. Furthermore, this allows users to navigate the website without feeling overwhelmed or confused.
05- The Surface Plane: Sensory Design
The surface plane is the last plane of the User Experience and covers sensory design.
This is the final phase on the way to delivering an experience to our users and determines how our design will appeal to people’s senses. The five senses are (vision, hearing, touch, smell and taste). The type of product and its design would determine which senses will be triggered.
There are limitations to sensory design as no two people are the same and the strength of their senses may vary. Further to this, not all senses can be triggered through a digital product some of which would not be applicable for all users.
With these limitations in mind, we were unable to incorporate all the senses into the user experience therefore we focused on vision, hearing and touch.
Vision
Visual design is not just about aesthetics. In the world of UX, a good visual design should focus on improving communication and usability.
We created a UI style guide that allows us to define the design parameters and standards for UI elements as well as the interactions, ensuring smooth navigation throughout the website.
Hearing
By associating a UI element and a specific sound, we are able provide sensory feedback to users. For example, when users successfully make a donation, a simple, reassuring and unobtrusive notification sound will let them know their donation was a success and their contribution is making a difference.
The notification does not only inform the user but can also imbue a product with a sense of personality.
The initial research showed that potential users are most interested in success stories. Showcasing videos/clips of success stories evokes an emotional response and resonates with users providing a feeling of delight and satisfaction which in turn promotes the adoption of more animals.
Touch
In the physical world, different activities require different movements. For example, if a user wants to donate money to ALL, he or she needs to travel to the organisation, talk with the staff, pull out the wallet, open it, take out the cash and pass it to the staff. Then wait for the staff to issue a receipt.
The digital world however is more convenient which allows users to click, tap, scroll and type.
A seamless website experience is instrumental in the success of a business and in this case the success of donations. Haptics can enhance the overall user experience by conveying and reinforcing information.
Problems & Solutions
By utilising the 5 planes of UX design as a guideline, we conducted a thorough website audit to identify the issues on the current website to optimise it accordingly.
Navigation
Issue: The top navigation bar on the current website has no hierarchy or emphasis. Also, there’s no indication or signifier to help users to understand which page they are viewing.
Solution: Emphasise the priority call to action to show the purpose and what the focus of the organisation is. We differentiated the ‘Volunteer’ and ‘Donate’ call to action to distinguish them from the others and catch the attention of users when they visit the home page. The heartwarming banner accompanied by a moving header and a quick link button allows users who do not require any further information, to navigate directly to the donation or volunteering pages. Besides, we created a red color underline to help users to know which page they are on.
Consistency
Issue: The layout and alignment of the current website are inconsistent. It created confusion and difficulties for users when navigating and perusing the website.
Solution: We created a UI style guide to implement consistency on banners, icons, fonts and other UI elements. Browsing a website with a consistent layout and elements provides an efficient user experience that allows users to focus on their tasks. In appearance, it will show trustworthiness, regularity, and allow users to easily find the information.
Homepage brief organisation overview
Issue: Based on our initial research, the users would like to understand the organisation’s background and how their donation will be used before they make a decision. However, this information was not clearly provided.
Solution: The main objective was to design a homepage that encourages users to become a volunteer and drives donations. We implemented the display of all the important information that users want to know in a summary on the Homepage including, the organisation’s background, statistical impact, and the many ways users can help out. Furthermore, we created a quick link section at the bottom of every page for users to easily access further information or make decisions.
Establishing trust and confidence
Issue: According to the insight provided from the survey, how the organisation uses the donations is the main consideration for users when making a donation. However, this information was not clearly provided.
Solution: To ensure we meet the user needs, we incorporated the content and information into several sections throughout the website.
- Home page: Showcasing facts and statistics about the impact ALL has made and provided a downloadable financial report for users.
- About us: Provides users with a deeper understanding of ALL, the organisation’s structure, and to what ALL contributes.
- Donation: Summary of how the money will be used by the organisation and the impact it will have.
General website content & hierarchy
Issue: There is no content hierarchy currently in place on the website. Most of the pages require updates due to incorrect content placement as well as a general lack of information. Some pages need to be removed due to their lack of relevance and information.
Solution: An intuitive and consistent layout aids users in obtaining information in a more concise and convenient way. We re-categorised and integrated the fragmented pages as well as the content to make the information more relevant furthermore we simplified the user flow in order to achieve the business goals more effectively.
Willingness for donations and volunteering
Issue: The donation and volunteering information is unclear on the current website. As a result, this negatively affects the willingness to donate and volunteer.
Solution: Display clear terms, requirements and information to assist volunteers to make quicker, more-informed decisions and avoid misunderstandings. Showing the (results or effect ) of a certain donation amount will provide an indicator for reference to encourage people to donate. In addition, the ‘Donation’ page also provides other ways to donate giving donors a choice to contribute a manageable amount promoting donations from more people. On the Volunteer page, we list a variety of ways users can volunteer attaching terms and requirements. This provides flexible choices for volunteers to select the best option for them and appeal to a wider range of potential volunteers.
Optimising for mobile responsiveness
In fact of user’s activities are not limited to using computers, mobile phones are also the main device used to browse websites, share, post stories on social media in their life. At the same time, this is also a way for the organisation to reach out to users. Therefore, it is important to design with mobile responsive in mind.
To optimise the website for mobile, we will need to change the grid from the standard 12-column to a mobile 4-column grid, with elements stacked on top of each other for a narrow and vertical view. According to the limited width and long scroll issue, certain functions or layout displays are different in mobile and desktop view. The navigation menu will become a ‘hamburger’ menu button which will expand into navigation drawers when tap. The footer section will hide all columns and is displayed as a collapsible menu.
Reflection
I found this project to be challenging and absorbing. It was not an easy assignment but I can definitely say that I’ve learned a lot from it. There are multiple phases that one must go through before a successful product can be delivered. Careful meticulous planning is needed to ensure the ultimate user experience is obtained. The 5 steps ensure that everything is covered and time can be used effectively and not be wasted.
I am proud of our prototype (check it out here), and I am excited to reach out to the organisation to present our case study. We hope that our efforts can make a difference and we can help by improving their current website and give back to a very worthy cause.