Part 2: Design Library & UI/UX update on a non-profit organisation.
Contributors: Ain Sahimi and Grace Esther Susilo
Toolkit — Pen, Paper, Figma, Photoshop
UX Techniques — Interface Design, Navigation Design, Information Design, Sensory Design, Solutions
UI Techniques — Figma
Hello, we meet again! In part one of this case study, we covered a substantial amount of research and planning by applying the abstract section of the 5 elements of UX — Structure, Scope and Strategy.
In this second part of the case study, follow us on how we executed our designs by covering the last two of the 5 Elements of UX — Surface and Skeleton.
Read more about the 5 Elements of UX by Jesse James Garrett — co-founder of Adaptive Path.
Interface Design
We improved the current interface design, by designing buttons with multiple variations to show the different levels of emphasis. Buttons will appear differently when the cursor hovers over it, this is done to enhance interaction between users and the product and also to not confuse the user.
Layout Grid
We used a 4 column grid for mobile and a 12 column grid for the desktop in our entire design to maintain consistency throughout.
Layout grid for website and mobile.
UI Components
To create consistency in all our components within the website, Shadow, buttons and overlays are follow based on the predefined style guide that we create.
1. Shadow is being used for all our Card components.
2. The primary CTA button is using the primary colors of our brand. Secondary button will be using secondary colors.
3. Background Overlay in the image to be used in Hero Image.
Typography
Consistency of typography is used for different headeline, body, link, button and breadcrumbs through the website. As for heading, we use Montserrat and as for body and the rest, we use Open Sans.
Typography for website and mobile.
Navigation Design
User Flows
Recap! Based on the persona we created in part one, Laura is an expat who has been living in Singapore for the past 8 years, and wants to adopt a dog to be a part of her family. We created a user flow where the goal was to land on the website and enable Laura to submit a dog adoption form smoothly.
User flow
Comparing the difference between the previous navigation menu and the current navigation menu we created, there’s a significant change as we created a hierarchy between the pages so that it’s easier for user to differentiate it from other pages.
Wireframes
Low fidelity wireframes
Referencing the user flows above, we created the wireframes and flowcharts that aid us in understanding how users would interact with the product. This has allowed us to have an open discussion on interactive design and make the needed iterations before applying the UI.
UI Planning
“An hour of planning can save you 10 hours of doing” — Dale Carnegie.
And that’s exactly what we did. Before we started creating the UI elements, we asked ourselves a few questions,
“What do we want users to feel when entering CAS website?”
“What impact do we want to give to our users upon entering and exiting the website?”
We believe that UX and UI need to work hand in hand in creating a great product — making it both functional and beautiful. It’s a complete waste with the absence of either one aspect.
And so, we created a quick brainstorming session on what we want the product to look and feel best for our users and aids them in achieving their end goals when using the product.
Sensory Design
Design Library (Branding & UI)
With the UI planning we created earlier, it has helped us with an understanding on choosing the right colors and typography and has aided us in establishing the components that we used extensively throughout the product.
Solutioning
Adopting a pet is a big decision to make. Referencing the little brainstorming session that we did, we want our users to feel comfortable when making decisions. A clean website layout allows users to focus on only the required elements that are appealing to the eye and enable users to find information quickly.
Imagery
Trust is what we want our users to feel when they land on CAS’s website. And so, usage of high-quality images of the animals are used as Hero Banners. To build trust, we also highlighted successful adoption stories and their journeys. This enables users to understand from a different user perspective of adopting a pet from CAS.
Content Writing
Setting the right tone of voice is important as it clarifies and conveys our purpose and meaning. We want our users to feel empathetic and educated when reading through our content. We do so by sharing the benefits of adopting and why donations are a great help towards the animals under CAS’s care.
No hard-selling! This is something that we want to change for CAS. On the current official website, donation buttons are being thrown on almost every content and its pages. We aim to respectfully ask for donations by limiting the amount of ‘Donate’ buttons used and ideally placing ‘How you can help’ as a replacement on certain content.
Increasing exposure for adoptions
As the main goal of our persona is to successfully enquire for adoption, we decided to focus on the highly crucial page — Adoption Gallery. We find that this page is important because it allows users to browse through the potential pet of their liking and it’s important that we give the best experience and help them achieve it.
The current CAS Adoption Page has too many CTA and clicks. Therefore we decide to combine both pages into a single page.
We introduced a filter feature to help users drill down to their needs with ease and eliminate the need for numerous search queries just to find something specific e.g HDB approved. We included a brief biodata (Name, age, sex) for individual animal listings to let users know a little more about the animal.
We placed the ‘Adoption Process’ after the listings to let users read and further understand the process. We use accordion for the adoption process to tidy up the text in the page
Individual Listing Page
On the current Individual listing page, there were some parts we like to improve.
Remember what we said earlier about ‘No hard selling’? We decided to tastefully place the donation section on this page for users who decided not to want to adopt due to whatever reasons, to donate instead.
We also introduced a ‘You may also love…’ feature by introducing other animal listings to continuously support the user’s decision-making.
Lastly, we created a clean form system for adopters to answer the important requirements for CAS to assess. Upon submitting they will be prompted with a “warning message” to ensure users the confidence with the information they had given to CAS. They will then be brought to what we call a ‘Thank You’ page and be given an auto-confirmation by CAS.
Mobile Responsiveness
CAS users browse the website on both desktop and mobile. And so, it is important that we design for both potential environments and scenarios, to let users navigate through the website easily.
We changed from a 12-column grid used for desktop, to a 4-column grid used for mobile. This has allowed us to re-arrange the components easily.
Below are the differences we can see for the mobile view:
We have to minimize the header and introduce a ‘Hamburger’ menu to expand the top navigation when clicked.
Content is simplified and introduced a ‘Read/Learn More’ button that will lead users to an individual page with the full content.
3. We introduced a slider for content cards that are not regarded as highly important.
4. Important content cards remained and stacked for mobile view.
Conclusion
By applying lean UX to this project, it gave us a better understanding on how to achieve both business and user goals through the assumptions we made and debunking it after. It has also allowed us to build a product quickly with limited access to the organisation.
Lastly, we learned that designing a product will never be perfect. We adopted the mentality of “it’s good enough, for now”. A product is constantly evolving according to the business and user needs and aiming for perfection is an enemy of evolution and progress!
Thank you for reading. Read our part 1 here!
