Showcase
AcadArena App 2.0 | Design System
May 2023
Mesai Memoria
UI Design
UX Design
Design System
Figma
In late 2022 to early 2023, AcadArena underwent a rebranding process, which involved the development of a new logo, color scheme, and typography. As part of this rebranding, the product team took the opportunity to redesign the web app, ensuring it aligns harmoniously with the updated branding. Below is a side by side comparison of the old and the new brand identity.
Understanding what the brand entails helps to bring character to visual designs. As designers, we don’t only follow the colors or typography that comes with it, but we also want to bring the meaning of the brand. This applies in all kinds of visual design under this rebrand, and I believe its the same with designing user interfaces. The rebrand speaks prestige, gaming, and global presence.
Below is a screenshot of how the brand is translated into the UI design.
The color palette of the app is based on the official brand gradient color. We have decided that the user interface will be in dark mode. From that, I came up with colors by choosing one dark color that will blend with the gradients. The shade differs because of the overlaying gradient set with a specific opacity.
Below is the color formula I created.
Using this formula, I created a color palette that starts with gradient 01 up to gradient 07. Gradient 01 is the UI gradient in 100% opacity. Since this is a dark mode theme, background gradients should be dark. So, I started with 30% opacity for gradient 02, then 25% for gradient 03, each gradient decreasing in 5% opacity, until we reach gradient 07 in 5% opacity which is the last background color for layer 0.
Colors are also specified with their token name, alias token name, and CSS code equivalent.
Each of these background colors are used in a particular way for layering. Below are the rules for background color usage.
For our primary and secondary colors, we decided on a purple custom color in which we named Pureva. Having a unique name instead of Purple, sets it apart from the purples we may have to use in the future.
For the other colors used for typography and states, such as, error, success, warning, select, etc. I curated colors from Tailwind. Tailwind offers a wide range of shades of color and all the colors I needed for states are already there. These colors are also already tested for web, crafted by experts and its already ensured to align with web accessibility guidelines.
Tailwind includes an expertly-crafted default color palette out-of-the-box that is a great starting point if you don’t have your own specific branding in mind.
Archivo is the font chosen for the rebranding. Archivo is a readable and scalable font so I decided to stick with this for the UI design. I created this typography sheet guide where each font style is defined by their specifications in CSS code, so it’s easily absorbed by the developers. I have also defined their desktop and mobile sizes. As you can see, the mobile breakpoint size is mentioned, this is to notify the developers that the fontsize will change when it reaches a certain breakpoint.
Each font style is named using a token naming format: fontname.fontsize.fontstyle
Font sizes are defined in rem where the base font for the whole website is 16px.
I created my own format where you can see the component in different variations and states. Beside it is the animation that has an accessible play button so the developers can easily reference the behavior. The example below is the alert component and the profile button.
In creating components, I reference my designs with Material UI. Material UI is already a proven effective and carefully designed UI library by experts. Referencing to a component library helps me in doing the best UI practices.
Responsiveness is always an important part of building a website. While designing the user interface of the app, I researched the best way to design the navigation and how to evenly divide the space. I started by analyzing the web apps I use daily and see the similarities between them to know the best practices. Something that I found is that they use column layouts, usually in 3s. For example, the first column is the main sidebar navigation, the center column is the feed or main content, and the last column is for other content, e.g. advertisements, friends list, recommended content, etc.
I applied the same practice with our web app but I designed it as a 4 column grid. Having this grid makes it easy to see how the mobile screen will look like. This grid is designed in a way that each column is stacked on each other as the breakpoint becomes smaller. This also ensures that the design is consistent in all screen sizes and it there’s no drastic change just to make adjustments for either mobile or desktop.
To ensure that the grid rules is properly communicated to the developers, I created a breakpoint guide, each specified in its screen size, with the grid applied and how white spaces appear as the screen size becomes bigger.
A redesign can be challenging and it requires work to turnover from the old to the new version. We wanted to apply the new design as soon as we can and instead of rushing but at the same time not wasting time, the team decided to release version 1.5 first before 2.0. Version 1.5 is basically half of the work we did for 2.0. This version only comprises the new colors, typography and spacing. No layout is changed, this ensures that there are no major bugs that will appear, and the engineering team will have time to discuss the engineering side of the bigger changes from 1.0 to 2.0.
For this transition, I added the version 1.0 equivalent to each version 2.0 component. Having names in a token format makes it easy to do this transition.
Shoutouts to Ceej Atienza for helping me get started with design systems for our website redesign.
Shoutouts to the whole product team as well for our milestone with version 1.5 and for all the hard work we have put for version 2.0.
Live Website (Current Version: 1.5): https://app.acadarena.com/
Project Waypoint 2.0 case study coming soon.
In late 2022 to early 2023, AcadArena underwent a rebranding process, which involved the development of a new logo, color scheme, and typography. As part of this rebranding, the product team took the opportunity to redesign the web app, ensuring it aligns harmoniously with the updated branding. Below is a side by side comparison of the old and the new brand identity.
Understanding what the brand entails helps to bring character to visual designs. As designers, we don’t only follow the colors or typography that comes with it, but we also want to bring the meaning of the brand. This applies in all kinds of visual design under this rebrand, and I believe its the same with designing user interfaces. The rebrand speaks prestige, gaming, and global presence.
Below is a screenshot of how the brand is translated into the UI design.
The color palette of the app is based on the official brand gradient color. We have decided that the user interface will be in dark mode. From that, I came up with colors by choosing one dark color that will blend with the gradients. The shade differs because of the overlaying gradient set with a specific opacity.
Below is the color formula I created.
Using this formula, I created a color palette that starts with gradient 01 up to gradient 07. Gradient 01 is the UI gradient in 100% opacity. Since this is a dark mode theme, background gradients should be dark. So, I started with 30% opacity for gradient 02, then 25% for gradient 03, each gradient decreasing in 5% opacity, until we reach gradient 07 in 5% opacity which is the last background color for layer 0.
Colors are also specified with their token name, alias token name, and CSS code equivalent.
Each of these background colors are used in a particular way for layering. Below are the rules for background color usage.
For our primary and secondary colors, we decided on a purple custom color in which we named Pureva. Having a unique name instead of Purple, sets it apart from the purples we may have to use in the future.
For the other colors used for typography and states, such as, error, success, warning, select, etc. I curated colors from Tailwind. Tailwind offers a wide range of shades of color and all the colors I needed for states are already there. These colors are also already tested for web, crafted by experts and its already ensured to align with web accessibility guidelines.
Tailwind includes an expertly-crafted default color palette out-of-the-box that is a great starting point if you don’t have your own specific branding in mind.
Archivo is the font chosen for the rebranding. Archivo is a readable and scalable font so I decided to stick with this for the UI design. I created this typography sheet guide where each font style is defined by their specifications in CSS code, so it’s easily absorbed by the developers. I have also defined their desktop and mobile sizes. As you can see, the mobile breakpoint size is mentioned, this is to notify the developers that the fontsize will change when it reaches a certain breakpoint.
Each font style is named using a token naming format: fontname.fontsize.fontstyle
Font sizes are defined in rem where the base font for the whole website is 16px.
I created my own format where you can see the component in different variations and states. Beside it is the animation that has an accessible play button so the developers can easily reference the behavior. The example below is the alert component and the profile button.
In creating components, I reference my designs with Material UI. Material UI is already a proven effective and carefully designed UI library by experts. Referencing to a component library helps me in doing the best UI practices.
Responsiveness is always an important part of building a website. While designing the user interface of the app, I researched the best way to design the navigation and how to evenly divide the space. I started by analyzing the web apps I use daily and see the similarities between them to know the best practices. Something that I found is that they use column layouts, usually in 3s. For example, the first column is the main sidebar navigation, the center column is the feed or main content, and the last column is for other content, e.g. advertisements, friends list, recommended content, etc.
I applied the same practice with our web app but I designed it as a 4 column grid. Having this grid makes it easy to see how the mobile screen will look like. This grid is designed in a way that each column is stacked on each other as the breakpoint becomes smaller. This also ensures that the design is consistent in all screen sizes and it there’s no drastic change just to make adjustments for either mobile or desktop.
To ensure that the grid rules is properly communicated to the developers, I created a breakpoint guide, each specified in its screen size, with the grid applied and how white spaces appear as the screen size becomes bigger.
A redesign can be challenging and it requires work to turnover from the old to the new version. We wanted to apply the new design as soon as we can and instead of rushing but at the same time not wasting time, the team decided to release version 1.5 first before 2.0. Version 1.5 is basically half of the work we did for 2.0. This version only comprises the new colors, typography and spacing. No layout is changed, this ensures that there are no major bugs that will appear, and the engineering team will have time to discuss the engineering side of the bigger changes from 1.0 to 2.0.
For this transition, I added the version 1.0 equivalent to each version 2.0 component. Having names in a token format makes it easy to do this transition.
Shoutouts to Ceej Atienza for helping me get started with design systems for our website redesign.
Shoutouts to the whole product team as well for our milestone with version 1.5 and for all the hard work we have put for version 2.0.
Live Website (Current Version: 1.5): https://app.acadarena.com/
Project Waypoint 2.0 case study coming soon.
