How I designed an app for designers

Paylance is a platform created by designers for designers to solve the problem of all problems: getting paid.

While working on this project, I defined the entire product development flow, from information architecture, to UX all the way to wireframes.


Simplicity

First things first, defining the experience as a whole.

It had to feel curated and tailored to the design community. The biggest challenge was to simplify the most the app’s UX, thus removing all unnecessary visual clutter and potential distractions. Together with the CEO, we decided to adopt a funnel like flow with three core steps, which allows the user to easily track her/his progress within the app.

Three Step Flow

We then reduced the entire app to 3 easily digestible steps.
 1. Upload
 2. Set Price
 3. Get Paid

Go with the Flow

After conceptualizing the information architecture, I laid down the main User Journey and subsequently all the secondary flows.

Snapshot of the Information Architecture map

Based on previous user research, I defined a persona — what would the typical user do with Paylance and what would his/her journey through the app look like. I then defined the flow map and noted down each key user interaction in the map.

Wireframe it ‘till you make it

Time to translate the flow onto the drawing board.
I started by sketching quick wireframes on paper, this helped me clearly illustrate the user flow and determine the core interactions that would take place during use of the product.

Section of the Wireframes Map

I then moved everything to the digital world where I translated simple graphs from the flow map and pen-on-paper wireframes into digital ones. To maintain visual clarity of the entire app, I placed all screens into a map-like view, this helped me maintain a bird’s eye view of the product.

Pixel Perfection

And there it is, the best part of the product creation: the moment in which you polish your rough designs until they shine.

Together with the CEO, we agreed on key brand colors and polished the user interface to the very last pixel, making sure padding was balanced, typography was elegant yet easily readable and the visuals and iconography would help the user find their way through the app with no hurdles.

Visual Mockups

We spent endless hours in the attempt to find a perfect balance between playful, trustworthy and modern. The biggest challenge was to create a product that would speak to creatives, while still maintaining a certain professionality to it; in the end it is a fintech product and should reflect this in its design language.

It’s Alive! or quite so..

It was done, all was ready to be handed over to the engineering department. One way to smooth the cross team transition has been to upload the designs to InVision, my favorite prototyping tool. The Invision prototype proved to be essential for the company during pre Beta marketing efforts.Prototype here: https://invis.io/HE8EFO8G2


Key Takeaways

  1. Always target the product to its audience: not all designers are techies, or are familiar with invoices and management. This concept helped define a bulletproof design, that combines a lack of visual clutter and guides the user from the initial upload to getting paid in a wizard-like manner. All this is achieved in a seamless way that pleases both the creative soul and the techie.
  2. Error messages are one of the most important things when designing software: even though the UXer dreams are filled with error-less interactions, we must be realistic. Mistakes will be made, and our job as UX designers is to make sure the user understands what went wrong and is provided with a call to action to fix said mistake. When users see an error message they are most likely frustrated, so it would better be a helpful and beautiful message to relieve their frustration.
  3. Designers must learn to wear multiple hats:
  • understanding of human behaviour to understand how these creatures interact with computers,
  • marketing knowledge to help identify the consumer/user needs and product placement,
  • logical thinking in order to conceptualize a functional flow,
  • technical design skills to put it all together,
  • copywriting skills to effectively describe to the user what is occurring on screen,
  • and lastly a soft knowledge of how software development and coding work; this will facilitate your dev team immensely.

That’s all folks!


Paylance is still in private beta and will be release to the public soon, learn more about the product and join the waitlist here to get notified when it launches.

Also, let me know in the comment section below if you have suggestions on how to improve the product or the flow!

Cheers