Redesigning the Singapore Red Cross website using The 5 Elements of UX & Lean UX methodology(Part II).
In our previous post, Alicia T and I have covered the first 3 planes of the Elements of UX as well as The Lean UX methodology. The planes were Strategy, Scope and Structure planes. All of the methods used to come up to redesign Singapore Red Cross’s website for a better user experience. For part 2 of the case study, we will be going through the next two planes. The Planes are Skeleton and Surface planes.
Interaction Design
Before we proceed to the Skeleton Plane, we wanted to explore more on Structure Plane and focus and focus on Interaction Design. Based on the five dimensions of Interaction Design — we can better communicate through Words, Visual Representation, Physical Objects or Space, Time and Behaviour.
Skeleton Plane: Interface, Navigation and Information Design
The skeleton plane comprises the three design aspects which are Interface, Navigation and Information Design. By making use of these three aspects, we will be able to achieve the objectives as well as meet the user needs.
Interface Design
User interface design or UI design generally refers to the visual layout of the elements that a user might interact with within a website or technological product. This could be the control buttons of a radio or the visual layout of a webpage. A good interface design helps users to carry out their tasks accurately and efficiently.
Navigation Design
Navigation design is meant to allow users to get from one point to another seamlessly. We need to implement ways for users to get through the website or application. With that, we redesigned the user flow from Singapore’s Red Cross website.
Wireframe
Information Design
Information Design is how we would like to present the information to the users. This could be in a form of data visualisation that will help the users understand the content easily.
Surface Plane: Sensory Design
We have reached the last plane of the Elements of User Experience. Sensory Design is all about making sense of our senses. It is one of the ways to deliver a good user experience for our users which is making use of our five senses (Vision, hearing, touch, smell and taste).
Since our product is a digital product, we might not be able to provide some of the senses. Therefore, we decided to incorporate vision, hearing and touch senses.
Vision
By making use of the 5 principles of Visual Design in UX, we wanted to ensure that it is not only beautiful but we wanted to increase the usability for our users. Thus, we created a UI Style Guide so that we can build consistency and smooth navigation throughout SRC’s website.
Hearing
We wanted to let our users feel assured and that they are also making a difference whenever they make a successful donation. After filing in the fields or form for the donation be it monetary or booking an appointment for a blood drive, users will get notified that SRC has successfully received their input. This will be accompanied by a simple tone or chord with a personal timbre.
We want to induce a positive emotional reaction and resonate with users by providing a feeling of delight and contentment through the successful tone.
Touch
We decided to cater to both website and mobile view because we realise that the generation now — everyone is on their mobile phones especially. It is important that SRC’s website is also mobile responsive so that it is accessible for our users if they are not near any desktop or laptops. They can easily get information via their mobile phones.
In addition, we wanted to incorporate haptics to increase the user experience for the users after successful submission. This would work together with the hearing sense where we added the simple tone.
Problems and Solutions
Here is our take on a totally revamped website that is scalable on a myriad of devices for the Singapore Red Cross. Taking into consideration what we want to achieve in our product objectives for the site, we have created a simple, easy to navigate site for the users of SRC.
Some issues with the current website include:
- Messy, dated and cluttered layout
- Over excessive use of red
- Call to Action buttons are not clear, colour is not differentiated so that users know that they can/are supposed to interact with it
- Too much information on the homepage
Problem: Double navigation
Solution: When we first saw the SRC’s website, we felt there were many links on the header and it would confuse users on where to look for certain information. This was done by Content Framing when we decided to narrow down on the web pages and remove or merge the pages so that it fits in one category or URL. We were able to have one simple main navigation with the menu: Home, About Us, What We Do (Sub-menu: Services, Programmes, Training), Contact Us, Donate and a search.
Problem: Donation leads to a redirection
Solution: It is important that users are able to get all their information within a website itself so that it would not lead to any confusion or misinformation. The current behaviour when users click on “Donate”, there will be an opening of a new tab to another website which is giving. sg. The new design helps users to make their donations within SRC’s website itself without having to open a new tab. This is not only efficient but it is faster and it would not create any confusion for the users. Other than that, we have also provided different payment methods for users to choose from.
Problem: Mobile View not Optimised
Solution: We realised that the mobile view on the left (shown in the picture) was not optimised due to a few factors. They have used the hamburger icon as their main navigation but due to the double navigation, when a user clicks on it, the menu dropdown covers half the mobile screen. Secondly, the article was the first section that users get to see upon entering the website but the cover image of the article was not readable due to the wrong resolution.
Therefore, in our newly revamped mobile version, we designed it in such a way that the elements are ‘stackable’ and focusing on readability. Since we only have 5 menu items, we were able to have it the same way as the web version. As it is a long scrolling page, we have added a “Back to top” arrow on the footer which will instantly bring users back to the top of the page on their mobile phones.
Click here for the web prototype and the mobile view version.
Reflections
On a whole, recreating the Singapore Red Cross website was a great learning experience. We had to think of a website that was functional and intuitive. A lot of our design process was keeping the users in mind — we asked ourselves how to make the website easy to use, clutter-free and straight to the point. As a result, we streamlined the navigation design of the entire website, and also fine-tuned the visuals and buttons that the user interacted with.
