Money-Saving App

Accompany

Overview

Making the saving action easy and interactive

“Accompany” is an app that helps people save money easily and efficiently in preparation for a big purchase or expenditure by describing the cash flow clearly and making the operation flow of saving easily and intuitively.

Client

CareerFoundry
UI Design Program

My Role

Brand Designer
UI/UX Designer

Duration

3 Weeks (120 Hours)

Background

More and more people manage their money digitally

People manage their money more and more digitally, and the usability and user experience of digital tools for money management is crucial today. I decided to engage with this project, even with the UI design development of the money-saving app, because I will try to shape and advance the fintech app's solution applying my improved skill and knowledge of UX/UI design. This project was a part of the UI design program of CareerFoundry.

Objective

Building a mobile and web app with a trustworthy brand

People want to manage their money safely and reliably. "Trust" is the most critical core value of the brand "Accompany." This project's objective was to design a useful and usable app for money savings and build a trustworthy visual identity for the brand.

Deliverables

iOS native mobile app
Web app

Design System

Definition of the Brand Color Principle

Organizing an intuitive and recognizable brand color

The brand color is green and stands for reliability and safety. The dark grey and white background represent clarity and simplicity, and they also assist the brand green color. Besides, we equip an orange color as a complementary one to give the palette an accent and make the palette more distinguishing and recognizable.

Brand Color Proportion

Brand Color Palette

Definition of the Brand Typography

Arranging the typography that reinforces the brand principle

The brand aims to offer users the digital finance product to maintain their money clearly and confidently. The home typeface „Helvetica Neue“ has high legibility and robust reliability through its long history. The functionality and the impression of the typeface represent the three personalities of the brand, „Reliable“, „Friendly“ and „Clear“, and enforce the brand.

Minimize the number of typeface sizes and weights to maximize communication

The font sizes and weights have been carefully selected to be eight in total, four for heading text and four for body text. This serves to reduce the complexity on the screen that comes with using a large number of fonts, and the resulting difficulty in reading information. In addition, the font sizes are systematically multiplied to support the orderly display of information required in applications.

Definition of the Interactive UI components

Providing users with a clear mental model of interaction through consistent operating patterns

Icons are consistently displayed on the right side of UI components such as buttons and cards that are the target of operations and interactions. This consistency provides the user with a clear mental model of the left-to-right interaction flow and operation. This left-to-right flow of reading and interacting with information is also the standard mental model around the world in today's digital age, and assists users universally.

Definition of the Brand Iconography

A delicate balance between intuitive information, readability, and friendliness

A line-based icon design is used to reduce complexity and make information clearly readable. At the same time, information that needs to be conveyed properly is given concreteness, and color is used to emphasize it, enabling intuitive reading of the information. In order to support friendly communication with the user, the corners of the icons all have a slight R treatment.

Definition of the Responsive Layout

12-column layout for systematic compatibility with a variety of devices and screen formats

It uses a 12-column layout, which is nowadays the standard in digital user interface layout. Designing based on this layout principle, which can flexibly accommodate different formats for different devices, has increased the efficiency of product coding and implementation. The systematic design layout also allows for the orderly arrangement of information and smooth communication between the user and the application.

Design Process

Design Approach

Accelerated loop of improvement

In this project, I got the briefing and research results from the UX team, even user stories based on the user interviews. I approached the app UI design solution with a continuous iteration cycle of wireframing, prototyping, and user testing.

Ideation

Generating a user flow diagram from user stories

I got the research result and user stories from the UX team and translated them into user flows. My skill in understanding the fundamental problems and generating a suitable solution made me possible to create a clear, focused, and essential user flow diagram.

Ideation

Getting to reach the low-fidelity wireframe that well works

It was a tough and challenging section to attain a well working and understandable low-fidelity wireframe. I sketched paper wireframes again and again and repeated testing them quickly with the users. During this session, I improved the skills to sketch wireframes simply and speedily but included the necessary testing information.

Prototyping and Testing

Analyzing the results of the user test and continuous improvement

I conducted user testing with real potential users by using the digital prototype of different fidelity levels. My skill in analyzing qualitative feedback and quantitative data systematically benefits me in crystalizing the essential and accurate information for improving the detailed user experience and usability.

UI Design Mockups

Elevating wireframes to a high fidelity level

After struggling to reach the well-working low- and middle fidelity wireframes, I advanced them to higher fidelity one by iterating to prototype and test them. The repetitive trial and effort to make the app's core usability and experience clear and logical enabled me to progress and accelerate further design sessions.

Outcome

Keep testing repeatedly and continue to improve the product

In this project, I engaged deeply with the UI design stage, from generating a user flow diagram to building high-fidelity wireframes and final mockups. It was a big challenge to transform a user flow diagram into functional and logical visuals and graphic layout to advance the user experience and app usability. To improve the experience and app usability, it is absolutely needed and crucial to keep testing the wireframes and prototypes continuously. Throughout this iterational cycle, the quality and user experience can be advanced.
© 2024 Takashi Kondo