BLOOD CARE Phase #3 : Conceptual & Physical (Concrete) Design

CONCEPTUAL & PHYSICAL (CONCRETE) DESIGN

STORYBOARD

RECIPIENT

The recipient performs the function of requesting for blood and/or financial assistance.

Figure 1: recipient storyboard

BLOOD DONOR

The blood donor performs the primary functions of making donations either financial or blood. The donors is also able to view stories of the recipients as this is an initiative to motivate the donors to make donations.

Figure 2 : Blood donor storyboard

THE HOSPITAL AND OTHER NON GOVERNMENTAL ORGANIZATIONS

The hospital represents the bodies that tender to the needs of patients and restore their health.

Figure 3 : Hospital/NGO storyboard

---

DESCRIPTION & JUSTIFICATION METAPHORS

Register/Login page

The sign up button is for the first time user to register their name in the Blood Care system while the login button is for the user who already registered in the system. The metaphor used for this design is the same as real life when people need to register to get access to the system.

Figure 4 : Register/Login page

Menu page

Menu page on the left part of app, it shows that there is the list of menu to be chosen by the user. When the user clicks on the icon, it will show the page of the clicked menu. Each menu has its own icon. The icon is quite similar to the physical entity to help the user understand the unfamiliar aspects. To ease the users understanding of the icon, there is a label on the right of the icon. Besides that, the yellow small icon on the right side of the 'Request List' and 'Event' menu shows that there is a notification on both sides to trigger the user.

Figure 5 : Menu page

'Make a request' page

There are three buttons provided for the user to choose from. It consists of a blood button, platelet button and financial button. The user can click on any of these buttons to make a request of his/her choice. Most of the users are familiar with the button and know the function as it is used in real life scenarios.

Figure 6 : 'Make a request' page that consists of blood, platelet and financial request

Submit button

The function of the submit button is to turn in all the information given by the user. The user will know whenever they click the submit button, as feedback will be given immediately and this could be in the form of displaying their request result or with the use of phrases such as successful or unsuccessful.

Figure 7 : Submit button

Right icon

The right icon shows the submission is successful or the process is correct. It can be easily understood by the user because in real life experience, the right icon is used when things are done correctly or successfully.

Figure 8 : Right icon

Cross icon

The cross icon shows that the activity done by the user is unsuccessful or the requirement is not satisfied. Most people are familiar with cross icons to show that they cannot do that particular thing.

Figure 9 : Cross icon

Notification number icon

The notification number icon will appear at the right side of the word 'Blood/Request' and 'Financial' if the request is made. It shows that there is a request that has not been accepted yet by any donor and how many requests are there. For financial request, the request is still there until the financial target is reached or the owner delete the request. This icon will prompt the blood donor by notifying them the number of requests that have been made.

Figure 10 : Notification number icon for a) Blood/Platelet request b) Financial request

Calendar icon

The calendar icon is used to choose the desired day and date to organize a blood donation event. The user can easily know that the icon is a calendar since it has a rectangle or square shape and is placed beside the 'Date' box.

Clock icon

The clock icon is used to choose the time for the event. The icon is similar to the real clock where most of the clocks have a circular shape and inside the circle has an hour hand and second hand which represent the analog clock.

Figure 11 : Calendar and clock icon

Like icon

The like icon’s function is to like the post made by other users. It resembles the thumb up that means the users approve of such posts. An example of a real life scenario is when people say something, the others show thumbs up to indicate that they understand, agree or like it.

Figure 12 : Like icon

Donate fund page

In the donation fund page, there is a step icon to show that there are three steps to donate funds. The user can know which step they are doing at the moment . This metaphor creates familiarity with the real world. For this situation, users need to perform a procedure step by step and note which step they are working on at the moment .

Figure 13 : Step icon in Donate Fund page

Left/right arrow icon

The left arrow’s function is to go back to the previous page while the right icon is used to go to the next page. After the user has accomplished the activity on that system, the right arrow icon will appear for the user to click. It will bring them to the main page. The metaphor used for this icon is the same as a book. If we want to go to the previous page, we will flip the left page. While, if we want to go to the next page of the book, we will flip the right page of the book.

Figure 14 : a) Left arrow icon b) Right arrow icon

Call & chat button icon

Call button icon function is to make a call with a particular person while chat button icon function is to make a private chat with the person. The icon used is similar with the real world application, hence easy for the user to understand the function of this icon.

Figure 15 : Call and chat button icon

---

LAYOUT AND INTERFACE DESIGN OVERALL DESIGN IN LFP

Register / Login

Request Blood / Platelet

Request Financial Help

NGO / Hospital (Organize event)

Donate fund

Donate blood

Self evaluating

Stories

---

REASON OR JUSTIFICATION OF THE DESIGN (Gestalt principle/Schneidermen rule)

1. Permit easy reversal of actions

The permit easy reversal of actions is from Shneiderman eight Golden rule. It allows users to undo their actions by mistakes, which would relieve their anxiety and encourage them to take more deep actions. Thus according to the permit easy reversal of actions rule, we designed interfaces for users to reverse their actions. For instance, when users make errors in entering information during the blood requirements or financial donation, they are always allowed to go back to the previous step.

Figure 16 : Reversal of actions when users request blood

2. Design dialog to yield closure

We have designed to satisfy the ‘design dialog to yield closure’ rule belongs Shneiderman's rule which is to tell users what their action is leading them to by giving user informative feedback when they are completing a group of actions. That is because for the target users of our financial donation task, who are givers would like to fully complete their actions if they are clearly told where they are, which steps they are at insteading of letting them guess. And after finish donation, they would like to see “Thank You” words.

Figure 17 : when users donate money, it shows “choose your amount” process, and finish, it shows “Thank you for your kindness”

3. Reduce short-term memory load

We considered Shneiderman’s rule which is reduce short-term memory load when we designed our interfaces. This is because short-term memory requires that displays be simple, users can find pages in fast way, it will save users’ time and not keep searching pages. In our system, users will easily and fast get their home page, chat box, notifications.

Figure 18 : in the bottom features following the rule reduce short-term memory load

4. Offer Informative Feedback

View Stories is one of the most important features on our system is satisficed with one of Shneiderman's rules -- Offer information feedback, users can share their stories for asking help or inspiration, this feature will motivate users to finish tasks. For example, when users saw their helpless stories, who usually would like to help out. Thus a system providing informative feedback is crucial. Therefore, we regarded Offer information feedback rule to improve user experience. When these stories turn to be highlighted as the users click on the stories for reading.

Figure 19 : the feedback of finishing(clicking) stories is that become ‘highlighted’(grey)

5. Proximity

There are a lot different types of information in our system, grouping these information to be more related so that improving user experience is also one of Gestalt Principles which is Proximity. Based on the property of proximity, our almost interfaces are satisfying with the principle, grouping the information during designing by using white space, images, big/colorful/bold font and descriptions. For instance, to display a request list which each information belongs to specific user, thus in order to distinguish, we used white space, big font name, images and descriptions.

Figure 20 : The interface is distinguish between the images, names, and descriptions for each request and donor. Distinguishing each story by images, title and description.

6. Common Region

The principle of common region is highly related to proximity, it is more about information displayed within the same closed region, below example also satisfies the principle. It is also used in the Blood Donation Event below to communicate that the comments, thumbs up and shares are only related to a single specific post.

Figure 21 : Comments, shares and thumbs are associated with the each single post.

7. Focal Point

We applied the Gestalt principles to catch user’s attention in our system which is focal point. In order to hold the users attention, we designed colorful buttons, add images with particular words. For example, for login/sign up interface, we used pink button to draw the user's eye. And for View Blood Donation Events where added photos to catch the user's attention.

Figure 22 : SIGN UP and LOGIN buttons and Photos to draw users' eyes.

8. Similarity

Similarity is one of Gestalt principles has been applied throughout all our designs where the shapes and colors and sizes are the same and only will change to make the user realize that this is a different separate feature. For example, when users select their blood type its selection buttons are with the same shape and color. And we used the similarity principle in two ways on login interface. First, it can clearly distinguish two sections by the text box and social media logs. Second, the color of two sections is different, for text box used pink and for social media is blue.

Figure 23 : Shape and color of similarity for blood types buttons. Login interface has two similarities with two different sections.

9. Common Fate

According to one of Gestalt’s principles which is common fate indicates that users would group together things that point to or are moving in the same direction. Therefore, we did a slide out menu at the left upper corner on each interfaces needing a slide out menu. Also when user click the menu button, it goes to the right side.

Figure 24 : Slide out menu is hidden at left upper corner, it goes to right side when menu displays

10. Enclosure

We applied one of the Gestalt principles in our proposed system which is enclosure. Enclosure is defined as things that appear to have a boundary around them are perceived to be grouped, and therefore related. Based on our interface design, blood donation event posts have applied this principle.

Figure 25 : Interface design with enclosure principle

From interface design above (Figure 25), there are two instances of enclosure that satisfy this principle. Take a look at the green border on Figure 26 below. The first enclosure is the whole post of blood donation event. Each post is enclosed in a rectangle with thin grey border to separate one post to another. The second enclosure (blue border on Figure 27) is the area at the bottom of the post that shows the comment section. The comment section is pop up when the user click 'see comment' button.

Figure 26 : First enclosure

Figure 27 : Second enclosure

Reference:

1. 7 Gestalt principles of visual perception: cognitive psychology for UX https://www.usertesting.com/blog/gestalt-principles

2. Shneiderman’s Eight Golden Rules Will Help You Design Better Interfaces https://www.interaction-design.org/literature/article/shneiderman-s-eight-golden-rules-will-help-you-design-better-interfaces