Retrospective 4: Responsive Layout
Identify opportunities and revamp the website of a local NGO
Lots were drawn and Ng Yiu Hei, sy huang and I got the opportunity to help FoodBank SG. Since we were going to spend effort anyway, we decided to identify and solve an actual problem our NGO could use, and not just showcase our skills at making responsive layouts.
For the uninitiated, the food wastage in Singapore last year alone was 809, 800, 000 kgs. In layman terms, it is the equivalent of everyone in Singapore throwing away 2 bowls of rice, every day. And then we have
Foodbank bridges this gap by providing a platform to bring surplus food to the needy.
We did a quick heuristic analysis of their website (on desktop and mobile) and identified some areas that could be improved by a redesign. We knew we would not be satisfied with just that, so off we went to show up at FoodBank’s office/warehouse (despite only getting an appointment for 2 weeks later (we couldn’t postpone our graduation )).
The users of the website are current food donors, beneficiaries, volunteers, people interested to become one of the above and just curious people. We interviewed the staff and volunteers, combed through all available news articles on foodbank, and checked out foodbank’s social media pages. It seemed like foodbank did not have a problem raising awareness or getting more volunteers. They had 2000+ volunteers, no idea regarding who is/isn’t active, and no time or resources to follow-up with everyone.
We wanted to redesign the website content, structure and interactions to solve the problem we had decided to focus on. We adopted the “mobile first” principle while designing layouts as it has the most limitations. Here are the current and redesigned landing pages for the desktop layout.
Willy is now able to choose the roles that align with his interests/expertise, when he signs up. This also helps FoodBankSG tap on the type of volunteers they need for specific events.
When logged into the volunteer portal Willy gets:
- a calendar view of all the events (attending & not attending). FoodBank doesn’t need to manually send confirmation emails anymore.
- Upcoming events’ suggestions based on his interest — Customised events reaching the volunteers Vs Foodbank looking for volunteers
- Reports of outcomes of his previous events — Fruit of his work.
The mobile content is almost the same for all pages except that the layout is optimised for the smaller screen size and a touch-based interface.
Progressive disclosure of information — We used the power of the humble collapsible button throughout to hide information Willy does not necessarily need to see right now, and thus maximising the available real estate.
We tested out the prototype of our redesign on 5 people to compare the time taken and to complete a typical volunteer task and a donor task, on both the mobile and desktop layouts. The order of presenting the current and redesigned site was randomised to remove any form of bias. Don’t faint!
What next?
Call us over-ambitious, but dreaming is free no?
Just to push it a little further, we introduced an Inventory Form in the donation page, that the donors can optionally fill when they are sending over donations. Digitising the inventory-taking and (trying to) push it to the donation stage will save time for the volunteers who receive it at the warehouse as they will just need to visually verify the items and confirm the entry made by the donor. Not much, but makes a difference when there are a lot of donations coming in.
Learning Outcomes
You don’t always get to do things your way. But you try to make do with what you CAN do and get creative. We had some trouble getting access to the stakeholders, getting contact details of donors and beneficiaries, and finding volunteers to interview. But we improvised.
We had time constraints to develop Lo-Fi wireframes and Hi-Fi prototypes for key pages for mobile, desktop and tablet layouts. We justified the de-prioritisation of tablet layout to the lower frequency of usage by our target audience. We justified the use of fewer participants to test the usability of our Hi-Fi prototype to the success of our Lo-Fi wireframes.
References
- National Environment Agency
- Understanding Food Insecurity in Singapore, Lien Centre for Social Innovation, 2018
3. Freepik for icons
4. DiverseUI for pics
