Overview

UI Design

Project Overview

Fireside Solutions focuses on helping companies establish a scalable digital presence and adopt the latest technologies. Fireside Solutions is passionate about contributing to the growth of businesses that emphasize service by assisting them in using technology to provide more value to the communities they serve. Fireside brings the industry's latest insights to their partners and will need a new site to reflect that.

Challenge

Design an interactive experience that will appeal to potential client objectives, reflect their company culture and goals.

UX Tools

Figma
After Effects
Lottie
Webflow

Deliverable

Style Tile
Site Design

Role

UX/UI Designer

UX Practices

Brand Research
Testing
High-Fi Wireframe
Interactive Prototype
Cognitive Walkthrough

Research

Design Goals

First, I wanted to make sure I had a clear understanding of Fireside's business goals and plans for the future. It's important to clearly understand the company's objectives when designing. We aim to represent the brand's message, generate the right leads, and give potential clients in-depth knowledge about who Fireside is and what they offer.

Identify users

We analyzed user audience identities, to ensure that the landing page is designed to meet their needs. We established a clear user pathway that satisfies different user goals. This process was achieved by going through step by step of new user scenarios. With a focus on the new user, recurring user, and potential investors.

Define User Needs

The users will need an interactive landing page that will attract a wide diverse audience. The landing page will clearly outline the company's full list of services. The goal is to target potential users through interactions, careful sizing and the positioning of interface elements.

Main Objectives

-Improve visual brand
-Make landing mobile a priority
-Clear message to clients
-CTA
‍

Information Architecture

I collected and analyzed the sites information and decided on the content's arrangement. The intent is for each potential user to adjust to the landing page's functionality and find everything they need with ease.

Design

Ideation

Our Goal was to keep the users engaged by implementing a continuous scroll landing page with interactive capabilities. This flow presents new content as the users scroll down, so all content is introduced.

Pros:
-Keep users on the site longer
-Users make a conscious decision to consume more information
-Less likely to click away
-Quick Introduction

Cons:
-A large amount of information would not benefit from a continuous scroll
-Users may be encouraged to skim and skip ahead
-Scrolling information may become distracting to some users
-Users looking for specific information would not benefit from scrolling information
‍
‍

Ideation Feedback

Based on the researched recommendations. We presented the concept's pros and cons, the client decided on a continuous scroll option. The content will be in small amounts, so the design infrastructure is not threatened.
‍
However, as the company grows and more information is added, they will update the site to a more suitable design intended to accommodate larger groups of information.

Color Palette

I wanted the color palette to symbolizes youth, warmth, enthusiasm, and creativity. I wanted the client to feel a sense of renewal, and intellectual awaking. Which is reflected in the warm fire color palette. The fire color palette is exciting and exudes energy and youth in technology. I used white for the text and included slate to give a neutral and clean appearance.

Style Tile

Creating the style tile illustrates the interface elements for the preferences and goals of the site design:

Custom Patterns

I created custom patterns to add contrast with texture to keep space balanced and add visual interest.

Interaction

Following the information architecture, I learned the company services would be the main point of focus for most users. Therefore, all services would need to be presented first in the user flow. The goal was to create an interactive experience between the user and the product.

I achieved a simple interaction with defined goals, to insure user engagement .
‍
I mapped the service interaction illustrated below then created the actual interaction in Adobe After Effects.

High Fidelity Wireframe

The critical objective was to have the user get through each section without getting discouraged and leave the site. We wanted to keep each section clear and concise. To ensure all interactions would perform regardless of screen size, I developed the mobile wireframe to ensure each section was responsive.

Feedback

For the wireframe evaluation, we created scenarios for potential users to reveal possible design issues. During the walk-through we discovered areas that were visibly busy , and created possible crowding issues that could overwhelm the user.
‍
I corrected the crowding issue by reevaluating the spacing and then conducting a coblis test to correct any visibility discrepancies.

Final Design

Evaluate

Final Walkthrough

To evaluate the user flow of the site.
I constructed a cognitive walk through with potential users to correct any usability issues that will prevent site from being fully functional.

During each step, corrections were made based on answers to all the following questions, together with explanations supporting the answers:

Is this what you expected to see?
Are you making progress towards your goal?
What would your next action be?
What do you expect to see next?

Conclusion

I learned so much from this project. Mainly decreasing the cognitive load can significantly impact the user experience and keep interaction with digital interfaces engaging and straightforward.

Adapting to UX trends can be tricky, so understanding how to implement them into new projects can over-complicate the experience or, in this case, bring the project to a new level.

Fireside Tech

Overview

Research

Design

Evaluate