Singapore Non-profit Organisation O’Joy Care Services — UXUI Case Study
| UXUI Case Study | Mobile Application |
Timeline: 14 Weeks • Materials: Sticky Notes, Pen , Paper, Figma
UX Techniques: Business Analysis, User Persona, Surveys, Secondary Research, Competitive/Comparative Analysis, Affinity Mapping, User Flows, User Archetypes, Skeleton, Surface
This case study is carried out by a team of two digital product design students. We’re are in no way affiliated with the existing web service of O’Joy care services nor with any collaborators or related organisations, but an opportunity to learn more about UX research and design. At the same time, we hope to make a difference in contributing to a greater good.
Project Overview
Current website
About
O’Joy Care Services is one of the Singapore’s non-profit organization. Their organization is located in Boon keng area and consists of a group of passionate social workers and professional consultants. It was established in early 2004. Mainly targeted at the elderly living at Boon Keng. This is because they are aware of the aging problem of the Singaporean population. They believe that it is necessary to prevent and early intervene in mental health problems related to aging and promote the healthy aging for the elderly who lives at Boon Keng areas.
This organisation mainly focuses on 3 services, which comprised of Counselling, Health Oriented Ageing(HOA) programmes and Donations.
For this case study in concern, we will be greatly focus on Health Oriented Ageing(HOA) programmes to do a research.
The problem
O’Joy Care Services is currently available only in the form of web portal. In todays era, it may be difficult for the public to access and utilize the features available. This is deemed to be not user-friendly or mobile-friendly, which would be resulting in low participation.
Our task is to study the organization and provide more effective and friendly solutions, ultimately design a user-first modern mobile application.
My role
I am the project lead of this project, focus mainly on research synthesis, journey mapping, and visual design. Strong teamwork has also been established with my team mate to generate ideas and solution.
Product Objective
Through the health-oriented aging (HOA) program, let more elderly people know about organizations, obtain physical and mental health through activities, and provide users with more convenient services and simple steps for the elderly to complete without others helping. Through this case study, I would want to increase the visibility and usability of the application.
Synthesising Research
Before diving into the redesign part, we quickly run through this organization website and mapping out the business model canvas. This practice help us to have a clear picture for the whole organisations.
Business Assumptions Question
This practice we done it right after mapping out the business model canvas. This questions help us to find out more about the organisation or the questions that we didn’t really come in minds at first. The 10 questions listed as below:
Personas
I wanted to set the User Personas around the two major use cases.
- Mdm Woo is a retail shop owner who want to find the information and understand the programs by this organisations and sign up seamlessly.
Problem Statement for the User
- How might we help the users find meaning in their life? Attend activities?
- How might we solve the problem for the difficulty to ask or find about the services / programs in the website for the user?
- How might we create a booking in advance or schedule for the programs and remind the user?
- How might we create a suitable font size to ensure that users can read it?
- How might we create a simple and easy-to-understand website to ensure that our users can complete tasks by themselves?
Opportunities
- Design a platform to help the user to retrieve the information seamlessly
- Create a method to help the user to sign up the programs and do payment seamlessly
- Set a reminder for user who booked the schedule/programs in advance
- Provide a magnifying glass for the text when the user mouseover the text or article
- Create a simple steps or straightforward information
Hypothesis
We would know that if our initiative is successful when we see an increase in the number of users joining the HOA program and able to improve their life positively and give them convenience by providing easy payment, booking appointments and reminders online that meet the users needs.
Lean Survey Canvas
To ensure our assumptions is correct. Before we did a online google survey we using lean survey canvas to help us mapping out the questions in advance. This approach helps us make a better plans based on our project goals. To avoid wasting time to ask a non- related questions for survey.
Survey
Based on the Lean survey canvas hypothesis that we prepared earlier, we conducted a research by google survey form on these 38 potential users.
https://docs.google.com/forms/d/1rZckETxGqSPSMv0POeVc3HDu0r7tvGAq8acmLofXwA8/edit#responses
Research Findings for survey
We learned that most seniors are keen to participate in various programs to promote themselves or become part of the organization
- 50% of Elderly are financial well
- 73% of Elderly are active, they have a job
- Most of Elderly wants to help people, learn new things and improve on their social networks
- They don’t mind to join Customer Relationship Service Program and be volunteer and share their knowledge
The Value Proposition Canvas
This approach is based on the business model canvas to do a further write up. So we can understand and make a better assumption to address the user needs and the business goals.
My value proposition canvas is as below:
User Needs Vs Business Goals
Based on the information found in the value proposition canvas, we began to list down the user needs and business goals as follows:
User
- Want to find meaning in their life
- Want to be independent
- Want to socialize, make new friends
- Want to learn new things
- Want to share their skills and experience with others
Business Goals
- Recruit new members to join the paid programs
- Want to help the elderly to plan a suitable program to get physical and mental health
Moscow Prioritization
Based on the research we get prioritise the important and insignificant by listed as must have, should have, could have and won’t have
Must have:
- Have Faith and Patience
- Emotional support
- Improve overall well-being
- Programs that Elderly like or enjoy
- Orientation for new members
- Simple and easy steps for the user
- Short and clear information provided
- Readable font size for the elderly
Should have:
- Public Transport
- Subsidy Funds
- Reminder to go to activity
- Reminder to book the program
Could have:
- Member who lives out of Boon Keng areas
- Family member to follow up with the centre regularly
- Learn new skills
Won’t have:
- Mobility issues
- Serious Health issues
Interaction Design
Before we create or suggest any interactive features for the application. Our team believes that it is necessary to understand user needs. So we create a contents as below:
- Which are the devices Elderly normally used?
Mobile usage is more frequently than Desktop. However due to the fonts size is small when they do enrolment for a activities they prefer desktop. - How would the User interact through website?
- The website has to be mobile friendly. We will use “Mobile first design” to design the website. From the mobile end which has more restrictions, then
expand its features to create a tablet or desktop version - The fonts and buttons need to be big enough for the elderly to see
- There shouldn’t have too many different types of interaction in the website
- The functions and instructions need to be clear and easy to use
3. How do we organise the information to make it easy for the elderly to use?
Based on the IA structure, the menu is simple to understand. There are 6 key areas in the website:
- Homepage: Is like a welcome page to get visitors oriented and feel welcome. This page will also include 3 main services: Straightforward do not need to click the top navigation. This is the place how the users can find the main services at a glance.
- About: The O’Joy Care Centre
- Activities: Can display current activities. Users can easily find information and register for events. Most importantly, users can get reminders in advance on the website. They can also set up optional notifications to remind them.
- 3 ways to help the centre: Donate, Be a volunteer and Join CSR activities
- Contact Us: Hotline / Submit a form. Make enquiry and needed more support.
Type of interaction
After research, we found that these three interaction methods are more suitable for our user needs. As our findings most elderly are non tech savvy, the types of interaction will be suggested to clicks, vertical scrolling and type to prevent confusion for the elderly.
Information Architecture
After the discussion, we quickly listed the important information of the application according to user needs. The order is very important. Without proper sorting, most users would be lost and confused when navigating your website or app.
As shown below, we think this sorting method is more suitable for our users.
Content Frames
This is the most important function and required information to meet the needs of our users
Skeleton
The 4 considerations prior to the creation of website and mobile responsive
- User friendly with a simple website structure to navigate.
- Product diversity. To suit the need of different user.
- Pro-activeness with system reminder to remind users about the appointment.
- Commercialization of product. Organizations need some paid activities to obtain funds to support the organization.
Navigation Design
We refer the information architecture and create a high-fidelity prototype to enable us to navigate and find out any potential problem that may occur with the final website. This practice allows our team to examine the usability questions in detail and make conclusions about the user behaviour. Simulate the real situation and improve it before build up the actual webpage for the user.
The simulations for the following scenario as below:
How the user sign-up for activity?
The user clicked the HOA programme in the homepage and move to activities page, where all the activities and detail will be listed. The user can browse the relevant activities information or video before signing up. If the user favours that particular activity, they can click “add to cart” and checkout as a member/ guest, which will then navigate the user to the payment page and move to a confirmation page upon payment.
The system will then trigger a reminder in advance before the activity starts.
Throughout the process, this is the method for users to sign-up the activities:
Click + Scroll + Type
The first draft for the prototyping
The high-fidelity prototyping
Information Design
The main goal of information design is to provide users with clear direction and direct instruction so that they can seamlessly obtain information and complete registration activities in a short period of time. The concept we advocate is to achieve the user’s completion of tasks without the help of others. Therefore, the relevant information and images that we placed on the website are very important.
How to avoid misleading? This is one of our considerations. The best way for us to solve the misleading is to simplify and straightforward. Complicated procedures must be eliminated.
The homepage
We display the latest event on the banner announcement for the homepage. We also display the 3 main services in the homepage. So that our user do not need to click in any top navigations bar to find the services in glance.
The bottom of every pages we also consider to add in the live enquiry buttons to help the user in anytime anywhere when the user get confuse or want to know more information.
To help our users to have better understanding of the event, we are considering to include the video on the “Join our event” page. The video can help users visualize the existing courses and understand the content of the event well before registering.
Considering that users may need to register for multiple events at a time, we also consider adding a “shopping cart” so that our users can pay for multiple events or edit choices before making a payment. Choose first, decide later.
Interface Design
We try to arrange interface elements to enable users to interact with the functionality of the system.
This is the list of interface components we built. We believe that for our users, when they browse the website from the organization, these are the three most important components that can help the users better.
Wider spacing and font legibility
- Enlarge specific area when mouseover
This feature is really important especially for our users. It’s help them see clearly for the information in the website.
2. High contrast colours
Colours tone of buttons
We also consider using high-contrast colours in our website. Make our users feel more comfortable when reading the text and information.
Buttons — Level of Importance
We consider bigger buttons for elderly to press. Go with rounded-corner buttons make the whole user experience look more friendly.
3. Helps elderly to identify which page they are in
Breadcrumbs
Help our users determine their location and the number of steps to complete. If users need to edit anything, this function can also click to return to the previous page.
We also consider adding the common interface components listed below to comprehend our user interface
Menu
1.Top navigation bar
Images
2.Hero Banner images (Announcement)
3.Thumbnail images (for the activities or services)
4.Education Banner
Buttons
5. Floating action button
6. Main buttons, highest priority (Donate, Shopping Cart,Call to actions)
7. Secondary buttons (Enquiry)
8. Text Links
Text
9. Header Text
10. Sub Header Text
11. Content
Others
12. Breadcrumbs
13. Enlarge text for specific area
14. Corporate & Activity Videos
15. Icons
16. Textbox
17. Radio Buttons
18. Footer
Surface
Determines how will the product look like, with the right layout, typography and colours.
Here is the visual identity where we changed the typography to clearer font, colour scheme to brighter colours and improve the layouts.
- Overall Colour Theme
We try to keep the original colours used for current website, and then convert them to brighter turquoise and blue tones to give people a refreshing feeling. Reduce stiffness for what had presented in the current website.
2. Typography
Compared with the current website, the current website uses many different fonts to give users a sense of confusion. In order to avoid this situation, we choose one type of font to present. The only difference is that primary and secondary information are presented in different thicknesses of text. Which gives a sense of consistent and less confusion.
3. Hero images
Provides the latest event photo at the top of every pages. Its helps to immediately arrests a visitor’s attention.
4. The irregular shape thumbnails
Instead of using rectangular pictures thumbnails. We using the irregular shape thumbnails to provide users with a different experience when visiting the website. We also try to add in the interaction in this part which is the image and text will lighten up in the website when the mouse rollover.
5. Icons
The simple icons can present a simple, modern feel and it easy for users to understand. Attract attention and able to guide our users.
6. Bell Sound in mobile
To grab the attention and remind the user to attend the event. It will auto remind the user 3 days before the activity started.
Others — For guest Reminder for the elderly to attend the event 3 days before the activity.
Here come with the final interface in desktop and mobile.
Desktop Prototype:
https://www.figma.com/proto/QprbBOLdl7REfttcWXXjxJ/O-Joy-Desktop?node-id=166%3A353&scaling=min-zoom
Mobile Responsive Prototype:
Conclusion
How we help the Elderly and O’Joy
- We built a simple website structure to help the elderly to find activities content easily
- Elderly understands the activity before signup and make payment conveniently
- Elderly received reminder to attend the scheduled activity in advance
We create a more interactive, informative and user-friendly online platform for the new members to enquire and join the services with ease and assurance.
As for existing members, they are more well informed about the activities and easy to sign-up and make payment easily. This helps the organisation to gather more funds and reduce the work for the worker to send a reminder for each participants before the event.
Reflection
In a nutshell, this case study had been an exciting and challenging journey for the team.
Although I have a short timeline for the project, I have learned another way to conduct UX research using Lean UX to make hypotheses before verification, which can be further adjusted based on the findings or verification.
As our assumption may not be perfect, this method has helped us to make judgment based on the user’s views and needs, to find a better way that is more suitable for the user before making any decisions or assumptions. The skeleton and surface can help us to improve the level of detail for the prototyping. Integrate the entire page and improve all defects at all levels. This had made the entire application to be more user-oriented and comprehensive.
Thank you for reading
Have a nice day!
