For many of us in the course in General Assembly, hearing the words responsive makes us nervous, for it brings up thoughts of creating multiple layouts using Axure. Nonetheless, this project was the most fulfilling one so far, as the product was for an NGO, The (TSA).

About The Salvation Army

TSA is a Christian organisation that manages charitable activities in the territories of Singapore, Malaysia, and Myanmar. They organise fundraisers, social services, family support, youth development, and more, run by social workers and an extensive network of volunteers.

The brief

We were given 10 days to redesign the current TSA website in groups of threes. Fate decided that I was grouped with Camilla Loh and Penny Seow, who were both previous art directors that I was very excited to work with. We had to use components from the Design toolkit where applicable, including research, synthesising, ideation, prototyping, user testing, and iterations. These will all come together in a pitch to present to our instructor and teaching assistants.

The process

We began with a heuristic evaluation of the current site using LEMErS heuristics to determine usability.

Table depicting results of the heuristic evaluation of the current website

The bottomline was that the current site was high in learnability due to the essence of the website — mostly informational and does not involve many decision-making processes on the user’s end. Unfortunately, it was low in every other heuristic. Throughout our redesign, we also focused a lot on improving the site’s efficiency, so that users can have a better experience in searching for information.

We moved on to a quick content audit to inform ourselves of the existing information being offered by TSA. With an 82-year-long history, we were surprised by how shallow the information was, which didn’t seem to provide much value to the users. This had to change as well.

It was at this point that our group realised we knew next to nothing about TSA, what it does, and what it offers. Our knowledge of them were mostly obtained through word of mouth passed down from generations. So, to better understand our ‘client’ and to align the process with its business goals, we created a mission model canvas.

A mission model canvas, adapted from the business model canvas.

One of the main takeaways from creating the mission model canvas was their mission achievement factors by understanding what success means to them, we can better link their goals to ours, an incredibly essential part of product development for an organisation, and will go a long way when we’re selling our redesign ideas to the client.

We then began the user research phase. To source for interview participants, we visited the famous brick-and-mortar thrift store in Bukit Timah well-known by many Singaporeans.

Participants include:

  1. Ronald, 52 years old
  2. Mr Tay, 70 years old
  3. Nicole, Caleb, and Adam, 17 years old
  4. Jimmy, 54 years old
  5. Lucien, 43 years old
  6. Jae, 40 years old.

We managed to get a good mix of people of different ages, and on our own, we interviewed an ex-volunteer of TSA, as well as a previous beneficiary of TSA’s support services. We explored the participants’ perceptions of TSA, what they know of them as an organisation, their donation/volunteering habits, and why they visited the thrift store that day.

In addition to getting a fair number of research findings, the field trip bonded us as a team which I believe is essential in getting our best work done.

From the research findings, we then synthesised each point into an affinity map.

Courtesy of Realtime Board, my new love which helps me to save the environment by using digital post-its.

Our main insights were:

  1. Users realise that donations are a large part of TSA’s charitable activities.
  2. Users like to be trendy and unique, so they visit TSA’s thrift stores for one-of-a-kind items.
  3. The prices at the thrift store have been marked up recently, so users feel indignant if they don’t know how TSA uses the funds they raise.
  4. None of the users we interviewed have visited the website before, because they don’t feel the need to. Especially for the older generation who don’t speak English, the current website lacks accessibility as well.
  5. Volunteers and donors only visit a thrift store near to their workplace or home, so they are unsure of other TSA locations.
  6. As assumed, most of the users discovered about TSA through word of mouth, which validates their strong reputation in Singapore.
  7. Users also understand that TSA is a Christian organisation and a church, which means that they are strong in their Christian beliefs.

From that, we were able to move on to coming up with user personas. Despite it’s controversy and possible fallacies, creating personas is an important practice in UX that we decided to carry out in order to establish higher empathy with our potential users and better understand their needs.

In addition, we created customer journey maps and service design blueprints to further understand our personas’ feelings throughout their journey in interacting with TSA, and in turn provide opportunities for TSA to improve the entire experience. If you’re interested to view these diagrams, you can view them in the presentation deck at the end of this article.

We then concluded our research phase with a deciding problem statement and solution to come to a design direction.

Doing this then helped us to create a core strategy statement to drive us to a single goal.

Core strategy statement:

To engage more volunteers and receive more donations, we will showcase inspiring stories and enriching fundraisers that provide users with a sense of fulfilment and involvement.

Categorising the current content into critical, important, and interesting allowed us to develop a good hierarchy on the site. We also carried out a quick card sort to determine how to better design the navigation headers, and a tree test exercise to validate if our placement worked well with our users. The results are as follows:

Results from the card sort exercise.
Results from the tree test exercise.

Overall, the findings allowed us to better recreate the site’s information architecture that was tried and tested with users. Now that we know where information should belong, and exactly what we should show, we were ready to design the product.

Alas, one final step before proceeding with the wireframes — feature prioritisation. We couldn’t do just anything and definitely not everything, so a 2×2 Effort by Essential matrix helped us to prioritise.

And with that, we created our first working prototype using Axure.

However, no UX project is valid without usability testing. We carried them out in two rounds — firstly with a mid-fidelity prototype, then a round of iterations. Then again with a high-fidelity prototype, then another round of iterations before we settled on a final product to present.

Results from two rounds of usability testing.

In both rounds of tests, we also gave users 6 tasks to complete and calculated the metrics based on time taken (in seconds) to complete each task.

Our findings show that there was an average of 65% improvement in time taken after our revised information architecture and design of the website.

Key changes of the website redesign include, but aren’t limited to:

  1. Reducing the number of top-level headers from 9 to 5 for easy navigation.
  2. Changing the design of the top-level headers from click-only to hover and browse:

3. Creating entire pages to provide more information to users such as community stories that appeal to a volunteers’ and beneficiaries’ emotions:

4. Expanding upon their event page to include a calendar that allows users to view events at a glance:

5. Embedding a local map to the directory of TSA centres and stores for users to easily find one near them:

View our presentation deck here and our working prototype (responsive on desktop, tablet, and mobile) here.

Special thanks to my beautiful teammates whom I’ve had such a lovely time working with, for this project would not have been possible without their collaboration and mutual guidance.

What do you think of the redesign? Feel free to leave some 👏👏👏👏👏 and a comment below if you enjoyed reading!



Source link https://uxdesign.cc/responsive-website-design---the-salvation-army-singapore-f9b58115c745?source=rss—-138adf9c44c—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here