In 2014, I teamed up with Bonang, Reza, Pratama, and Hafiz to develop an app called AkuPilih. This app was developed as a part of hackathon during the presidential election in Indonesia. My role as a designer was to craft delightful experience and nice user interface, as well as to convert the design into fully working Android XML layout . Although we did not win the hackathon, we were very pleased with the outcome of the app and to contribute in the election process.
Problem & Challenge
The main functionality of the app is to display the information about presidential candidates. However, by only displaying the information of the candidates, the app tends to be boring. Thus, we came up with an idea to add some more features on the app, including voting and news feed. These features were added to enhance the engagement of the app.
We also had another challenge in this project. With all of the available information related to the candidates, we need to think the way we will structurize all of the available information to make it user-friendly.
To solve the problem and challenge in displaying the information in a best possible way, we started with creating a set of onboarding screens. This set of screens is used as a walkthrough to guide the new user. The main features of the app are described in the walkthrough with the relevant screenshot from each feature. We decided to use a ViewPager as the layout for the walkthrough. It lets the user move between each screen with only using the thumb. We also put a static button on the bottom just in case the user want to skip the walkthrough.
When the user taps the bottom, they will be brought to the home screen in which it displays two big images of the candidates. As there are only two presidential candidates, we split the screen using vertical ListView as it is easier for the user to see the two presidential candidates without needing to rotate their phone.
As in Indonesia, where there are a president and a vice-president for each candidate, we use the similar layout on the candidate detail screen. For each candidate, as there is three main category of the information, we decided to classify each information according to its category. All of the categories are put in a Tab in which it lets the user move between each category with only swiping the screen. For the detailed information, we use a ListView with a custom card-style adapter. We applied the same design layout for detailed profile screen of each candidate.
News and Voting
As I mentioned earlier that we use news and voting to add the engagement of the app, we want the both features can be used easily. For the news feed, we use a simple ListView with a custom adapter to display all of the relevant news in a single feed. This layout has been widely used and has become a common for the user.
For the voting, rather than putting the two candidates in a vertical list, we opted to put them in a horizontal list with a call to action button on the bottom of the pictures. We decided to put the two images horizontally as we want to make the perception of the user is neutral towards the two candidates. Horizontal listview promotes better equality compared to the Vertical one. Then, what happens if the user taps the "VOTE" button? They will be brought to the voting results screen, where they can see the results instantly. We use a pie chart to show the percentage for each candidate and differentiate each of them with the different colours.
The app was downloaded by 100 users with average rating of 4.2. Considering that the app was developed in less than a week, I think it was a nice result and the team has done a really good job. For me, I was personally happy to give a contribution for the presidential election in my home country.