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
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.
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.
Creating the design project from scretch;
Create component specs based on libs and raw html and css;
Redesign the platform landing page and logo.
Understanding project scope, variables and opportunities
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.
Defining a clear, user-centric solution
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.
Remote interviews were conducted to understand pain points and users need. The participation of stakeholders, customers and developers was fundamental at this stage.
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.
Meeting requirements, improving user experience, interface, and more!
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.
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.
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.
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.
Meeting requirements, improving user experience, interface, and more!
Some design artefacts of this project.