Kuraconnect App Case study
Kuraconnect is a community based organisation and they have the mission to connect the Papakura Community through fun, culture, opportunity and togetherness.
Challenge
Due to the pandemic, many people who weren't able to afford for many thing and didn't get to know how to ask for help. Therefore Papakura community's public relation communication officer asked for help to develop an app for their community.
My role
Part of a team of one developer. I was responsible for:
-
Managing the project and implementing whistlebox framework to optimize the delivery of the outcome.
-
Organising, scheduling and collaborating to conduct interviews.
-
Collaborating to synthesis research, producing journey maps, creating mockups, presenting prototype and involving in development.
Kuraconnect is a community based organisation and they have the mission to connect the Papakura Community through fun, culture, opportunity and togetherness.
Challenge
Due to the pandemic, many people who weren't able to afford for many thing and didn't get to know how to ask for help. Therefore Papakura community's public relation communication officer asked for help to develop an app for their community.
My role
Part of a team of one developer. I was responsible for:
-
Managing the project and implementing whistlebox framework to optimize the delivery of the outcome.
-
Organising, scheduling and collaborating to conduct interviews.
-
Collaborating to synthesis research, producing journey maps, creating mockups, presenting prototype and involving in development.
"I would like to make sure I am creating something that people want!"
From our initial meeting, the client specified that the focus of this project should be on delivering help to people around papakura community. We chose to start by getting information about people's needs and wants and decided upon which type of framework we are going to use.
Whistlebox framework was used to design and develop this application
Survey and initial discussion
with client
I discussed with the client about the needs of the app and told her about the process of research, design and development of whistlebox framework.
Research
Interview participants were recruited through the client's network and via social media. Due to time constraints, we were restricted by availability of participants and as a result, have identified potential demographical skews and gaps in our data.
Problems
Since many participants wanted to volunteer for their community, Client requested us to create two different apps - one is for the people asking help and another one for people volunteering to the community.
Solution
Due to time constrains we weren't able to make two different applications, instead I came up with the solution of combining both the app into one. But how ? adding buttons in the sign up/sign in process and request the user's to choose as volunteer or need help.
PERSONA OVERVIEW
Userflow
Creating a userflow after finalising the features. userflow had two different paths; one of volunteer and other of need help. Both had their own main menu for the users to decide.
Moodboard
After creating the userflow and asking the client's feedback, I started to create a moodboard to showcase the client how the app is going to look and what kind of typography will be followed.
Wireframes
Based on research I had done and the rough wireframes I had designed, I started building low-fi wireframes of all the screens required for the app. During this process I presented progress to client, workshopped findings and iterated designs as required. Once designs were finalised, I then uploaded these into adobe xd and created a workable prototype. This was analysed and tested in-house, iterated on until it was ready for user testing.
User journey
I mapped out the user journey taken by both our typical users when signing in and using the app. Since many users were feeling it was taking more time to fill in the registration form, we concluded that we should focus on reducing the number of information asked in the registration form.
UI design and Hi-fi
mockup
Once the client finalized the low-fi mockup prototype, the low-fi prototype was iterated on and then finalised. The next step involved creating hi-fi designs in Adobe XD, based on the low-fi screens from the prototype. I used established components and design patterns from the existing Google materials. If new components or patterns were designed, these would then be signed off on and saved into the Kuraconnect component library. Once screens were finalised, the hi-fi was made into a prototype.
Finalizing prototype
and sending to
developer
The prototype was finalized and the component library & design sheet was sent to the developer. I was also involved in the development process. Helping the developer out with buttons and other assets. Once everything was finalized, the app was handed to the client.
Learnings
I really enjoyed this project as it has proven to be my most challenging to date. Truly understanding how the needs of people and help them out, was crucial to this project. I found myself getting stuck many times and realised during testing that I had not asked enough of the right questions during the requirements gathering stage of the project. Fortunately, my client was really enthusiastic about the usability testing sessions and interview process and was happy to contribute whenever needed. Understanding expected outcomes for each step of a process is crucial for the development of an intuitive and useful system that is also future-proof.
have a comment, suggestion or criticism?