Hello guys! how is it going? So a few days ago I got a kind of design challenge from a local studio to redesign three mobile app screens/pages. I’m a little bit excited so let’s go to the study.
AKSes KSEI is a state-owned enterprise (BUMN) facilitating finance information for Indonesian investors to access and track all their investment portfolios like equity/stock, bonds even cash in RDN (Client Fund Account). Here are three screenshots of their mobile app:
Defining the Problem
As I write this, the rating on the Play Store is 2.9 out of 5 (from 977 users). A lot of people complaining about the usability and the function that didn’t work properly. But I’m trying to solve on the visual and UI side so I try to do a Heuristic Evaluation and here is some visual problem that I got to redesign purpose:
- Visibility of system status:
The menu, navigation, and flow are confusing and creates some cognitive load for me as a user, including the default of no profile picture icon (as you can see on the right top of the second screen). Another example is the menu on the top of the pie chart (third screen).
- Consistency and standards:
There is no brand identity here, I really confuse about what is their primary color exactly because there are different shades of red on every page even on the website is another different red. It is clearly confusing and hard to remember for the user not only on the product but also on the usability and creates an ineffective experience.
- Recognition rather than recall:
Like I said before, too many recall elements rather than recognition. In short, the cognitive load is too many. I need to understand first and learn about the flow again and again and still confuse where am I and what and why the elements are supposed to be there.
- Aesthetic and minimalist design:
Too many unnecessary elements distract users from the information they really need. No hierarchical and priority information was provided. And I think the layout, typography, and colors didn’t meet the standard principles of UI design.
Ideating the Solution
From the problem defined above, the point I should prioritize is creating consistency by redesigning the visual to meet the UI standards and to improve the experience. So I do a little bit of competitive research both from direct and indirect competitors to expect a standard and to improve the identity, consistency, and usability on the visual side. Here are some competitors and mood boards:
The first three apps is Bank Jago, Ajaib, & Bibit. They clearly had a clear identity and consistent design (typography, color palette, layout, icons, etc.) that creates a good experience for their user (based on each app ratings). The latest one is the IDX channel who has correlated with AKSes as a state-owned enterprise/BUMN. The thing is the IDX has more mature on the design side, they had the same main color and I’ll take the blue secondary color from IDX.
Design & Result
So here is the final result of the redesign version. I'm trying to rebranding the logo first, creating the color palette, and defining typography. As we know its brand identity is red, so I need to be careful because red is familiar for error signs and down or losses. So I did replace some elements using an alternative secondary blue color I took from IDX Channel. The rest is I design over the layout and creating a few style guide pages for deliverables.
I think it’s enough until here. Everyone, thanks for reading! Suggestions are welcome, hope you enjoyed my study :) See you!