PYCP Youth Group - Administration App
Prototyping Tools: Sketch
Technologies: CSS, React, MongoDB (refactored to Firebase)
Github Link: Project review
my Role
Product Owner
UX Designer
the Client
PYCP is a youth group who help and support children and young people in the local community. They rely on funding in order to provide safe and engaging activities in order to give children and young people a better chance in life.
the Challenge
To redesign and refactor an administration app for staff use at PYCP.
the App
It was originally started by a cohort of Software Developer graduates in October 2019. The app had been through a number of two week sprints and was in need of a UX focused team to bring the app back in line with the clients needs.
The Users of the app are a variety of staff members at PYCP each with differing roles. The app collects data of all the youths coming into the project. The app also allows the user to create attendance records for activities put on by the youth center.
Overall functionality:
> homepage - navigation to all areas of the app
> a consent form that is filled in online by admin staff or can be printed out blank to then be filled in by hand which the staff at PYCP then fill in on the app - wish list is for this to be filled in at home online by parents/guardians
> data reports are generated based on search options (funding data, allergy data for the kitchen, age groups, medical condition etc)
> activities and clubs are created while assigning individuals or specified groups of individuals
> attendance registers are created for the activities
> a child or youth can have a restriction imposed on them which is then tracked in the app
> quick contact numbers page
> CSV file upload functionality
the Team
3 x Software Development graduates.
We took this project on at the end of March 2020. Due to COVID-19 we ran this 4 month sprint remotely.
We formed as a UX Design team in order to re-evaluate the project. This lead to re-developing the app but with the users needs and client expectations firmly at the center of its existance.
our Process
1_ Understand the existing codebase - the IA, the code, previous documentation
2_ Build a good relationship with the Client
3_ Undertake a research phase, empathise with the Client, identify the problems
4_ Explore our findings from the research in the form of wireframes
5_ Gather feedback from the Client
6_ Rework wireframes into higher-fidelity designs
7_ Write documentation along with a new main brief that looks at all aspects of the app
8_ Implementation of the code refactor, testing
9_ Hand over to the next team
1_ Understand the existing codebase - the IA, the code, preivous documentation
We inherited a codebase much larger than any of us had worked on before. We took time to immerse ourselves in the codebase in order to make sure we understood what already existed. We found the documentation to be scattered which led us to later rewriting a centralised brief.
It was through us breaking down every component, investigating the reasons for certain functionalities, asking ourselves questions, constantly retesting what was there to find bugs, questioning the information architecture and following the flow of data that we came to realise there were issues.
This was no one's fault. It is a consequence of what happens when a project like this goes through many iterations by a new team every time. We identified the need to step sideways, press pause and reassess the entire app.
The structure of how we inherited the app is shown in the frame below.
Some initial concerns:
- there should be no deleting of data so easily, the app deals with confidential information, sensitive data and GDPR regulations must be followed.
- there was no persiting of attendance registers
- naming of components were misleading
2_ Build a good relationship with the Client
As Product Owner I set up correspondence with the client and consistently kept them in the loop. I took time to listen and empathise with the client so that we could fully identify the issues with the current state of the product. Understanding the pain points were crucial if we were to improve the user experience. I explained early on that this iteration of the project would involve increased input from them. I explained the reasons for this were because we needed to bring the app back in line with their expectations.
Through clear correspondence with the client while having in depth discussions with a group of them we discovered areas where we could actually benefit both the business as a whole and improve the existing work flow for some of staff.
An example of this:
- adapting the questions on the consent form to suit the data that was needed for funding bodies while at the same gathering crucial information that could also aide the staff in better providing the right kind of activities for the children and young people.
3_ Undertake a research phase, empathise with the Client, identify the problems
As we were working remotely we used Google Docs to conduct questions and gather written feedback. We also had many interviews via Zoom video calls. These were the prefered technologies of the Client.
As the project developed we set up a Google Drive and kept a Trello board for any future teams.
4_ Explore our findings from the research in the form of wireframes
Using Sketch I was soley responsible for creating wireframes. With now new designs based on our research findings I began by creating low-fidelity mockups, iterating constantly and constantly questioning.
We updated the colour palette and implimented accessibility standards.
Some early wireframes:
As a comparison, this is what the inherited app layout and design looked like:
5_ Gather feedback from the Client
Sharing the prototypes via a Zoom call and having the client feedback live was a successful way to get the finer details approved promptly.
The questions we put together for the client actually lead us to being able to interview the staff who were responsible for applying to funding bodies for PYCP. We were able to increase the potential for PYCP to reach funding bodies that they were previously unable to as they had not been able to gather the data needed for evidence.
We achieved this through careful UX writing so that the right questions were on the consent form - which goes out to each individual child and youth when they come to PYCP.
This was a positive outcome for both the client and the business as a whole and one that our team felt proud to have helped with.
6_ Rework wireframes into high-fidelity designs
The next step was to begin to create higher-fidelity prototypes and show the client how the updated version of the app could work. Having joint evaluating and analysing sessions with the client as well as within our team of these prototypes made sure we were keeping on track.
I really enjoyed this stage of seeing all of our work so far come together.
7_ Write documentation along with a new main brief that looked at all aspects of the app
The new main brief was extensive and it included everything in one centralised structured document. This was an important part of our work as a team as we set a goal in the beginning to hand over the project in a professional, clear and readable format.
I also found it great to be able to look back and see how far we had come as a team.
8_ Implementation of the code refactor
Starting to code our changes and improvements was really exciting. Although we did not get as far as we had hoped to with this aspect, it was very fulfilling as a team to have been able to code our changes and implement the redesigned work.
We did a large amount of work on refactoring the architecture of the codebase. This was a great way to learn more about larger codebases and useful experience in building the flow of the information. This part of the refactor also meant that we had to communicate well with each other in order to avoid code conflicts.
We practised Agile methodology throughout the sprint. My own interest in Quality Assurance meant that I placed emphasis on manual testing as we went as well as mainting quality throughout our working practises.
Rewriting the backend from MongoDB into Firebase was a major job for the next team.
9_ Hand over to the next team
We successfully passed over the project to the next group of Graduate Software Developers in July 2020.
