Account Mobile App

Account Mobile App

Bank Hapoalim

designed user experience of some components, ui, icons, implementation and constant development support

this project was made while working at designit as an interaction / ux designer. the digital products are credited to designit and to the great talented and dedicated team of designers: guy haviv, inbal kopilovitz-adashi, nimrod mozes, nati bawer, lara korik, rutha berger and adi berda.

available on the app store and on play store

Getting into business

This project was one of the first things I got to deal with when starting to work at Designit. I joined a large team of designers and researchers that already worked on delivering an innovative experience for this complex finance app. The bank wanted to position this mobile application as one of the most accessible and important digital self-care channels that it could offer its clients for managing their private accounts.

I received several tasks and faced some interesting challenges while working on some of the key components of the mobile application; Walkthrough and Onboarding, Branch and ATM Locator, How-to tutorials, Advertising platform, Check deposit, Scheduling bank appointments and the application’s main launcher icon. I also took charge of the production and implementation phase of the application, extracting assets, delivering various implementation solutions and giving continuous QA support, targeted to cross-mobile platforms: Android / iOS / HTML5 conventions and overcoming technology barriers. I will cover here some of the challenges I faced while working on this project.

The main challenge

I had to align myself with the visual language that was already applied to a vast range of components, that already defined the app’s main look and feel – putting numeral data in the storefront as a large and eye catching information artefact, paired together with icons, rich with realistic metaphors and immersed in a soft and flat atmosphere. The outcome had to satisfy the wide range of personas we were designing for, from youth having their first bank account to elderly people that manage their whole life’s savings.

reference for the visual language as already designed by the team

Walkthrough

The mission was to try to find the best way to mimic some of the interactions needed in order to complete basic actions and flows within the app. I conducted a visual research for what was the ideal way to visually explain these interactions. Creating the visual stage for the walkthrough was not an easy task because it was relatively a “new” component, using gestures and conventions that we didn’t incorporate in the application just yet – I just tried on the go to see what will fit the best, asked opinions and iterated; a picture of a hand holding a physical phone, a ‘sketchy’ hand on top of real screens, or just some arrows giving indication for a tap area. After some revisions, I figured out that this half flat half ‘real’ approach worked pretty well with our given visual language. I came to a conclusion that incorporating a faux human finger, acting as the part of the user’ hand would explain as ‘First person’ what kind of interactions were anticipated from the user.

animated reference for interactions

Walkthrough animation

ATM & Branch locator

The challenge with this delivery was to examine how a map view would behave at its best with a matching list view of the branches and ATMs. I had to come up with a solution that would let the user jiggle and change swiftly between those two modes. This component was supposed to be implemented as an HTML5 component and had to be style guided and extracted to suit HTML5 standards – a slightly different approach for implementing UI components, in opposition to the rest of the app screens and components, which were based upon native programming.

branch and atm locator – list view / map view toggle solution

Checks deposits on the go

Bank Hapoalim enrolled a service that allows the mobile app users to deposit checks on the go. I worked together with BHP’s developers to create a visual appearance that would match the application’s visual language, on top of an existing external scanning component that BHP bought for this specific service. I had to learn the ins and outs of this external component and to work with the requirements and specifications to ensure a linear cohesive visual experience like on any other screen or component in the app.

Scheduling Appointments on the go

The application also offered customers to remotely schedule an appointment with a banker. I tried to mimic the experience of getting a place in line and translated it into a mobile experience. After booking an appointment – the service would connect with the user’s calendar and send a notification just before his appointment was due.

App Icon

I had to come up with a bunch of concepts for the application’s launcher icon. It had to celebrate the bank’s brand with the new look and feel of the application and to give a hint on the innovative features that are hiding inside.

The application visual atmosphere was divided between a sea world (Account actions) and a sandy beaches world (Account Feed). I tried to express some of it in the first sketches of the launcher icon. After checking on different resolutions and sizes I came to an understanding that the brand logo will stand out best when being the only dominating detail on top of a neat, ordered, soft and pleasant serving. It all had to work extremely well across all sizes and resolutions.

I gave the logo depth by applying faux 3d techniques. It helped it to look visually more ‘click’ inviting and action inviting.

Final App Icon
What is a common language between a developer and a designer?

Rethinking Implementation

iOs to Android

I was in charge of the implementation phase of the application and I had to make sure everything looked and felt like it should on the actual product. One of the challenges were adjusting the design ruling into various OS platforms, I had to achieve a coherent look and feel over iOS, Android, crossed over with HTML5 components

 

 

Style Guide Example

Normalizing typography

BHP Had their own custom font, which was used as both heading text and body text. When the developers started building screens, they noticed that the line height attribute of the font was messed up, and it was impossible to compile the screen in order to match exactly our design references and specifications. I had to open the font with a typography editing tool and readjust it’s attributes to suit the different platforms. I compiled custom font files targeting each operating system.

Handover

An extensive optimization work was made during this phase, in order to ensure that the application runs smoothly on a large range of devices and resolutions and that the UI was pixel perfect. I created asset boards for different resolutions and decided which elements and components would be drawn within programming. For each component or design/animation solution I included an animated prototype along with detailed specifications and style guides.

available on the app store and on play store

Thanks for viewing

This is a unique website which will require a more modern browser to work!

Please upgrade today!