Responsive website and app design for social good – Google UX Course Case Study

Project background

This is a sharpen prompt project which is a part of the Google’s UX course. The assignment was to design an appliacation and a dedicated responsive website for social good, namely I had to create a way to help adults find local causes they identify with. What’s their family, education and work background, how they make part of the community, how much time they have? These were all taken in consideration when I designed the final form of the website based on research and usability studies. In this way every user of this app or website is able to find the cause they identify with and help people or ask for help.

My role

Beacuse this project was auto generated by Sharpen for the Google’s UX course, in the project my role was not only a designer, but in the same time I was a UX Researcher, a Visual Designer (best known as UI designer), Graphic Designer, Copywriter and Wireframe and Prototype designer.

The problem

Every member of the society sometimes needs help or wants to help others. However, this is difficult to do because the news and the media are late in notifying them of who and what kind of help they need. In this way, society needs a place where they can be informed about the request for help, follow it, offer money and even ask for it, all in a way that they can make a decision based on their own schedule, no matter their education, family background or workplace.

The goal

We design this website to help people who want a change in their carreer or want to learn graphic design in their own pace, own language and with a help of a dedicated professional just for them. We want the design bootcamps flow to be easy to understand and use, so people can level up in no time learning graphic design and how to use one of the Adobe’s best known softwares, Photoshop, Illustrator or Indesign.

Project duration

May 2021 to May 2021.

Meet Diana and John

The Research

I conducted an unmodaretad usability study with my family members, beacuse this was a fake project. They had to complete several tasks going through the low-fidelity prototype of the application, then the website’s desktop and mobile versions. These studies helped me to have data to make the app and website better, which I understood by using a note taking spreadsheet and an affinity diagram, after that I defined themes and patterns which led me to actionable and usable insights. After the changes and the high-fidelity mockups and prototype I asked them the second time, what gave me a more deeper and better understanding of their needs as if they were the end users of the app.

The most important pain points

– Participant were frustrated beacuse they couldn’t find where to ask for donations, and this way they felt they are just there for donating money

– Participants couldn’t find the add new button for asking help

My problem statements

Diana (user) is a/an full-time working HR manager and mom (user characteristics), who needs to know when, where and how can she help minute by minute for people (user need) because she wants to maximize her help as a volunteer keeping up the balance in her life (insight).

John (user) is a/an retired, widow man (user characteristics), who needs accurate information in time of recent help requests near him (user need) because in this way he can plan his route and day, because he doesn’t have a driving license (insight).

Usability study

Study type: unmoderated usability study

Location: London, UK. Remote (each participant will complete the study in their own home). In our case my family members.

Participants: Participants were people from all of the ages, work and family background. Three females, two males, between 18-65.

Duration: Each session will last 5 to 10 minutes, based on a list of prompts.

Results: Users didn’t know how to ask for donations, beacuse they couldn’t find a button to start the process. This made them feel frustrated and angry, beacuse they felt like other people just want their money. Another result was that users couldn’t find the add new button for saking help, beacuse it was on an odd place, where users wouldn’t search automatically. This made the feel like they are not authorized to ask for help by others.

Affinity diagram

Low-fidelity application design (wireframes)

Major layout changes

High-fidelity application design

Low-fidelity mobile website design (wireframes)

Low-fidelity desktop website design (wireframes)

High-fidelity mobile website design

High-fidelity desktop website design

Accessibility considerations

The website’s images and illustrations use alt text to allow a screen reader to read the content. Texts are large for the purposes of easier reading and black and white make a high contrast which comes down to a good readibility for visually disabled or ill people and old people.

Conclusion

Overall, I can say that it is much easier to design an application. A dedicated website is difficult to assemble well because some elements that work in the application do not work in a web interface. A good solution would be to use the app as a Progressive Web Application (PWA) as the mobile version of the website. Consider which functions will remain and which will be lost. Consistency and coherence must be maintained. uring the project, I learned that what seems like a good idea at first may even have hidden parts that can make it difficult for you and the decision makers during the design process.