Case study: Takeaways from designing a Volunteer App for Students#1
I present the design process of a mobile app supporting the voluntary service of grammar school students to share some lessons learned and design tips with you.
Introduction
This case study is about an end-to-end digital product design process along with the double diamond, though some elements are more accentuated than others. In this first part of this case study, I present the design process up to the hi-fi screens. Many of the hi-fi screens are included in Project Highlights.
In my previous case studies, I presented the testers ’comments and my remarks on those screen by screen. I think this is basically a good documentation method for prototypes. But now, I do not want to be repetitive.
In this first part, I highlight my takeaways at each element of the double diamond methodology that I accomplished in this project.
In the second part, I highlight some UX/UI design lessons titled with keywords that have been reinforced in me during this project. I share my tips with you in alphabetical order, in some cases with illustrations from the present project. These are checklist-like and spreading from very specific or technical ones to general. However, the tips also include lessons learned from my previous projects. In this sense, it is a kind of the first design synthesis from me.
I’m not a UX oracle, it’s just my opinion based on my practical experience.
I also prepared this Case study in the hope that it would be useful for freshly graduated beginners in UX design and career changers.
The Problem
The problem to solve is domestic, though may exist in other countries as well. In Hungary, grammar school students must complete 50 hours of community service -volunteering-this is one of the conditions for graduation. This affects ~400K students if it were extended to students at the universities, and colleges, ~200K more. Currently, there is no central support, no IT-backed central database and unified processes. Opportunities arrive in schools on an ad-hoc basis. Students apply for service by email, in a spreadsheet etc. The task accomplished is registered in a paper-based booklet. In all, everything is left to the individual schools how to manage it, no support, no database, no selection, no record, no incentive. (I do not like its compulsory nature as it looks today, but I think the basic idea beyond is right, volunteering is an inherent part of modern civil society.)
How the current situation could be transformed into a 21st-century experience?
The Project
Though the project is a love one, the problem is real as you just saw it. The design of the application as every documentation was made in English to share its lessons with a wider audience.
Now I run a little forward to introduce my idea solution just to make the case study more understandable. Following research, my suggested solution briefly is GoodDeed: a database-based mobile app, centralised with all schools connected and in which the student can search for opportunities, invite friends, evaluate, save its application and volunteer work would be encouraged by competition and an incentive system beyond the mandatory hours.
The architecture of the imagined system consists of five elements: ministry, schools (teachers), entities receiving voluntary service, students, and sponsors. All these entities are connected in various ways in this ecosystem of GoodDeed. To tackle the complexity I intended to design the student-side functionalities ‘only’.
My methodology was a comprehensive double diamond with more focus on user research, low-fidelity wireframe, documentation (compared to my previous projects). I worked with new tools for me: Google Forms, Draw.io, Balsamiq, Adobe XD. The polished visualization and presentation of the results of UX research were now out of focus.
For beginners, I would highlight three takeaways at this point.
1) I suggest experimenting with various tools to a) increase your flexibility and get inspiration b) identify those who fit you in the longer term.
2) When you build your portfolio from scratch as a designer everyone suggests the redesign of existing apps and websites to start with. I understand why but the three hundredth redesign of Spotify or Revolut does not make sense for me. I am not against redesigns in general, just suggesting bringing in some originality as a rule of thumb. I’m sure you’re surrounded by real-life problems that you can design for. If you can, find an ‘own problem’. For me, it has a higher value, though I am not a recruiter.
3) No one can expect you, as a beginner, to develop all elements of UX design to the same standard in a project. Figure out what you are putting more emphasis on in a particular project. Vary the focus from project to project because that’s how you learn and develop. Not with an easy heart, but you have to make the decision of what to skip from a project, otherwise you will never finish it.
UX Research
Why do we do UX research? We want to draw a user journey with pain points for which we are looking for solutions (the so-called How Might Wes’ to user needs). We define a persona and the potential features for its journey.
In this case, researched a small, gender-representative sample with an online questionnaire. I have already presented the results of the warm-up block of my research questionnaire separately with methodological tips and a summary of contents here.
Now, I will only summarize very briefly the results of the main part of the research: what is the relationship of grammar school students to community service and what output does it represent for the design.
My questions covered the topics: information gathering; experiences; the range of services; how do they accomplish the service; incentive system; certification; and feedback. The key findings of the research were as follows.
56% already did community work before grammar school. These were various: garbage collection, street cleaning, volunteering at sports events. The usefulness of the service is seen from a material point of view: ‘they can’t don’t want to do, it helps them, I am a free labour force for them’. It is useful for 2/3 of them in ‘gaining experience’.
Everyone has heard that 50 hours of community work needs to be done.56% already looked at what exactly community work is and what can be done. Where they did search for information: internet (23%), school’s website (11%), institutions (11%), logically. There was practically none. In fact, the school, the head of the class was the main source of information for them by far. Only 1/3 thinks there is enough information about the service.
Even with limited experience, they can imagine performing a wide range of activities. In practice, this range can be even wider. 1/3 of them would not perform certain activities. For them, more information or incentives may be needed. These include physical work, eg construction, agriculture, hospital work.
They want to complete the service as soon as possible, without leaving it for their graduation year. They would take half a day (44%), even a full day (25%), weekly. Geographical proximity is an important consideration (30% would perform locally), but if they can perform with friends, e.g. weekly shifts, even by spending the nights there, would be undertaken anywhere in the country (20%). More than 80% of them would sacrifice up to a week with friends for community work.
Incentives can help to engage them in less popular activities or accomplish more than the mandatory 50 hours. Otherwise, if they can choose from a wide range of activities presented in an interesting way that covers or expands their interest, and can go with friends, then not all or not everyone needs a special incentive. The incentive can be a point system to consider for grades, admission to universities, or even a financial incentive. Intra-school, inter-school competition can have prestige, and motivation can play a role in this.
To sum it up again, the outcome of the research are persona, AS-IS journey, pain points, user needs, potential features of the app.
Some of the takeaways here could be as follows.
Although top-down thinking is a popular approach in consulting e.g. when formulating a strategy due to savings of resources, I don’t think in UX design this is the way to go. No presumption can substitute or eliminate the UX research, even if a lot of those are confirmed by the research many times over. Questions can only be: what, why, how types. But even with that in mind, I mistakenly asked a question. There is a lot of (free) software to support research work, but the fine synthesis and visualization of the research results have their own beauties and skills (e.g. DataViz) required to master.
In real life, or even at your projects for portfolio building when you can not conduct user research you will accomplish desk research most likely being part of UX methodology. I omitted it this time, partly since there was only one domestic app for volunteering made years ago to with a much wider scope, targeting adults, but seemingly was not working/not used/not known by a lot of users. Though there are a lot of foreign ones I thought my project has its specialities. I decided to pull it out of the focus. It is not right normally, of course.
The Persona
The definition of persona in this project is particularly simple, it is the average grammar school student. Thus, I will not go into detail nor into spectacular visualization of it. The only thing I see as a distinction among them is how extroverted or introverted they are. In my sample I think the vast majority is extroverted, social media pushes them to be so, too. But, nevertheless, 50 hours of service should be accomplished by all of them, regardless of their personality. This latter only affects how they use or don’t share and invite features. Thus, I identified this persona and I called her Gemma Goldenheart for my project and design.
Recently I’ve heard from a UX design presentation jury to relativize, in a sense underestimate the importance of the persona. ‘Ok, we are doing it, but it is not a key something.‘ However, I think one substance of the design is empathy with the user.
The takeaway here is that many projects in life are much more complex than this. This means you may have to plan for more than one persona. But if you have more than three, start to suspect and rather think through it again focusing on key behavioural patterns. Otherwise, your product may be too diversified, complicated, unnecessarily, and expensive to develop. You can accomplish your persona simply, but also can rely on the various persona creation tools thus can make a good and nice looking job here.
The User Needs
On a high level yet, but the main user needs of Gemma are identified following the user research:
The AS-IS User Journey
To understand Gemma’s problems, and to find solutions, we should dig even deeper to identify her pain points in more detail. Based on the research, we can draw, for example, the following, quite typical AS-IS journey, thus, how the process looks as of today, before any design.
The takeaway here is that as a minimum, you should provide the Does / Feels matrix on the level illustrated above, at least for the user journey/journeys. Visually any way you can do it, the key is that the pain points being visible. As How might wes’ to her the pain points we get the set of potential features of our solution (which is GoodDeed, the app).
Feature ideation:
You can brainstorm the features with the special, but a not exclusive emphasis on the pain points. Most likely you will get something like this, below. It is a kind of fireworks of ideas, mixed in your mind.
You should organise all of these somehow eg. with card sorting etc. Another option is that, what ‘I was lazy’ to do this time if you number the AS-IS journey elements and try to assign features to those ones, one by one.
The TO-BE User Journey
When all of the above is done, you will already have a vision about how it would work, with an imagined TO-BE Journey in your mind. Thus, how the whole process may look like for Gemma if supported by an adequate solution. You can draw it on sticky notes like the AS-IS journey.
These are above still no screens, just actions described step-by-step.
You may wonder why there is no feature at ‘accomplish volunteering with friends’. It seems logical that the students feel well, they will record their work and mood making photos, for instance. This is also an example of design decisions about what to include in or exclude from a solution. Since the core function of the app is not social media, I only kept ‘ratings’ and ‘tips’ from that world.
My takeaway here is that if your project is for portfolio building purposes only, you may stop here with this part. Even if you stop you should have a look at the features again for the TO-BE Journey.
Feature selection
Features are like temper: they break free. Even if you are not a beginner in UX design, the list of potential features is very easily multiplied, uncontrolled, either by the perceived or real needs arising from user interviews or by the solutions seen in competing or other applications during the desk research.
The implementation of each potential feature makes the project complex. It simulates real-life well, however, when entire teams work on complex projects. From the tasks, a novice UX designer gets subtasks. When a novice designer builds a portfolio, mostly works alone. One thing is for sure, resources are limited in each case: time, budget, human.
Therefore, the features must be prioritized and filtered. There are a number of methods for this, with similarities. It is necessary to define the MVP and the blocks to be built upon and developed later or nice-to-have ones.
This is the procedure to follow. But since my goal in every project is to develop my skills in several things, I have now targeted full product design. The palm tree grows under pressure. My takeaway, however, for a beginner in UX design, is that I suggest limiting yourself to MVPs and make more of it rather than getting lost in complex product design which is maybe too early on your UX path.
So we have the TO BE Journey and the features on sticky notes.
In real life, however, I think this can be the point when you as a designer should share your still pre-tested version of your concept with your colleague the IT developer call it anyhow. If you do it in a more formalized way of a flow chart this may help to have a common language and understanding of the product. This way, you can establish healthy cooperation with that function, Colleagues, but also reduce development
I skip it now, but you can attach the features here as well to have a complete document.
The flowchart …
…mapping the user flow is as follows. It is a rough draft version that needs to be refined and further detailed in real life obviously. It also helps to compile the information architecture of the product.
Low-Fidelity Wireframes and Testing
I present the Lo-Fi Wireframes by blocks highlighting some output from the testing. Additional changes were implemented on the High-Fidelity screens already.
The most important takeaway I think is to never skip the low fidelity sketching/prototype part in your design process. If you are in the position to do so, refuse all work when a client, c-level, owner, superior, etc. do not let it possible to accomplish lo-fi due to eg. financial constraints or to whatever reasons. Why? A lot of things could come out of it to change/skip/include etc. early on without making huge efforts on hi-fi screens and adjust those substantially following the first user tests, thus, making the design process longer-lasting, more expensive, frustrating.
The other takeaway is that, despite the fact that Lo-Fi is supported by either dedicated software like this Balsamiq or plugins to Figma etc. I think that hand-drawing skills are valuable and differentiating. You can make sketches and prototypes anywhere and very quickly. Your ideation is not limited by the softwares’ built-in features and UI elements. In this automated, computerized post-industrial world it is sexy, to be honest. For me definitely, since I don’t have that ability.
Now let us see some outcomes from testing and suggestions for improvement.
The testers suggestion was that the app is introduced after registration. Reason: the faster you can enter an app, the less user you lose. In this logic enabling location access should also precede the intro clip. This will simplify usability later, omitting buttons, etc. Testers wanted to omit login, but due to privacy and security reasons login can not be omitted. Due to the persona’s habits, I permit login with face recognition, too, beyond fingerprint. Since it is not a social media app, I omitted access to the camera. Thus, I also left out scanning the education ID card, since there is a database and if the student enters its ID number, all data on the next screen should be prefilled automatically. On the Home/Dashboard the key information is suggested to display separately, highlighted which is Work Done/Needed in hours. Saved items were put in Profile (similarly to Instagram that they use).
On the screen #7 if the substance of and the main CTA of the screen is a quick search, then put the search field on the top of the screen, not to the bottom. In the previous version of the lo-fi wireframe, I had both button and icon for SEARCH. Just keep one SEARCH, otherwise, it is confusing. If the icon remains, put it in the centre position and even highlight it in a larger size. Leaving the SEARCH button as is can still be a better solution because it is more prominent in the foreground and it is probably the most important feature of the MVP. I had several icons in the quick search field. Due to testers I only kept location, removed all the others, since the box is too complex.
In the advanced search on screen #8, I included a text field e.g. search for the name of the institution letting the users search that way too. (it was missing previously). On screens #10 and #11 I only kept the filter upright and thickboxes were put in front of each result. In a previous version, there was APPLY on screen 11. The design decision then was to only apply from an entity's detailed fact screen (#12–14). List only can be shared with friends/classmates as it is in this version.
Screens #12–14 were too dense and with keeping the current content, I redesigned those in the hi-fi version with eg. iconised information below the pictures, a lot of white space etc.
On screen #16, as mentioned above, the main CTA button was changed from APPLY to SHARE WITH FRIENDS and the share icon upright was then needless. Screens #17-19 remained basically the same. Screen #20 displays the initial date search period for a specific entity. In that case, the Calendar shows the reserved and free dates as well.
On the screen #22 initially, I thought that the entity generates a QR code that the student only scan with the app. But it is completely unnecessary because the institution where you accomplished the service just fills in the remark. All other data is prefilled by the system. since it was stored. Feedback should be voluntary, thus, can be skipped as always. Rename the last screen to ‘My Prizes’ since it is misleading now. On the screen #25 as I mentioned the key info should be highlighted in the hi-fi, namely, in this case: you accomplished the minimum service, 0 hours are needed.
On the screen #27 testers gave input on how to display to points needed and the discount on the hi-fi screen, there was a heavy debate on this. Desk research of online cloth shopping apps helped.
My experience shows that lo-fi screens number can exceed by over 50% the number of sticky notes while hi-fi can even mean tripling the number of lo-fi screens.
Testing
The takeaway is as no digital product developments should be accomplished without lo-fi proto the same is true for testing. Just an illustration, these were some of the remarks above that I received from my testers. Coming back from being too technical, I would even suggest 2 rounds of lo-fi testing if needed.
In this project, while I asked students in the user research stage, the school year then ended and I tested with my ex UX classmates Anna Árpás and Gábor Kiss. Thus, in the case of the lo-fi prototype, there are at least two major topics to be tested with students. 1) Do they use the QUICK SEARCH or the DETAILED SEARCH screen or both? 2) Do they share the SEARCHING RESULTS one by one or as a list?
To conclude we arrived at hi-fi screens. You find a lot of those in the Highlights of the Project here. To sum it up, this project is about the GooDDeed app. It is a full VP concept and a user-side digital product design for students that make the volunteering related current processes smooth and encourages extra voluntary work supported by an elevated level of user experience. Assuming a central database, community service opportunities (volunteering) can be searched, shared with friends, and done together. Certificates and feedback are stored in the system. The involvement of private sponsors allows competitions and incentivise students to undertake more than compulsory.
Thank you for reading this first part.
Let me suggest for you to read the second part for checklist like general or specific tips in alphabetical order, with some illustration. I intend to disclose the clickable prototype at a later stage.
It is my pleasure to recommend my other writings here on Medium and you can reach me here.
