Designing Based on User Intention
One of the issues in application development for newcomer of developer or designer when comes to the design is not aware of the intention of their client or the purpose why the application would be made. We once said as long as we do have a beautiful UI is enough and then without realizing it is a subjective matter. You will totally agree about your own perspective, but maybe your perspective couldn’t be seen by other people, which means your perspective is not covering all of the user's interests. Since the application will be delivered to your dear users then you need to consider another perspective for them too. Also, remember design is not just about decorating your application to get visually pleasing but also about the principle you need to put in it in order to engage more and maintain your users to use your application, and we knew that part is a job for UX designers because it is related to user experiences. So it’s important to know better about design right since our users are a number one to be considered while developing the application.
In this article, I will share with you how do my team designs a UI but also considering the UX part in order to boost up an interest to both our clients and users through the application view and flow. I would totally suggest you read first another blog about our user persona because this article will use the same persona to guide us to design the UI and the UX. But don’t worry, I will try my best to explain each part without you read that article first. If you feel lost then I think you need to read it first then, peace!
User-oriented
The one and only one, an absolute one, a key root concept of everything to boost the interest of your application is designing by knowing well your dear users. Knowing them doesn’t mean know their privacy or information has not related at all to our application, but it’s about what they truly want from our application. It will help you to scope from what you are going to do while designing.
This is my personal experience working on UI/UX, there are a lot of key concepts ou there to notice while designing your application such as minimalistic, accessibility, hierarchy, and consistency. Some of them could be contradicting each other and of course, it depends on your application requirements. For instance, you really want to achieve a minimalistic view, but you need to throw away accessibility. Some circumstances, you don’t want to that happens because you want to keep both of them in balance. If you are UI/UX designer, I know this one of the hard parts for you to solve the problem, this is why UI/UX designer needs to be paid for. Here is the part of the root concept that I just tell you before comes to help, remember who is going to use your application in the end, what are your users true desire to use your application, or why they want to use your application so badly. By answering those questions, it also answers your problem to choose the best one as your consideration for your customer. For instance, your users don’t care about the view, but the more important is the accessibility aspect since it should be used by any different experience of users so you will prefer to consider accessibility more than minimalistic.
The point is if you have any problem while designing, then back to the root problem, your user true intention. That’s why I told you before the persona will come handy for us since it describes the different intentions of different users and will guide us to design more organized.
Flows Design
Making any flow is not always be one way, even though you have successfully implemented one, it doesn’t mean it permanently will be the best one. Human wishes it never ends, including this case, it tends to always change in order to get the best one. The question is what kind of the best one we are looking for? As I said before, back to the root problem, yes your user intention, then design your flow perfectly suits your user interest as possible, because they are the only ones who are going to go through the flow, right?
Here is one example of a feature that we did for our clients/users. Short story, our clients want to have an application that could be able to send a tuberculosis report from their phone anywhere in Depok immediately. These are keys we concerned from their persona related to that feature:
- Clear, easy, and effectively send a tuberculosis case report.
- Well operate a computer.
- Well operate a handphone.
These keys are actually having enough information to design the feature, in our development we named the feature as Investigation Contact. The second point and third point actually just help us to design it more easily because we are not going to create really super friendly form that takes them to understand them more than just words. So we could only focus on the first point, as you can see that point forces us to implement the feature with a minimum effort, a normal/basic form from what people always see in another application, and has not complicated form. Here is the result:
Even though we split one form into three pages, it still has a minimum effort because one page or three pages have no different too much or have a slightly different effort time to fill the form. The side effect of this way is the user will more aware of where they are and how long it needs to take to finish the form.
Notice that there are four pages, the last one is a confirmation page that gives you a confirmation that you already sent a report to the server. This is not a decorated page only, this is actually crucial to have a page like this. by showing this page, it appreciates your user that they finally send the form successfully. Imagine if you don’t have one, it will confuse your user, or maybe they think it fails for some reason and then will refill the same form again.
Talking about easiness, successfully send a report is actually not enough. Imagine you need to edit the form that you have sent before because of the typo or do common mistake when filling the form. Thanks to Pak Ade Azurat, this idea comes from him and he suggests to have a feature that could be able to edit the form from logs and here is the part of our team really appreciate that idea, we were doing a little change to the current design and try to apply the feature with existing pages and we are not having a problem to add more workload. Because we really want our clients/users really get what they really want.
As I mentioned before, we were not creating any pages in order to implement that feature. We are using exactly the same form as before but have a pre-filled form when comes to edit, so the user could change only what they want without filling the form from start again. Here is the only one we add, the logs.
Visual Design
You notice that we used green, white, black, and gray colors on our mock-up. The reason is simple because it’s social and medical application. But each color like green has a lot of different colors as well, it can be dark or more a little bit young, so which one should I choose? How about the font or the component shape? Here is the part that the UI designer will be paid.
Color
Again, see the root problem while designing visual design as well, yes user intention. In the persona, a range of their age is from 30–40. We see this range age still as young-mid age, still in fresh. From this information, we were agreeing that we should pick those four types of color with young colors as possible except black, the reason is to please their eyes by not choosing the dark color.
Actually, gray color has its own reason in our visual design, choosing a gray color is not just picking randomly, having a gray color is because we want to order a focus of the user. Let see the picture below:
The first thing you notice is the date right? The second one perhaps the detail of each log that is colored by gray and finally the circle that a little bit more whitest than another gray color. This is what I meant about ordering the focus of the user by colors, we were actually designing like that intentionally based on priority to see first.
Font
You noticed our font and actually it’s consistently used in both mobile and web. We had not much trouble to pick a font, as long the font is pleasing to see and readable by any normal person, then it’s okay. Based on persona we knew that our users are young-middle aged people and workers. So the priority should be clear and easy to read so they could have an easy feeling and could work effectively, that’s why we choose that like-font. If there is a better font that also suits those requirements that I just said, perhaps we could consider it, but couldn’t change immediately because there is another factor to consider that is branding, I also have another article talks about it, check this out.
Shape
Simplistic is one of our design styles, this is what we try to apply on shape aspect. Since we should improve readability, then pick a simple shape is a good approach. We only provided a rectangle, a circle, or combined between rectangle and circle. Simple as like that.
As you can see, we also used a consistent shape both on mobile and web.
Takeaways
Always remember, understand your user want. The only one to be the root concept of designing is your user intension. It will bring to the act that what you should do and what you should not do. What I just tell you is only a small portion of the concept out there to work on UI/UX, but I hope it will give you a good sense of how to work on UI/UX environment. Thank you for reading this article.
