.png)
E-learning platform & blog that helps UX professionals upskill and become better designers.
.png)
UX/UI Designer
5 weeks
⢠1 UX Researcher
⢠3 UX Designers
⢠1 Marketing Lead
⢠Competitive Analysis
⢠Wireframes
⢠Style Guide
⢠High-fidelity Mockups
⢠Dev Files
⢠Excel
⢠Google Forms
⢠Figma
⢠Slack
Avocademy is a leading company for career changers looking to upskill or transition to the UX industry. To address the challenge of managing both of their products under the same brand, we developed a responsive website design for their Design Masterclass, featuring available courses and testimonials to build trust. The website allows users to learn more about the company, review courses, and sign up seamlessly.
Avocademy provides a foundations bootcamp for career changers and various design masterclasses for designers who want to upskill. However, they soon realized that managing both products under the same brand became quite challenging.
Because of this, they decided to rebrand and create a new platform dedicated solely to Design Masterclass. This platform would offer a B2B and B2C online course subscription, as well as a blog to provide more value to their users.
.png)
To gather user feedback and gain some insight into their experiences, we surveyed 240 students who had either completed or signed up for Design Masterclass.
Many expressed interest in taking a course, but struggled to find time due to their enrollment in the foundations bootcamp. Our analysis also revealed average pricing preferences, desired courses, and a desire for more reviews and testimonials.
.png)
To inform the design of our webpage, we conducted a competitive analysis and evaluated our competitors' UI, usability and features. We found that the most successful competitors had reasonable pricing, offered business classes, utilized clear visual hierarchy to reduce cognitive load, and allowed for easy scanning.
They also had engaging and informative visuals that centered around their courses. Additionally, they included user ratings, testimonials, and class overviews to help users make informed decisions.
.png)
After synthesizing the research data, we compiled a list of requirements, and I proceeded to design medium-fidelity wireframes. Alongside three other designers, we sketched out several interface designs, creating different versions before presenting them to the client.
My main focus was on the landing page and the blog wireframes. While designing these screens, I paid close attention to logical ordering and prioritized elements that would have a significant impact on the user's decision-making process. After conducting a design review and using the feedback to iterate on the designs, I presented the wireframes to the client.
.png)
Wanting to move away from the parent companies brand and creating a new. We began looking for inspirations around the midnight blue color given to us by the client. After going through a few options and making sure that the color ratios passed contrast. We presented our options to the client.
.png)
Once the initial style guide was established and the color scheme was agreed upon, I focused on a way to present the available courses and their information in a way that was clear and easy to navigate. Based on research, I decided it was best to present courses using small cards.
Given the large number of courses, I opted for a filter tab to facilitate easy browsing. I began designing card option A, but due to the time constraint, the client preferred a simpler version. So I presented options B and C, and the client ultimately chose option C.
.png)
The initial screen, created to project a sleek, contemporary, and professional ambiance, features outlined icons to achieve a minimalistic appearance. Moreover, I arranged the screen with a distinct visual hierarchy, which facilitates easy navigation and enhances user experience.
In keeping with the minimalistic and simplistic design of other screens, we ensured consistency by designing the blog page with a clear visual hierarchy. To make navigation easy and to help users find relevant topics, we included an intuitive search functionality.
.png)
After the high-fidelity designs were approved, I compiled a comprehensive document on Figma for the developers. The document contained design specifications and any other relevant materials that would assist them in effectively implementing the designs.
This project was a short design sprint, but I found it enjoyable and informative. It taught me the significance of justifying my design choices and being able to articulate the rationale behind them. I learned to document the impact of my designs on users, which helped me prepare better for discussions with clients. This proved useful when I had to defend my decisions regarding the course cards, even though I ended up redesigning the initial ones. Ultimately, I was able to convey the reasoning behind my designs to the client.
I learned quite a lot from the process, as well as from my team members. I was introduced to new tools like Annotate it, Autoflow and measure, just to name a few. These plug-ins helped speed up the process.
.png){kind=small}
.png){kind=icon}
