REDESIGNING ENGINEERS WITHOUT BORDERS WEBSITE EXPERIENCE

 

This project is to redesign EWB website with user experience design methodology. EWB (Engineers Without Borders) is a non-profit organisation that supports and promotes humanitarian engineering in Australia and overseas. Their website has no longer relevant to current EWB’s goals and it has inconsistent messaging and styling, dated design and issues with editing. This case study shows how the new website to be clearly speaking their impact, easy access to their programs and to encourage charity.
EWB website prototype video

Client: EWB (Engineers Without Borders) Australia

Timeframe: 2 weeks

My role

I led the team of 3 other designers and I was the main contact to the client. I planned the process of the project and kept up with the schedule.

Primary Contributions

Research, content audit, comparative analysis, heuristic evaluation, crafting mindsets(archetypes), ideation, strategy, IA, rapid prototyping, usability test, web design style guide (the handout), presentation deck.

Design Journey

Using Double Diamond UX Design Methodology

1 Discover

  • Stakeholder’s brief and interviews
  • Hypothesis
  • Content audit (Partial content inventory)
  • Generate a survey and user Interviews
  • Comparative analysis

2 Define

  • Affinity map and synthesising
  • Problem statement
  • Define mindsets and create personas
  • Focusing statement
  • Ideation & the Solution

3 Design

  • Information Architecture (sitemap and content strategy)
  • Sketching (paper prototypes)
  • Usability test
  • Clickable Wireframes
  • Usability test

4 Deliver

Brief and stakeholder Interview

We conducted 2 stakeholder interviews. One was with the main contact who is in charge of the website and the other was with a media & comms and a philanthropy. It was quite clear what our client wants and they were already aware of the problems. They were under review of the website which is built in 2009. The biggest problem with the website is that there are too many pages with repeated content, varying levels of inconsistent messaging and styling, dated design. It is not only confusing to the users but also the authors have a hard time to maintain the site.

“The goal is to obtain new members/volunteers, encourage donations, promote upcoming events/programs through the new website to help position EWB as a thought leader.”

There are currently 1250 members and 70% of them are students and the remaining is professionals. 40% of them are females which mean gender is relatively balanced so it can not be an issue. They come from universities and companies and want to be part of the program (for credits) not necessarily of the organization. The target audience is already familiar with EWB according to their last research.

understanding EWB
Understanding EWB, what they do

Hypothesis

  • To get new members/volunteers, donations – telling a compelling story through showcases (impact)
  • Target users for the site (public): donators, potential members (students), potential members (professionals)  
  • Corporate engagement should not be encouraged through the website. – better to build an in-person relationship (show the contact info on the website).
  • Splitting current website into two is ideal
    – The public facing website will be WordPress based. It is easy to maintain data.
    – Members portal site (They are already developing it and working on creating benefits for the current members) *We looked into what they attempt to do on this website but we didn’t involve in any of this project.
  • Blogs will remain on public site but there will not be user-generated content. 

Comparative Analysis and Heuristic Evaluation

To understand best practice and gain some initial ideas, we conducted a comparative analysis and heuristic evaluation of 5 outstanding NFP/activist websites. That helped us understand best practice, what works and the effect that different design features, content and language has on the user.

We focused on :

  • information architecture
  • heuristics (usability, control, consistency, tech and functionality)
  • content (message, tone, voice, type)

The stand out elements we noticed across these sites are :

  • Responsive design, long homepage with main information
  • Simple interface design and sitemap
  • Sticky menu with ‘Donate’ call to action button
  • Clear message with visuals over text
  • Ultra transparency

NFP

User Research

We debriefed with Topic map and crafted questions for a survey and interviews.

We were seeking to understand how people make decisions about social impact work.

  • What mattered to them in choosing a cause or an organisation
  • What triggered their decision to act
  • What was a deal-breaker

50 people across various occupations, ages and genders responded to the survey and we also conducted Guerrilla interview with 4 RMIT students on campus and face-to-face interview with 4 variety of professionals. We attained good insights about the user behaviours out of that.

User Research Plan
User Research Plan Draft

Research Insights

User Emotional Journey and Motivation

User's decision making journey image

This, we identified, is how people make decisions about who to support.

  • People identify their values – what matters to them, what causes or topics they care about.
  • They become aware of the various organisations that fit into their values.
  • They then assess how they are able to help – time, money, skills, emotional bandwidth.
  • They then assess the level of effort and pain involved – how they are willing to sacrifice their time or money? And how difficult it is for them to help?
  • They consider their various make/break criteria. This often includes transparency of organisational influences and financial flows.
  • They consider what they will get out of their engagement.

“Expect the money to go where the money needs to go, transparency, significant of the money goes to admin fees rather than what they are claiming it goes to.” – Sean (from user interview)

It circulates with repeatable behaviour once they started to be involved and they influence others as our research says. Then, where does this user behaviour come from? We define it with altruism. Altruism is caring about the welfare of other people and acting to help them. It has become a major topic for evolutionary psychology researchers according to Wikipedia. This explains how people are motivated initially and what are important factors to them in relation to philanthropy. It is critical for creating a compelling and persuasive message to such a broad audience.

“I donate money to charities and NFPs from time to time. Because I care about the cause. The cause must align with my values and principles. I am altruistic.” -Juris Doctor Student, David (from user interview)

Scale of altruism

Everyone falls somewhere on this scale of altruism at any given time.

  • Self Interested people support non-profits for personal reasons, like improving their resume or networking with the industry.
  • Altruistic people have a sense that they must do good in the world, to make it a better place.
  • And Reciprocal people possess this karmic belief that what goes around comes around, you get what you give, and it feels good to give.

Archetypes & Personas

research insight, mindsets image
Crafting archetypes

 

We came out with two archetypes, The Bleeding Heart and The Strategic Giver. These archetypes sit on opposite sides in the scale of altruism. Based on these archetypes, 2 personas were born.

The balance between the users and the business

We clearly understand the users and now we need to relate the user’s needs to the business goals. EWB is not necessarily called as a business but we are talking about the balance between EWB and their users here. Here I refer “Close-up altruism” by Christoph Kolb in The Smashing Book 2 (Matt Ward, Alexander Charchar, Christoph Kolb, #2 The Smashing Book: Chapter 7 Applying Game Design Principles to User Experience Design, Smashing Media, GmbH, Freiburg, Germany, 2011, p. 223.).

“Close-up altruism is a related concept from sociology that refers to a person’s altruism towards someone whom they know in order to take part in their joy. Interaction in this case happens through empathy……It enables us to share the emotions and partake in the actions of others as though we were experiencing them ourselves. If the other person feels happy, then so do we. The closer the person is on your social graph, the more likely you are to be altruistic to them. Extending this idea to a business context, we can assume that the closer a company is to its customers, the more good deeds it will attract.”

Being said, fulfilling the users’ goals benefits EWB. To enrich user experience on the website will attract new members/volunteers and engage more philanthropy.

 Users and business
User’s goals and Business(EWB) goals

Focusing Statement

Based on our personas, we came up with a focusing statement that will help solve Nick and Ella’s pain points and address their goals.

“Design a public facing website for simplicity, clarity and usability. It will communicate transparency, impact and personal benefit to engage a number of different mindsets.”

Ideation & The Solutions

Armed with our research insights and a rock solid focusing statement, we ideated with Design Studio to come up with practical solutions for how EWB could achieve its overarching goals of increasing memberships, donations and engagement.

1st Ideation and dot voting
1st ideation result and dot-voting

 

A lot of these ideas dipped into EWB’s strategy, marketing and public relations. While they were not directly relevant, it was a useful practice to deepen understanding of EWB and explore the importance of a website in an overall strategy. We explored these ideas and then worked on the 2nd ideation with chosen topics. We finally made decisions about what was most relevant to focusing statement.

The solutions we came up with :

  • Designing the most important information is on the homepage and that is accessible to call an action directly from there. (1 or 2 clicks away)
  • To show the transparency, use diagrams where their money spent and how that helps the world and benefits the users
  • Use showcases to show the impact
  • Customised information to directly to the use cases by tab options on one page
  • Less text more imageries and videos
  • Displaying a partners list and the EWB team members endorse the credibility
  • EWB to be recognised as a thought leader, created a new menu, Journal where all the News and Blogging to share knowledge between professionals (also to organise the content)


Ideation-Design Studio

Sitemap

We evaluated the current site’s structure during the content audit and discovered that a lot of the content is not correctly categorised. Our aim was to organise it in the most simple way to navigate. Our goal was to minimise clicks for users to accomplish their task – whether its to learn more, donate or sign up for a program.

sitemap on white board
Sitemap in progress on the whiteboard

 

EWB website site map
New Sitemap

Rapid Prototyping & Usability test

With personas and the sitemap in mind, we started sketching layout. We used these sketches for rapid prototyping and testing. After 5 iterations, we made out wireframes.
Check out the EWB-usability-test-report

Deliverables

Wireframes

Demonstrate the wireframes yourself.

We implemented our tested solutions to the wireframes and here I show a few task-driven user flows in videos.

  • “Donate” call to action button is on the global sticky menu for a simple and easy access – for our persona, Ella Watt.

 

  • Learn more about the projects and their impact before donating – for our usability tester, Julia.

 

  • Apply for Design Summit – for our persona, Nick Wong.

Web design style guide

One of the major pain points on EWB’s current website was the content management. We lacked the time to conduct an in-depth content audit(as we did Partial content inventory), we instead kickstarted the process of a style guide from the beginning. We identified some writing goals (educate, inspire, guide) and set some clear principles for how to achieve this (be clear, concise, accessible). We also got started on defining the voice of EWB – powerful, yet warm, informative, yet human. For visual style guide, We chose a colour palette that reflects the image and purpose of EWB – clean, alive, trustful. All colours were tested using the WCAG 2.0 contrast ratio formula. You can read more details in the handout.

EWB colour style guide

EWB typography style guide

High-fidelity prototype

Download the full-screen hi-fi prototype to check out the look and feel.

EWB homepage hifi prototype

Presentation & Feedback

There was the final presentation with the main stakeholder. As his background is in web development, he asked a few technical questions: Whether we had any feedback from the usability testing for the long scrollable homepage and how we think about that it would be too long on the mobile design. We said that we did not have any issue with the length of the homepage and we recommend the mobile site should be designed separately with mobile design strategies to the website. For example, the content should be prioritised and modified to mobile usabilities. Apart from the question, he seemed to be quite content with the results, especially IA for the menu structure and the design style guide handout.

We were also invited for a presenting on their site in 3 weeks. I wish my team members were all there but a couple moved to different countries and the other couldn’t make it at the time. When I got there, there was a media & comms, a philanthropy, the main contact and there were special guests. It was nice to have the special guests because they are the primary users of the website.  They are the university students who just signed up for design summit. Luckily, I had a chance to communicate with them after the presentation. The feedback we got from the audience was overwhelming:

  • The Media & Comms said that it is nice to have the links to the social media and be able to share the articles. The website clearly communicates it is easy to navigate and find information.
  • The Philanthropy said that the solutions to make the visitors donate is subtle, easy and simple. Showing the transparency was really good idea for them to engage donation and volunteering.
  • The students said that they had a hard time to find the information they wanted and had to mainly use the social media to interact. The website looks really easy to use and they enjoyed the presentation especially knowing UX Design for web design.

Thoughts & Recommendation

It was a wonderful experience working on this project. The research findings are not what I have expected from the start but it all makes sense after all. I feel good about the deliverables too as I did something good for humanitarian. I may be one of the altruistic people.

I would love to see the new website in the foreseeable future and I recommend a few things to boost the solutions:

  • To use Web Design Style Guide we created when designing for the content and the visual design.
  • It would be even better to have enhanced Design System for EWB brand identity to show they are the thought leader
  • Working on SEO and Social media marketing to integrate with the website
  • Checking on Accessibility of all online/digital products to help people with disabilities

 

THANK YOU

Victor Hugo Gomes for your passion and enormous of your time spent on this project

Rachel Rafael for bringing up the Content Strategy to the next level

Thank you to Shane Koresac from EWB.