User Interface Design for the website of a non-profit organization (part 2)

By Edward Han Fung Siew and Huang Junyi

Background

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
  • 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.

https://www.figma.com/proto/pKmdc8CppHg0eeYVFd750v/Prototype?scaling=min-zoom&page-id=0%3A1&starting-point-node-id=41%3A4&show-proto-sidebar=1&node-id=41%3A4

Product objectives

  • Avenue for volunteers to apply for volunteering work

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

Interface Design

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.

Navigation Design

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

Information design is carried out with the following considerations:

  1. Quantity

Give the right amount of information

2 Quality

Trustworthy and transparent

3.Relation

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.

4.Manner

Logical, clear and unambiguous.

5.Politeness

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.

Sensory Design

5 principles of visual design:

1.Scale

2.visual hierarchy

3.Balance

4.Contrast

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.

Conclusions

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.

Providing the best in UX/UI