Portify

Credit Building

By Vignesh Prasad, Principal Product Designer at Ebury

Portify.co Portify (Rebranded to Pave) is a mobile app to help people in their 20's and 30's build healthy credit with all major Credit Reference Agencies in the UK. Portify's mission is to create lasting social change by eradicating financial inequality.

How it all started

I joined Portify in late 2018 as employee #5; by then, it was a small startup with no designers or front-end engineers.

As a full-stack product designer (a.k.a unicorn designer), I was responsible for the product design and front-end with a 3:2 ratio. I focus more on design as it involves creative thinking, problem-solving, and understanding the user behaviour and needs; moreover, design thinking is in my blood.

In my first few weeks at portify, I diagnosed UX issues and design flaws. Then, I came up with a quick-win list, learned react-native, implemented my changes myself. As a result, there was an immediate exemplary impact, and the users loved the new changes. But, of course, when users are happy, I am pleased, and this was just the beginning of a massive journey for the next three years working on a complex idea that heavily involves ‘credit file’ and ‘open-banking’.

As the team grew, I began to work closely with product managers, growth leads, and CTO to design, build, refine along with a ton of design surveys and insights along with multi-variant testing & experiments. Eventually, I was involved in hiring product managers, designers, front-end engineers and freelancers to focus more on product growth.

My workflow

As a designer
User research insights from the product team ⇢ Interaction design/Wireframes/Mockups ⇢ collaborate & gather feedback on Miro ⇢ High fidelity designs ⇢ Design surveys ⇢ feedback ⇢ Iterate ⇢ create UI components ⇢ Update design system.

As a developer
Implement designs, UI components and modules ⇢ Develop working prototypes ⇢ User tests ⇢ Code reviews ⇢ Ship

+----------------------+----------------------+----------------------+
| ROLES                | TOOLS                | TECHNOLOGIES         |
+----------------------+----------------------+----------------------+
| Product Design       | Sketch               | React Native         |
| Branding & Guidelines| Figma                | Expo                 |
| Design system        | Miro                 | D3js                 |
| Front-end            | Mixpanel             | Ruby                 |
|                      | Atom                 |                      |
|                      | iTerm                |                      |
+----------------------+----------------------+----------------------+


Core design objectives

  1. Define a brand personality and design principles for an intelligent and trustworthy credit building product where customers share their sensitive banking, financial and credit file information.
  2. Effective user-centric design and development process with a very few resources.
  3. Fintech is a competitive, risky and fast-growing industry in the UK. So building a responsible product must be fast, efficient and testable for product-market fit to stay on track to the mission statement.

Strategy — Apply Unicorn Sauce

  1. Build better design language system.
    A design system that is scalable, easy to implement with intuitive UI patterns for a great UX and guidelines to help peers to elevate their confidence and autonomy.
  2. Optimise process
    By eradicating the product, design and engineering collaboration gap, so that we can design, test and ship faster.
  3. Build & use smart tools
    Integrate user research, design and development with better tools like Zeroheight, Miro and Storybook.

Introducing — Float design language system

Single source of truth for our brand and design system which is a living, breathing and adaptive repository. It should evolve and refine as we grow.

Why Float Design?

I wanted our users to immediately feel liberated from the damaging effects that finance can have. Float gives a sense of freedom.

Our goal is to improve our user’s financial standing over time. Float design gives a sense of upward movement.

I wanted the brand to be associated with our user’s higher-level aspirations and dreams. Floating clouds, balloons, etc., connote this.

Why this is needed?

i. Portify team could design and build new features faster, with greater consistency.
ii. To ensure that the designs manifest our vision and core culture.
iii. To construct a deep connection and trust to the brand among users.

In short, I wanted to reduce the number of design decisions we have to make every day to focus on our user’s problems and build whatever exciting features are in the pipeline.

Design principles

Our users are the mentors & designers, they help us to shape our product, not us!
Therefore, design decisions are 100% evidence-based and user-centric.

Function over form combined with minimalism yet colourful!
Despite the minimalistic design, users should fall in love with the design at first sight! It should be fully functional, meaningful and usable.

Trustworthy, intuitive and helpful.
Our users shouldn’t be hesitant to take any action on the app. We show them help texts, tips and guides with clarity. They use our app with confidence. Reduce learnability time with intuitive design.

Scalable design that evolves with our core principles and maintains our identity.
Our design system must be future proof and ready to evolve.

CONSISTENCY, consistency, CoNsIsTeNcY!
It is essential to be consistent across our product and beyond, whether it is a space between two buttons or vocabulary we use in the content.

UI components

.I used Brad Frost’s Atomic design methodologies to accelerate the process of producing modular design elements. As a result, the designs were quickly translated into front-end development.

In addition to that, I showcased front-end UI with React Native’s Storybook package that engineers can refer to when developing features. We ensured all UI components were identical in the Sketch library and our codebase

Design Research & Workflow

User Research
Before the lockdown, I collaborated with the product team to regularly have 1:1 interview sessions with our users. In addition, we invited some of our users to our office. We took that opportunity to test our prototypes, whether on papers or interactive sketch UI.

Post lockdown, after our Series A round, we had enough to afford UsabilityHub for design surveys by targeting our cohorts. I used it to test the illustrations, user-flows and new product concepts. E. g. Explaining a credit file in a storytelling format with illustrated analogies to help onboarding users to subscribe to our membership plan.

Additionally, our Product Manager helped me get a lot of quantitative and qualitative data from surveys, Mixpanel and data logs, which helped us understand how our users interact with the app and find pain points, drop-offs.

Design Process
Data and hypothesis testing must back design decisions. So I start with design objectives based on the user research insights. If time permits, I conduct design workshops with the interested team members (usually with product managers and curious engineers who love to learn design). The takeaway from these workshops is generally information architecture, rough wireframes and tons of virtual post-it notes. If necessary, I create multiple variations of wireframes to bring them down to two or more for A/B testing.

I periodically skip the wireframing step to design high-fidelity mockups using our design pattern library. The engineering team then quickly build an MVP or a working prototype and ship it to a small number of users to test.

MVP mindset
Our design system methods helped us quickly design, develop, and ship new features as an MVP without losing any visual identity or scrappy look and feel.

Showcase — some key screens

Retrospective & Takeaways

Over the years, I have learned so much in this project—the following are some key takeaways,

Art of delegation.
I often took on too many responsibilities and wore multiple hats. Though it was necessary for a startup, I eventually adhered to my expertise and delegated the rest to the engineering and growth teams.

It’s okay if the designs are not pixel perfect, initially.
As a designer with a sharp eye, I was very picky on visual perfection. However, this is an additional cost of time in a lean startup. So my focus shifted more towards function over form. However, our design system implementation in the front-end finally ensured pixel perfection.

Is everyone on the same page and comprehend the intent?
Communication is vital to ensure this happens. However, applying effective communication techniques requires a lot of practice and understanding of the team dynamics.