B2B Accounting Platform

Website, Branding, Dashboard

CLIENT

Athenas Online

PRODUCT

Web platform and Landing pages

PROJECT TYPE

Commercial / Employee

ROLE

UI UX Designer / UI Developer

DURATION

6 months

TOOLS

Figma, Illustrator, Html, Css, Bootstrap CSS

Brief

Athenas is an accounting company that has an huge online platform that provides B2B and B2C accounting services.

The platform are divided on modules and user access levels and has many customizable visual options and reports.

Opportunity

Learn more about accounting industry.

Create a huge design project on Figma from the production version (reverse engineer);

Support developers with the front-end structure and web assets.

Challenge

Creating the design project from scretch;

Create component specs based on libs and raw html and css;

Redesign the platform landing page and logo.

Discovery

Understanding project scope, variables and opportunities

Scope

Initially I was hired to primary assume the Web Desing position, creating a consistent experience for users using the accounting web platform, Athenas Online.

New opportunities were revealed along my journey, new products, complex ui and components, responsive design, new branding, and training.

Html templates - Developers were using a HTML template but despite it was working before it requires extra efforts to update the outdated libs, framework css, and customize it properly to attend the company and clients brading.

New releases - An additional challenge would be the release of new features while updating the entire structure. The design transition would be smooth, but structurally it was very heavy.

Design project - As the current platform was based in a template was necessary to create a complete Design Project with a consistent Style Guide and Components to be followed by different teams, managers, engineers, and marketing.

Ideation

Defining a clear, user-centric solution

Benchmark

Based on the current components, I benchmarked design solutions using the same framework, Bootstrap CSS 2.4, to understand the limitations and oportunities.

The objective was to find the best solution for long-term that woul not broke the current state.

Interview

Remote interviews were conducted to understand pain points and users need. The participation of stakeholders, customers and developers was fundamental at this stage.

Usability testing

Using staging environments was possible to release demo versions for usability testing. I also used to use product meetings to present ideas and get feedback from different teams.

Solution

Meeting requirements, improving user experience, interface, and more!

New branding

I had the opportunity to submit some idea for the new brand and luckily my idea was chosen by the company's directors.

For this task, they were looking for a fluid and innovative brand that remembers the old one, keeping the orange color as main color, with a touch of innovation. The main concern was to not disturb the current branding materials and the clients recognition.


Inspirations: Firefox, Edge, Mastercard, Pepsi, Amazon, and Adobe.


Logo definition: I created an modern and stylized "A" to be used as an icon. The font family used was modern and thinner than the before. For the colors I added shades of orange and yellow as a complementary color.

Design System

I created from sketch an initial version of a consistent design system to guide designers and enginners delivery new features, flows and components. So engineers and managers can easily understand flows through prototypes, guides and specs.


Branding guidelines

I also created a project for the branding, to be used by designers and marketing teams. It includes a brand in different formats, the color palette, the business card and a business presentation.

Note: the image on the side is just an example.

Landing Page

Meeting requirements, improving user experience, interface, and more!

I crafted an engaging user experience that highlights our products, features, and unique benefits. Here’s a breakdown of what I accomplished:


Inspiration
- To create an impactful design, I benchmarked competitors and industry leaders like Microsoft and Adobe. This allowed me to incorporate ideas into the landing page.


Product strengths
- It should standout the products features and benefits. Whether it’s cutting-edge technology, integration, or customer support, visitors get a clear picture of what sets they apart.


Company presentation
- Mission. vision, values, qualitative and quantitative information about the company. Also a collection of the last and top read article.

Mobile App

Meeting requirements, improving user experience, interface, and more!

Screens

Some design artefacts of this project.

No items found.