This application is meant to be used by kindergarten kid's parents. They can see basic information like calendar, payments pending and covered, check out request (when parent arrives to school and request his kid from the app), daily activities (activity feed), chat (school - parent conversations). The app was functional at the time when my client posted this project but he wanted to improve UI.

UI Designer

Full mobile app & tablet app design

Design file (Figma)

Style Guide, design assets and components

At first my client wanted to have the following pages to be redesigned:

Home Page

Activity Calendar Page

Chat Room Page

Payment Page

Feeds Page

Later my client asked me to design these additional pages:

Log In Page

Profile Settings Page

Check Out Request Sent Confirmation Page

First I needed to analyze the app from screenshots my client had provided. After taking a closer look I found some areas that could be improved:

Improving the existing home page

Redefining the color

Tidying up incosistent spacing

Separating pending and completed payment using tab view for easy navigation

Replacing the existing icons with more representing and similar style icons

The existing home page was so empty. It only showed the user information. Home page is a start point of user journey and also act as an summary of the informations users might want to see or know. So I added various critical content sections here: Today’s Activities, Pending Payments, and Recent Payment. I think those informations are important for users and by putting them on home page is making things easier – I don’t even have to move a muscle.

I also redesign the Request Checkout CTA section as the existing section isn’t recognizable.

My client didn’t give me any guide about the color and gave me freedom to use any color. In my opinion, the existing use of color wasn’t visually pleasing. As you see on the right, the primary color of the app was orange but the button was red, and even chat bubble was dark blue. I redefined the use of color to make the app more pleasing to look at. The color used in the design is documented in Style Guide.

As you see in existing chat page, left side area has wider space than right side area. I tidied up this inconsistent spacing in entire page by applying and defining grid guide. The grid guide can be found in the Style Guide.

Think of this scenario: Let’s say a user have many pending payments (Cargos) so the completed section (Pagos) is hidden by those data. It’s hard for users to discover completed section, right? That’s why I came up with tab view to separate Pending Payments and Completed payments.

I removed the unnecessary red and green icon in this page since those two sections is going to be separated.

Icons are, by definition, a visual representation of an object or action. If that object or action isn’t clear to users, the icon immediately lose it practical value and becomes a visual noise. As you can see, for example, the feeds page used “Gears” icon which commonly used to represent settings page. I addressed that issue by replacing the irrelevant icon with more object or action representing icon.

The existing app used 2 types of icon, filled and outlined. In the design I used outlined icon and I replaced the filled icon with the outlined icon. I did this so all icons has similar style to enhance the aesthetic appeal of the app.