kimson-doan-AZMmUy2qL6A-unsplash (1).jpg

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. 

image.png
Wireframes.png

"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. 

Screenshot 2021-01-07 202603.png

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.

Report.png

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

Frame 7.png

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.

image.png

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.

Wireframes.png

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. 

Frame 13.png

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. 

Mockup_02,2.png

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?