Cinnamon logo
Cinnamon logo
Cinnamon logo
Close

Home

Projects

Services

About Us

Careers

Blog

Contact Us

Close

Fiona: Engage &
Decide

Fiona is a fintech consumer-facing website that enables users to search for financial products, discover them, and receive personalized recommendations.

product design

web development

placeholderFiona Thumbnail.png

Fiona achieves a delicate balance between user satisfaction and company demands. The primary goal is to meet consumer needs, which begins with a simple but comprehensive data collection process that leads to personalized offers that are easily accessed and filtered for decision-making.

Scope of work

UX Design
USER FLOW
PROTOTYPING
USABILITY TESTING
UI Design
VISUAL DESIGN
ILLUSTRATIONS
DESIGN SYSTEM
Frontend Development
TYPESCRIPT
REACT
STYLED COMPONENTS

What we strive for
in our process

Fiona Thumbnail.png
Balanced business and user experience

Meeting user expectations is critical to business success. Our goal was finding balance between client mandatory compliance and user needs.

Fiona Thumbnail.png
Tight collaboration with development

Considering its function as well as it is aesthetic, the cooperation between developers and designers is key to finding the best solution.

Fiona Thumbnail.png
Engage and help users

We aim for an effortless journey that makes decision-making easier and encourages users to find and select an option.

Fiona Thumbnail.png
Attention to mobile responsiveness

The goal was to provide a consistent user experience across platforms, with a focus on smaller displays, as mobile users provide most of the traffic.

Get offers
with ease

Fiona features a comprehensive loan application process, with the purpose of matching the user's needs to the best matching offers. The application flow is intended to reduce cognitive load and enable users to concentrate on the questions at hand

placeholderPicture 01 - desktop.png

It’s really that simple

Smooth user experience is emphasized with large input fields and their respective states, while loan purpose icons offer better legibility. Throughout the application flow, the great variety of question types use the same structure, and completion is easily tracked via the progress bar.

placeholderPicture 02 - desktop.png
placeholderPicture 03 - icons desktop.png

Your actions tracked

The user's dashboard is a tiled display of Fiona's different functions. Its core purpose is to provide users a place to keep track of recent loan queries and complete those that are still in progress, but for first-time users, the dashboard defaults to colorful empty-state cards that suggest useful actions that can be made.

placeholderPicture 4 - desktop.png
placeholderPicture 5 - desktop.png

View your
searches in
detail

To ensure the users have the best possibility to get offered a loan, the Search History comes into effect. A more detailed and complete overview of all past and ongoing searches. Users can easily browse and click through a stack of search summary cards and results view.

placeholderPicture 7 - desktop.png

Search history on small screens

Search summary cards, In their various states, contain all of the required information that users may need at a glance. This has been made to fit a smaller screen since the results view is displayed on a different page, making the design legible and readable. It eliminates the visual clutter that can arise while working with this much information.

placeholderPicture 8 - desktop.png

Match with great offers

The results are presented in a way that makes the user’s decision as easy as possible. To avoid overwhelming the user with options, only a few recommended offers are displayed on the first load. But, not to be limited, the user can switch between the offers and utilize a powerful filtering system to identify the one they are looking for.

placeholderPicture 10 - desktop.png

Striking a
balance

Offers were a design challenge as they had to be small enough to be viewed as a table row while yet being readable enough to avoid causing too much friction. That was ensured by using just enough white space, bright colors, and ideal text sizes.

placeholderPicture 11 - desktop.png

Effortless design

A robust filtering system has been implemented to aid in the decision-making process, but in order for users to use it, it must look simple. We chose sliders and checkboxes over text fields for value input since they require less strain, especially on smaller screens. However, giving the option to type-in values if preferred.

placeholderPicture 12 - desktop.png

Styleguide

placeholderFiona-Styleguide.png
placeholderFiona colors.png

Great collaboration through the whole process.

Cinnamon has provided excellent engineering and design services, that captured our vision and achieved our goals. Together, we have created a quality user experience with great performance. We very much appreciate Cinnamon's commitment and collaboration.

Testimonial-Avatar.png
Alex Whiteside,

Senior Director of Product & Engineering, Marketing and Consumer Experience

Still more to come

Fiona is still an ongoing project, and even if there is more to come, the experience of accomplishing challenging tasks has taught us a lot. Every department acquired something when it came to working on Fiona. In order to satisfy both compliance and user criteria, Product design must provide distinctive user experiences and user interface patterns. As a result of this experience, Development has learned to write code more effectively and to think outside the box. PM ensured that everything worked well while remaining focused on the same goal. Although Fiona still hasn't reached its final shape, it already is a game-changing platform and a huge hit in the FinTech sector.

Similar projects

placeholderthumbnail-large-compressed.png

product design

mobile development

quality assurance

marketing & growth

Mffais:
Make ends meet

Mffais is a budget-forecast app for Android devices designed and built by Cinnamon. If you get tired of keeping track of bills and paydays, the app will do that for you. Avoid the hustle and sit back.

arrow right

See all projects

Job application illustration

Have a project in mind?

Let's work together.