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.
Success criteria and metrics achieved.
I had the opportunity to contribute with ideas for the main product, Athenas Online. The purpose was the creation of a fluid and innovative brand that remembers the old one and keeping the same colour conception. The main concern was to not disrupt the current market experience and the client's recognition. My brand inspirations were Firefox, Edge, Mastercard, Pepsi, Amazon, and Adobe.
I also provided business materials, what included a branding variations, styleguide and palette, business presentation slides, card and folder models.
I was hired to led the design process and assure that developers would follow the design principles keeping the product consistence. To be able to apply new design solutions were necessary upgrade all the frontend, upgrading the old css framework to accep CSS 3. I was responsible for the development of a new branch to refactor all components, libs and files to accept the new frontend structure.
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.
Redesign of the product website. Here I redesigned the UI using the new branding and highlights products, features, and unique benefits.
For Inspiration, I benchmarked competitors and industry leaders like Microsoft and Adobe. This allowed me to incorporate ideas into the landing page. 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.
Key decisions made along the process
Initially I was hired to primary assume the Web Desing position, creating a consistent experience for users using the accounting web platform, Athenas Online.
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.
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.
The project demanded the creation of a consistent design project because the only resource was the Html template bought by developers, what not comes with support, fixes or updates.
It was necessary a reengineering to create a Figma file based on the template. I created the layout structure, styleguide, components and basic flows to be used as reference what was crucial for different teams, managers, engineers, and marketing.
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.
- Tested and implemented aplenty of web components, css, js and reactjs;
- Best practices upgrading web and css frameworks;
- Leadership being responsible by releases, providing training, guidance and follow ups;
