A Digital Product Design case study to make the HNF donations easier and faster(Part 2)

In the first part, We talked about how we challenged redesign to build five elements of the UX framework. But we’ve only covered the abstract layers: strategy, scope and structure. We’ll talk about the last two elements of the UX framework: skeleton and surface.

The five dependent layers: strategy, scope, structure, skeleton and surface.

-SKELETON-

Interface Design

The Skeleton Plane defines what form that functionality will take. It includes Interface Design, Navigation Design and Information Design.

We define the framework through interface design in the common form of buttons, fields, and other interface component domains. Fundamental principles of interaction include five aspects, which are as follows: Affordances, Signifiers, Mappings, Feedback and Conceptual Model.

Our new interface design includes these principles. For example, as the screenshot below.

Screenshots of the new design

The screenshots showing:

Signifiers
1) & 2) The user knows that the title in the main menu bar can be clicked and go to the relevant page, also the underlined text.
3) The user knows that the button can be clicked.

Feedback
4) When the mouse hovers over the menu, the background turns grey.
5) Prompt message appears after successful donation.

In our design, all buttons can be easily found in other elements and show that it can trigger an action, and the actions and states of all buttons are clear. They include extended float action buttons for maximum emphasis, contained button for high emphasis, and text button for low emphasis.

Based on our persona Suzanne, who is 30 years old and works in a bank, she might be able to use a computer to open a website, or she might be able to browse a website on her mobile phone to donate, so we did a responsive layout, a desktop version and a mobile version.

All Components align to an 8dp Baseline Grid for Desktop version and mobile version. The desktop version layout for donation page, we used 12-column grids with 24dp gutter, while in the mobile view layout, we used 4 columns as breakpoints and 16dp Margin and gutter to keep the border, keyword, and fill consistent. Since the mobile screen size is small, using 4 columns as breakpoints, we adjusted the image and paragraph widths and other elements to fit the width of the mobile screen.

Screenshots of the new design with Baseline Grid

Navigation Design

Navigation is the act of moving between screens to complete tasks. Based on our Information Architecture (IA), a user can move in one of three navigational directions. Navigation design can be selected according to different requirements, such as horizontal navigation, forward navigation, reverse navigation, and reverse chronological navigation, etc.

We use lateral navigation to design donation tabs, they moving between screens at the same level of hierarchy. In the toggle menu, the arrow button clears and allows the user to navigate to the next level, while the back button allows the user to navigate back to the previous level, a kind of reverse chronological navigation. The search function allows users to quickly locate content anywhere.

Screenshots of the Navigation design sample

In order to enrich the display of page content and according to information hierarchy, we put the most-used action navigation icon on the far right, second most used search icon next to it. Any remaining or secondary actions we placed them in a toggle menu.

The fixed tabs to display all the tabs in a set simultaneously, they are relevant and easy to switch between them.

1) & 2) Action items
3) Navigation icon
4) Page title
5) Fixed Tabs

Information Design

Information Design comes down to making decision about how to present information so that people can use it or understand it more easily. There are many ways to present information. Sometimes information is visual, text is easier for users to understand than Icons. Multiple, separate charts can sometimes better communicate a story, rather than 1 complex chart. Images both enhance the user experience and convey the brand’s visual language, clarifying complex information that is difficult express with words and showing the user how to perform an action.

We choose meaningful images that directly show people who need the user’s help. Make it more visible for users to know who is the beneficiary and making user feel empathic.

Based on the information hierarchy, we place important actions at the top and created clearly visible elements, like titles, description texts, different buttons and icons, so that all elements had enough contrast and size, and key information was clear at a glance.

The layout of the donation page is to format the content from top left to top right, and then from bottom left to bottom right in a Z-shape to reflect the visual hierarchy.

-SURFACE-

Sensory Design

The user’s understanding of the product is fundamentally based on their senses. If we want to making sense of the senses, we should consider how our design reflects the sense to people. The websites or apps we design are mainly reflected in the sense of vision, hearing and touch.

In HNF donation web design, the experience we deliver to users is mainly vision, but also a little bit touch. We choose red not only because it is the HNF’s corporate color, but more because red is brighter and bolder color, it also represents enthusiasm, warmth and positive. Use different shades of red to enrich the user’s visual sense. Use different font sizes and color to create high contrast and make it easy for users to immediately notice the important stuff. To make the text easier to read, the banner lowered the background opacity and increased the contrast.

A style guide is a set of standards used to establish and enhance style to improve communication. Before we start the design, we create a uniform design standard style guide.

When users interact with the mobile version of the site, We create some basic touch feedback, such as tap a button to go to another page.

As I mentioned before, words is difficult to clarifying complex information and show the user how to perform an action. After we created the style guide, we applied to the wireframes and did a few design iterations. We used Figma to create our prototype with following user interfaces.

HNF donation page desktop view
HNF donation page mobile view

Based on our previous survey and analysis, we have added some new features to this donation page. When users go to the donation page, they can first learn about the general introduction of the Home Nursing Foundation (HNF), and then learn who will be the beneficiary. The page also provides a number of reference amount for donators, and they can choose from more different types of donations in a fixed Tabs, as well as more payment options. If a user wants to learn more about HNF or how to become a volunteer, they can navigate to the relevant page via the header or footer. For those who already know HNF, just click the “Donate now” button on the banner to go to the donation section.

To catch more details and see the interactions with the website both on desktop view and mobile view, welcome to review the videos below.

NHF Donation page desktop view
NHF Donation page mobile view

At this point, we have completed the redesigned of the Donation Page for this non-profit Home Care Foundation (HNF) using the 5 Elements of UX Framework.

Thank you for your reading.