WALLETIFAI

LANDING PAGE

Walletifai is a personal financial management app that intelligently detects bills and subscriptions and helps manage them on a daily basis.

Walletifai website App Store

INTRO


Role

  • Concept
  • UI/UX Design
  • Dev collaboration

Goal

Create a trustworthy impression of the brand and attract new users.

Approach

  1. Define IA;
  2. Wireframes;
  3. High fidelity design;
  4. Testing;
  5. Dev handoff/collaboration.

Duration

September-October 2020

Tools

Figma, Jira, Slack

Team

Roya Kachooei (product manager, CEO)
Elisa Cheng (UX Designer)
Lubov Soltan (UI/UX Design, branding, illustration sourcing)

PROCESS


Research

  • User research
  • Competitive analysis

IA

  • Identify content
  • Classify
  • Map hierarchy and navigation

Design and test

  • Wireframes
  • Hi-fidelity design
  • Testing

Handoff

  • Figma file presentation
  • Dev handoff/collaboration

RESEARCH


Competitive research

Inspired by successful fintech apps

I collaborated during the whole process with my team mate and product manager.

To move faster we used our best judgement and decided that analyzing most successful fintech apps will help us create the best version of the website.

INFORMATION ARCHITECTURE


Winning over people's trust

Main goal of the landing page is to give people a better idea about the app and even win them over if they are on the fence about trying it out.

Along with the features we wanted to show front and center that Walletifai can be trusted.

Transparency and communication

From interviewing users we knew that one of the biggest concerns for 70% or people are security and privacy. This fact was taken into consideration while designing the website.

Identifying types of content

Tree is simple and straitforward

Everything is where you would expect to find it:

  • Main CTAs;
  • Security and Privacy details;
  • Help and support.

DESIGN AND TESTING


Make it work: structure and logic

Me and my team mate had a few sessions to put together wireframes and write copy.

Using low-fidelity wireframes helped us concentrate on structure, information hierarchy and story without the temptation to get into too much detail.

After internal testing

Some adjustments were made based on feedback from front end developers and other teams: we broguht similar sections to identical layout that improved the website consistency and made it esier to implement.

Make it pretty: high fidelity design

The website conforms to the brand identity and brand message:

  • Two complimentary accent colors;
  • Generous amount of white space;
  • Simple explanatory illustrations.

We want to project friendly, but professional, clean and trustworthy image to the customers.

Testing internally and with users

At this point design team had a default testing session format:

  • One user;
  • One designer interviewing;
  • One designer taking notes.

Green light

Minor tweaks we made at this stage - mostly the copy, people suggested to change some phrasing or terminology to be more friendly and clear.

HANDOFF


Collaboration, not handoff

Me and my team mate created proper assets for developers with Figma auto-layout and we were ready to jump on a call anytime if clarification was needed.

It is important for me to have an open line of communtication with my team members, other teams and superiors. Really quickly, we knew, what paddings or spacing could cause confusion or uncertainty and we were first to reach out to collaborate.

TAKEAWAYS


Information architecture

Gained valuable experience identifying content and creating hierarchy, site map and navigation. I never designed a website from scratch before.

Tight timeline

I had to be acutely aware of the timeline, plan and priioritize accordingly to meet the deadline.

Asyncronous workfolow

Planning and utilizing time in a manner that allows all team players to never be blocked or resolve blocks quickly was a fun thing to figure out.

Collaborative and creative process

I learned to really appreciate teamwork and collaboration with developers: success depended on team members finding the stride.