Building a brokerage brand by finding the future
When creating a new company's brand and design language, the challenge is that because the company has no existing customers, products, or reputation, you have nothing to work from except the founders' intentions. For Upfluent, there was an added complication because it was a joint venture between two pre-existing companies, and both parent companies had unique expectations.
Both parent companies intended to use Upfluent as an API-based brokerage, through which customers would place equity trades utilizing the parent company's interface. Customers' primary interaction with us would be receiving trade confirmations, statements, and annual tax documents, all co-branded with the parent company. The exception would be during sign-up and account management, where one parent company expected to integrate us into its existing interfaces, and the other expected to use interfaces we provided. However, because we offered account types each parent company chose not to support, customers could interact with us directly to manage those accounts.
We needed to create a design language that allowed us to integrate seamlessly into another company's application while remaining recognizable to customers that interacted with us directly. We also needed to support a value proposition as a technology provider to some customers while appearing credible as a financial institution to others.
Role
Design Research, Interaction Design, System Architecture, Visual Design
”…we determined who our audience was, what we would do for them, and how we would talk to them…”
The first step in figuring out our brand was setting our intention for the business. I led the founding team through a modified version of the Google Ventures 3-Hour Design Sprint, to which I added a Brand Archetype exercise I created. Through this process, we determined who our audience was, what we would do for them, and how we would talk to them relative to our competitors.
The next step was to name the company and design its identity. We landed on the name Upfluent due to a mix of factors. We considered uniqueness, trademark and URL availability, phonetic ease, and the implied meaning of its linguistic roots. Because we are a brokerage with learning and social aspects, we chose a name built on the shared linguistic root of Affluent, Influence, and Fluent.
The logo design is a monogram based on the letters U and F. This emphasizes the peculiar phonetics of the name and illustrates the idea that we intend to elevate our users understanding of trading. We also employed some visual sleight-of-hand to make the mark more memorable, like breaking the borders between positive and negative space and modeling 2-point perspective to create the impression of dimensional space within the icon.
We based our choice of primary brand color on an exhaustive audit of competitors. It needed to stand out amongst a crowded field of greens and blues while avoiding conflict with our parent companies' color palettes. We also wanted it to feel futuristic and credible.
“…I facilitated a workshop designed to help us synthesize our opinions.”
The only practical way to create a design language is to apply it to something and see how it works. Since at least one of our parent companies would rely on us for their account-opening process, we decided to test our decisions on those screens.
The Design and Product teams chose competitors, went through their account opening processes (AOP), took screenshots, and evaluated each. We then organized the shared steps of each AOP, and I facilitated a workshop designed to help us synthesize our opinions.
While we each had some differences of opinion, the common understanding was clear, and led to the development of core principles for the design of our AOP process:
- Optimize cognitive load - Easy to think about is easy to do. If making it simpler makes it harder, you're doing it wrong.
- Ask as little as possible - Goal #1 is opening the account. We can ask nice-to-have stuff later.
- Be approachable, not cute - We're going for easy and understandable. Cute is less clear.
- Positive affirmation - An ounce of assurance is worth a pound of prevention.
“We devised a sequence that…made it easy for the user while allowing us to meet business goals…”
One of the key observations from our AOP workshop was that while it is generally easier to reduce the number of tasks per screen, some tasks become harder when you split them apart. We also observed that 2-Factor Authentication (2FA) that used SMS was generally less disruptive than email systems. With that in mind, we began wireframing AOP flows that optimized the cognitive load of the whole process and individual screens. We devised a sequence that collected the information needed in a hierarchy that made it easy for the user while allowing us to meet business goals simultaneously.
We needed an email address to create the shell of an account (which we call a Profile), so we collected that first. Unlike a traditional sign-up flow, we did not ask the user to create a password. We instead asked for a mobile phone number, which we immediately verified using SMS. When the user validates that phone number, we ask them to create a password. Doing things in this order, we collect all the necessary information to follow up on abandoned applications and perform account recovery.
Another way we lowered the overall cognitive load of the process was by using defaults that would be true for more than 80% of users. For example, because >80% of users would be opening Individual Brokerage accounts, we preselected that account type and allowed the user to change it. We also grouped three true/false questions because, for >80% of users, the answer to all three would be false. The vast majority of users can avoid three questions without changing a thing.
“Our version of the future should be optimistic, so we chose rounded corners and a round humanist typeface with a high x-height.”
With the process wireframed, it was time to apply the visual style and start working out the individual components in our design language.
I developed our visual style so that we could insert it into other people's interfaces and adapt while preserving our brand expression. We built our system around a custom typeface, which allowed us to subtly assert our brand in circumstances where we could not display our logo or brand colors. I based our windows on a bead-blasted pane of glass lit from above, so we could adapt to most color schemes and backgrounds.
We also took inspiration from data displays in film and television, which frequently use a projected light interface when depicting futuristic tools. Effects designers use this technique to add visual interest without cluttering their interfaces. We thought it was useful for imposing our design on top of other interfaces.
As a team, we decided that, while we liked the aesthetic of light projected on glass, we would need to avoid the visual cues of UIs from dystopian futurism, like angled lines, triangles, and square fonts. Our version of the future should be optimistic, so we chose rounded corners and a round humanist typeface with a high x-height.
“I created 13 coded components across 13 pages, a grid, a color system, and a CSS variables library…”
The last stage of the design process was to prototype components, interactions, and screens in HTML, CSS, and Javascript. Coding our prototype allows us to tweak and fiddle with the specifics of design elements until we get them just right. For example, it allowed me to devise a custom bezier curve for our animated CSS transition throughout the sequence. I then created a CSS variables file that allowed our developers to use my custom transition whenever they needed an easing animation.
Coded prototypes also make it easier to communicate our intent with developers. Design tools are still somewhat different from code in ways that make miscommunication common. It is also more useful than exhaustive design documentation because the developer can inspect the prototype in their browser to find the value they need instead of searching for where we address it in a document. To prototype our AOP flow, I created 13 coded components across 13 pages, a grid, a color system, and a CSS variables library, including encoded SVG icons.
In July 2022, our parent company, Voyager Digital, declared bankruptcy due to an industry-wide collapse of cryptocurrency markets. Because of the legal structure of the joint venture, the bankruptcy court determined that Upfluent and its intellectual property were assets of Voyager Digital. Voyager assumed control of the brand, design language, and all associated design and code as part of its eventual liquidation.
