In order to refresh the brand identity I collaborated with the design team to create a new, modern look and feel for the brand. I worked on the style guides, logo design and most importantly on the mentor dashboard as a UI Designer.
The Challenge
Create a modern and meaningful branding, and develop a style guide that will be applied to internal dashboards. My main challenge was to develop the UI of mentor side of the in-house agora and design the logo for the brand.
My Responsibilities
UI Designer, Digital Designer
A visual identity, website design and initial prototype had already been created before I was brought onto the project. The logo was not done, so my first challenge was to design a thoughtful symbol that represents the learning process and the brand.
Based on the research, the brand name and its values, I focused on bringing the metaphor of evolving with elements such as stairs or arrows going up. The other ideas evolved around symbols related to learning or books e.g. bookmarks.
Final Logo
The previous options haven't shown the personality of the brand in one hundred percent and weren't approved. After talking with a client and the feedback, we did another round of logo designs.
The idea evolved into a more handwritten and oblique style that gave the brand more profound meaning. The logo represents the successes and failures that occur while learning new things. The ending of the “E” finishes with an upwards direction which means that the process is still ongoing and the whole logo creates a loop of the learning procedure.
Besides designing the logo, I developed full UI for an internal platform for mentors to organise their lessons, meetings, messages and settings in one place. I kept the brand identity and designed it accordingly to the main website, in a dark and light theme and developed the style guide for the dashboard.
I collaborated with another designer who was working on the student side, so both of them are consistent in terms of design system while having different functionalities. That was one of the challenges in this project - to keep the mentor dashboard in the same style even though it had individual sections.
Information Architecture
The information architecture was established on previous version of the dashboard. Although, it was not documented so, based on provided wireframes and improvements, I developed it.
Typography & Colour Palette
Based on the website designs, the style guide for the dashboards was established. We decided to choose two contrasting typefaces, Urbane Rounded that is more oblique, soft and approachable with Nimbus Sans - sans serif font used for body text and smaller headers.
For the colour palette we have chosen five vivid accent colours and monochromatic tonations. The challenge was to how use them wisely and not to overwhelm the design. We decided to give three of the main courses its own colour and use it sparingly for icons or buttons connected to the courses. Green was used for new meeting, sync calendar and search buttons. Orange as a spare colour was used for primary buttons as a hover state. Elements such as body text or backgrounds were kept in monochromatic colours.
UI Toolkit
For the internal dashboard we created components and icons library to keep them consistent on both student and mentor side. I created the styles of the components below as most of the functionalities and sections were different across the two sides of the dashboard. These were developed accordingly to the style guide in terms of colours and text, and are consistent across all the screens.
Final Design
The final design of the mentor side of the dashboard aims to show mainly the upcoming schedule, add, reschedule and join meetings, and follow student's progress in a clean and accessible way. The mentor can also e.g. search for students, chat with them, add homework, give feedback but also see the dashboard as a student. Five main sections on the nav bar help to navigate through the dashboard.
You can find more details about the design and functionalities below.
