I’m a designer and baker always striving for the perfect recipe for successful UX design.
I’m a designer and baker always striving for the perfect recipe for successful UX design.
.svg)
%20(1).png)
When starting this project, FRNT's only UI was a website. As their company was growing their wants and needs were growing too.
As one of the UX designers on the team, my challenge was to create a new identity for FRNT, find a style that would work for their new web application, as well as a future rebrand of their website. I also needed to consider the style guide’s use cases for marketing materials and future web applications.
↓
FRNT Financial is a regulated derivatives provider offering institutional investors access to cryptocurrency. FRNT was making plans to build a web application to support tasks such as OTC trading and advanced analytical tools. With a large project at hand, they needed a design system and style guide to match their growing suite of software and the brand they wanted to portray to the world. One of the biggest considerations here was how to design for institutional clients. From the navigation, colours, typography, all the way down to the favicon, I needed to create a system that was clear, visually aesthetic, and practical.
.png)
The first step in this process was to find inspiration. Through a process of discovery, I scoured the internet for different dashboards and designs. I decided to take a few design components and elements that I liked to see if they could work with our requirements. I tried some more conventional options as well as some out of the box ideas. By testing my requirements in a variety of styles, I was able to find unique ideas to help build my style guide.
.png)
After finalizing a few designs which I felt would be good representations of the company, I created a style guide presentation that I could present to the key stakeholders to explain my process and get everyone on board. I chose a few designs to show the stakeholders, along with my ultimate decision of the style I recommend FRNT takes on.
.png)
Once I had everyone on board and excited with my general style inspiration I got to work right away building components, finalizing text styles, colours and more.
As an overall design goal, we had an unconventional idea in mind when designing for institutions. We decided we wanted our product to have a “retail” feel that was friendlier and more attractive.
↓
To stick to this friendly design goal, we chose a font that was more rounded and easy on the eyes, yet still professional and scalable at different sizes - Nunito. A single font with a variety of weights led to a beautiful, and easily legible design.
To choose colours, I pulled inspiration from all over the internet. My goals were to have bold and bright colours that complement each other well, as well as a strong accent colour to keep the user focused on their actions. Additionally, they needed to be easily transferable to our web application, website, and future branding and marketing materials. After testing out many variations we settled on a deep navy, bright blue, and orange accent. When it came to using these colours in practice, contrast and accessibility were also an important factor; whenever I felt stuck, I would research to find similar inspiration and how they achieved their goals.
.png)
We designed our buttons to create a positive and productive user experience as well as grabbing their attention. It was important that we made our buttons easily findable and identifiable with clear language to keep the user on track without any confusion as to what action pressing the button would do.
.png)
When it came to choosing navigation styles, I went through quite a few iterations. For the main side navigation, we went with an icon and text combination for each page. We decided it was important to always show the text throughout the design and all responsive sizes. When trying a collapsed version of the menu with only icons showing, we didn’t feel they were representative enough to create a good user experience without confusion.
Our tab navigation was an important feature which needed to be just right to keep the user focused on their task and reaching their goal as quickly as possible. In the crypto and finance world, time is literally money - so any additional time trying to figure out how to use our tab navigation can be very costly for the user and our business. We went with a tab that made it easy to navigate between our different trade options, with room to grow and add more features in the future.
The most difficult element to design was our input fields and dropdown menus. These would come to be a very powerful feature that needed to be designed in a way that would really help the user. Though unconventional, we chose to combine our text field and drop down menu in an effort to reduce the amount of space necessary for this component. Keeping the text placeholder within the input box gave us the vertical space we needed. When designing this element it was important to make it clear to the developers how we needed it to function. The functionality needed to spread not only between the input fields, but also the dropdown menu and the tab navigation. Through a few iterations with the developers we were able to create a well functioning and sensible system.
Once we had everyone on board, and we all knew our roles, it was time to start building products that would help grow FRNT as a brand and as a company. With a style guide in place, it would make designing future products easier and quicker.
.png)
