The Process of UI/UX Development for Volunteer Community App

Disclaimer: This project was based of real study-case, and not being fully representing the community

Few weeks ago I was being trusted to handle team’s UX and UI. I was trying my best to build beautiful yet useful UX/UI. These documentation are recapturing my current best practice in the UX/UI field. It contents accumulation output of my weeks training on UI and UX. Some short summary of what I will talk about are:

1. Open a discussion with team about what kind of UI/UX we will make.
2. Did qualitative survey directly to volunteer meanwhile did hands-on by joining their activity to dug deeper about their real problem
3. Discussed with team about the experience, break it down, and transfer the rough solution into app-sketch form.
4. Showed the discussed rough sketch (prototype) to the stakeholders and targeted persona, ask for their feedbacks and improve the prototype quality base on their feedbacks.
5. Did it few times, until it become has proper look to be shown to coders team.
6. The final looks, new knowledges that has been obtained, and the initiations that should be done in the future.

• Bonus: There are process of how I as UX/UI Designer has made the app to have more alive look

Open a discussion with team about what kind of UI/UX we will make.

All ideas are better to be discussed with visible prototype

It was all started by rough sketchs, and being transformed into grayscale digital sketch. In term to build useful features output that really represents team’s work, after making rough sketch, I as UI/UX designer was showing the rough skecth to team in term of igniting the discussions.

In this step, I use grayscale prototype to discuss what kind of features we will be adding to the app. It should be discussed based on flowchart that has been built before. This step is only to help team clarifying the relationship between app and flowchart. For beginning, I was started by designing tap bar screens. Further, I was trying to deepen the tap-bar-pages-features by adding some details into it.

Why use grayscale and not colored version? because by grayscale, our mind and feeling will be more objective. Moreover, this method can help us UX/UI designer to see balance in app structures.

There are few steps before the prototype being ready to be presented to stakeholders and some users will be. First, give some colours to the sketch and try to build ‘real’ app prototype as real as possible. Second, by mimicking final UX/UI look, beside it can save some the team’s time, it can help you to reduce your chance to get low grade feedbacks.

*Note: The itinerary process can be exhausting if it has done by beginner. If you are beginner, it’s better to be done accompanied by someone who has done it before. And ideally, it’s better to be done in team rather than by one ‘superman’ (for efficiency’s and quality’s sake).

Did qualitative survey directly to volunteer meanwhile did hands-on by joining their activity to dug deeper about their real problem

Here are some of our documentation. Dug deeper understanding about what real problem they were facing. Later, based on what we had observed. I as UX/UI designer re-build the app based on what problem we have identified.

*Note: Perhaps, it’s more proper to be called adjusting the UX/UI rather than ‘re-build’ word. Even it may be caused some radical changes of UI. But at least, we will not do a lot of effort as much as build prototype from scratch.

Discussed with team about the experience, break it down, and transfer the rough solution into app-sketch form.

After discussing and rebuild the prototype, we have conducted some small scale research again to look more feedbacks. Adjusting some UX/UI a bit (based on the feedbacks) before shown it to coders team to help UX/UI implement the the findings of UX/UI as real app. Here are the adjustment result.

Making the app alive

Roughly, I learned that by adding some illustrations can make the app feel more alive, and can give organic feels. It can give some awarness that we are not talking to machine, either, it made human presence and make us (the user) are doing interactions with ‘human’. The logic is also represented on how app-icons work…

All of the illustrations was inspired by the pictures that the community has. I was looking for the proper gestures and try to capture it into Illustrations. May be, you see my final artwork (below)is not really high-end, because it was limited by time amount. I was trying to meet deadline as proper as possible, meanwhile the UI/UX designer was only me (It was included the work of researchs, UI/UX, Icons, and Illustrations). I can’t push it further and should press the quality of my works.

For the icons, at the first time I was trying to use free icons from webs. But in the end, it doesn’t have the feelings that I was looking for. Yet, I only use downloaded icons only for prototyping and re-design all of the icons based on the necessity of the apps and adjust it to proper feeling that the app wanna shows.

This project has roughly 6 weeks to be done with 5 personnel (3 hackers, 1 hipster, and 1 hustler). By this event I have learned that building an app was not an easy process and it was came up with a long journey. These kind of skill was not obtained by one projects only. Either, It has been built by accumulations of previous projects that had been done before.

Prototype

After long hourse of concerting and buildings, here are the result of Sketch App prototype version, before being given to coders.

Final look of the app

This is the final look of the app. From coding side. Some features can work properly while some features have few errors that should be fixed in the future. From UX/UI side, it needs more some adjustment to make it cleaner and have more neat looks.