Detailed Fintech UI Concepting & Design (2015)

Optimized content to persuade visitors to upgrade to the paid product and designed new functionality, dashboards, and reports.

Applying User Centered Lens

I helped the client to create a matrix to clarify their target audiences and user needs in Plain English. Here’s an example:

Writing copy samples helps the team refine its message and value proposition. It generates ideas for design. Later it can serve as raw material for headings, labels, and marketing copy.

This eventually evolved into personas focusing on empathy and context:

Product Concepting & Strategy

I helped the client connect their raw business ideas to specific user goals. I asked user-centered who/how/why questions to tease out the core opportunity. It is common for clients to have implicit knowledge that they don’t think to make explicit.

For example, while discussing a screen, I suggested we break users into “buyers” and “sellers”. It turned out “buyer” and “seller” terminology didn’t feature anywhere in the UI, because the clien’t site isn’t a marketplace. However, this language well described the goals of the users.

I sketched  a lo-fi wireframe in real time. It targeted buyers and sellers explicitly instead of saying “Lists of Products”:

Discussions like this lead to new product ideas, different ways of organizing the existing offerings, and different strategies for marketing.

Landing Pages And Calls To Action

I designed a number of landing pages for this client. When they needed to “collect user data”, I helped them reframe this as a user goal i.e. why are they giving their data? When they wanted a page to list some facts about their product, I helped them articulate the value proposition. I wrote copy and organized content rooted in the user’s situation:

Real-Time Sketching & Collaboration

The client and I using screencasts and email to exchange ideas. Then we’d get on a Skype call to sketch the ideas with real-time feedback.

For example, the client had a screen that lacked purpose and consistency:

I improved the information architecture of the screen (it’s value proposition, hierarchy, and clickable items). During the conversation I redesigned the numerical scale and proposed to expand it create a “report card” for all criteria with useful “how it works” insights for the user (useful based on actual comments from users):

Real-time collaboration allowed design decisions to cascade and evolve to create a more useful, cleaner screen that the client was happy with.

Guiding Users Through Complex Processes

Problem: During our Skype call, the client and I arrived at the idea of “generating leads”, something users are currently not able to do using any tool on the market. To get at this info using the site would require multiple steps and reports.

Solution: I proposed to clarify and emphasize this feature by creating a unified step-wise wizard culminating in a practical “Prospect List” a sales person can run with:

I encouraged the client to guide users more. For example, I recommended adding more descriptions and training videos to various complex areas of the site.

Dashboard Concepting

This is a mockup to summarize a financial portfolio. This report gives users details and a key takeaway i.e. a breakdown of their key product buckets plus a single number summary (top right):

The mockup embodied existing requirements but also served as a proof-of-concept for new potential ideas. For example, in this diagram, I included a blue line that compares Product A to a benchmark. This is a way of asking the question visually: Does the user need to compare to a benchmark?

In this concept for a dashboard component, the idea is to see a subset of the data that’s relevant and then act on it directly. I’m filtering data to show only the negative y axis to highlight only the negative events. I’m then comparing it to the equivalent on the benchmark. I’m also detecting the lowest point (worst event) and allowing the user to click it directly:

I created a summary component to  let uses compare current value to the range, and how far it is from the highly probable values (cutting to the key insight instead of a long table with a complex chart):

Divergent Ideation

There are usually many ways to doing something. When I sketch ideas for a concept, I usually diverge to explore many options. I then converge based on what makes most sense and with client’s feedback OR I propose an A/B test.

For example, I tried an upgrade pop-up instead of the full report to persuade users to pay:

Some of our questions explored as separate variations were: Should I tease user with some summary data? If so, what data? Should I show upgrade call to action and input fields on the same page or hide them behind an upgrade link? Should I go with a dark or light motif? What’s the optimal message for the heading? Should I list top benefits or speak with data?…

For the home page, I concepted out different ways to get the user started:

In version B, I proposed a single field with a call to action, an action 90% of users would be interested in. In version C, I proposed instead to let user choose who they are, then show them a tailored message and call to action (Gradual Engagement). In Version D, I proposed showing the user several “I want to …” statements to directly link to user goals… and so on.

Leave a Reply

Your email address will not be published. Required fields are marked *