User Interface Design for the website of a non-profit organization (part 2)
By Edward Han Fung Siew and Huang Junyi
This is part 2 of the UI design for the website of a non-profit organization, Love Kuching Project, in Singapore. Part 1 of the UI design which covers the first 3 plane of UI design, was published in an earlier article. https://edwardhan8899.medium.com/user-interface-design-for-the-website-of-a-non-profit-organization-44c1c3a06869
Some key information about Love Kuching Project:
- Established in 2009
- Cat rescue group run by volunteers
- To promote cats as companion animals through its outreach programmes
- Rehabilitating sick and injured community cats through providing intensive foster care
- Communication channels are Facebook and Instagram
- Currently, their website is still Work in Progress, a page showing “ under maintenance” .
- This report is our proposed website design, both the laptop and mobile version for them
Our design can be viewed in the following link , and the pursuing discussion explain the key considerations and salient features of the design in relation to the UI design principles.
- Avenue for volunteers to apply for volunteering work
- Users to contribute donation
- Public awareness
As this is a non-profit organization, our proposed digital product is simple, function, attractive and implementable with a low budget. Our proposed design may be implemented easily using commercially available platform such as WordPress , WIX, without the needs for complex and expensive coding.
5 Elements of UX/UI
We have earlier completed the lowest three elements/ planes, this part of the project will see the completion of the highest two elements/planes, leading to a complete prototype. Thus, the last 2 planes of User Experience (UX) are the Skeleton and Surface plane, and they contain: Interface Design, Navigation Design, Information Design, and Sensory Design.
The main focus
This digital product focuses on the Product Objectives, User Needs, Functional Specifications, Content Requirements, Interaction Design, Information Architecture, Interface Design, Navigation Design, Information Design, and Sensory Design.
This presentation will elaborate more on the Iast 4 items in the above list.
The top two design elements is based on the following site map established in the first part of the project.
the site map is
The use of element such as buttons, fields, and others to facilitate selection and interaction.
Buttons are identifiable, Findable and clear.
Distinctive hierarchical level is designed on this page. The most important button “ Join Us” and “ Donate” has the strongest appearance and place at the prominent location.
Three “fields” is presented on the most popular topics and allow more details with “Learn more” button.
On the mobile, Buttons are identifiable, Findable and clear.
The most important button “ Join Us” and “ Donate” has the strongest appearance and place at the prominent location.
Three “fields” for the most popular topics on scrollable selection panel , and provide more details with “Learn more” button.
Moving between screens to complete tasks is made swift and easy.
By analysis the User’s Journey map and Tasks flow, and in line with business objectives, the task “ Join Us” is identified as critical and a direct navigation , or short cut is required.
“Donate” is also identified as critical and required direct navigation.
so it is being implemented as follows in our design.
As shown above, clicking the “ Join Us” button of the home page will bring up the “ Volunteer/ application to be a volunteer” directly.
similarly on the mobile version:
Information design is carried out with the following considerations:
Give the right amount of information
Trustworthy and transparent
Relevant to the purpose of the interaction. e.g. “ Let’s build a warmer and more caring….”
To suit the limited screen size of mobile devices, we remove some of photo that was in the web version in the mobile version, and solely focusing on the relevant information.
Logical, clear and unambiguous.
Options are provided, promote good feeling.
Typography with clear hierarchical levels. from Header, sub-header, to title, body, etc.
All these considerations are implemented on the sample page as shown below.
In addition , Infographic and statistic are presented to explain achievement and build credibility. e.g “ 500+ cats rescued” in both the mobile and desktop versions shown below.
5 principles of visual design:
5. Gestalt principle
The use of the above visual principles are illustrated in the home pages and the rest of the other web pages.
Another important consideration is our design had made use of color that are in line with the organisation’s brand color.
By deploying several effective methodologies, principles and tools, we have successfully completed the 5 level of UX/UI , and design the website for the Love Kuching Project.
Moving forwards, the next stage is to demonstrate this prototype that we have designed, gather feedback and finalize it with the owner/client.