Overview

Avocademy is an accessible way for people to gain real-world UX/UI skills - unlike typical educational programs with intimidating requirements or costly tuition fees that can put new graduates off from entering the workforce.

Problem

Avocademy, an accessible platform for gaining real-world UX/UI skills, faced several challenges with its website. Traditional educational programs often have intimidating requirements and costly tuition fees, deterring new graduates from entering the workforce. Additionally, Avocademy's website was outdated, with some pages featuring a cartoon mascot and cute aesthetic that no longer resonated with their desired brand image. Furthermore, the website was not optimized for mobile devices, hindering user experience and accessibility. Avocademy recognized the need to modernize its website, update the look and feel to a sleek, modern design, and ensure responsiveness for mobile users.

Clients Goal:

• Revamp all website pages for a fresh look and improved functionality.

• Integrate new pages for Affiliate Program & About Us.

• Enhance visitor engagement to increase website traffic.

• Optimizing website accessibility for all users.

Solution

To address these challenges, Avocademy embarked on a website redesign project focused on enhancing user experience and aligning with their updated brand image. The solution consisted of several key components:

1. Updated Design and Branding: Avocademy transitioned away from the cartoon mascot and cute aesthetic to a sleek, modern look. The design incorporated elements from their established style guide, ensuring consistency and cohesion across all pages.

2. Website Revamp: The website underwent a comprehensive revamp, with some pages already updated to the modern look and feel while others were still in the old style. Each page was redesigned to reflect the updated branding and provide a seamless user experience.

3. Affiliate Program Page: A new Affiliate Program page was created, featuring the modern updated design and providing detailed information about the program. The page was designed to attract potential affiliates and encourage engagement.

4. About Us Page: An About Us page was added to provide users with insight into Avocademy's mission, values, and team members. The page featured the modern updated design and contributed to establishing trust and credibility with visitors.

5. Responsive Design: The redesigned website was optimized for mobile screens, ensuring a consistent and intuitive experience across all devices. Responsive design techniques were implemented to adapt the layout and functionality seamlessly to different screen sizes.

By implementing these solutions, Avocademy successfully modernized its website, enhanced user experience, and aligned its branding with its desired image. The updated design and responsive functionality improved accessibility for users, while the addition of new pages provided valuable information and engagement opportunities. Overall, the redesign project contributed to Avocademy's goal of providing an accessible platform for gaining real-world UX/UI skills.

Process

Role

Tools

Duration

• Discovery

• Ideation

• Design

• Dev Handoff

• Reflection

• UX/UI Designer (Team of 2 to the 4)

• Figma

• Google forms

• Slack

• Zoom

• 5 Months

1

2

3

4

5

Discovery

Kick-Off Call

As we began the project, our team held a kick-off call to set the stage for success. We drove deep into the client brief, asking questions to understand their needs and goals fully. The client provided us with user stories and some existing website content- including an updated version of the site itself (which we used for reference), a style guide, and a user story they'd developed for this brand. We mapped out a plan that hit deadlines to ensure a great redesign and a new web page.

• As a potential affiliate, I want to learn more about Avocademy's affiliate program and see the links to sign up and sign in.

• As a browsing website visitor, I want to learn more about Avocademy as a company on the About Page.

• As a browsing website visitor, I want to learn more about Avocademy's Job openings on the about page (link to LinkedIn jobs)

Key Takeaways:

• Create the "Avo-Ambassador" affiliate page and the "About Us" page to match their updated branding.

• Make sure our users know who we are and what we stand for, our mission, and our culture.

• Ensure that all the content is clear and easily understandable.

User Stories:

Competitive Analysis

To begin our process, we did some research by looking at what other competitors are doing for their affiliate and "About Us" pages. Our client told us which websites they liked for inspiration. For the affiliate page, they liked Uxcel & Springboard web pages. For the "About Us," they liked what Memorisely and General Assembly are doing with their pages. They were the websites that they felt best presented their company's image and explained what was appealing about them in greater detail.

When we looked at the competitor's website, we found that they were all doing similar things for both their affiliate and "About Us" pages when it came to the content and layout of their sites. We knew that we had to take action and improve in some way.

• We include additional captivating and visually appealing graphics to enhance the page's appeal.

• Educate users on the benefits of participating in the "rewards program" affiliate program and why they should consider joining.

• Educate and invite users to join Avocademy's community to help support their culture and values, and achieve their mission.

Ideation

Mid-Fi Wireframes

Using Figma, we created wireframes and divided our team into pairs. My partner and I collaborated on redesigning the "Avo-Ambassador" page, while the others focused on the "About Us" page. By considering the features of our client's competitors' affiliate pages that the client liked and incorporating them into our design. Through collaborative efforts, we successfully developed a functional and structured layout that provides clear information on the affiliate program and effectively addresses the client's key concerns.

To ensure consistency with the existing pages, we used the same grid size and implemented responsive design "breakpoints" to accommodate various screen sizes.

UI Inspiration

Both groups drew inspiration from the recently updated web pages on Avocademy's website. We aimed to maintain visual consistency with the other existing pages by ensuring that both pages' styles and appearances matched up.

• The updated existing screens displayed a UI style that is in line with current trends.

• Indicated that it prioritizes people, which makes them more relatable.

• Also, utilized imaginative visual designs to present their content.

Design

Style & Component Guide

To establish the style guide, both groups began by gathering all of the text and colors from the current assets. Then, we defined the text styles and color styles based on this collection. This ensures that the high-fidelity screens maintain the same style as the updated existing pages.

We also created a component guide by gathering assets from the existing pages, such as the navigation bar, buttons, and footer, as well as some design elements.

UI Iterations

My teammate and I presented three unique UI versions to the client. I created the first two of the three iterations due to time constraints, and my teammate contributed to the creation of the third option.

After reviewing our proposals, the client provided us with feedback on the aspects they liked and disliked from each iteration. They expressed interest in certain design elements from each proposal but also had specific requests for changes and improvements.

Taking this feedback into consideration, my teammate and I worked together to create a revised UI design that incorporated the client's preferences and suggestions.

Considering the client's feedback, my teammate and I worked together to create a revised UI design that incorporated the client's preferences and suggestions. We had no difficulty in putting together the final screen. Like a puzzle, we simply pieced together the elements the client desired and addressed any minor issues that required attention. And just like that, we had our final screen!

Minor issues corrected:

• Take away some of the "flowing squiggly line" designs.

• Correct the visual hierarchy and wording from the "Avo-Ambassador Rewards Program" section.

Once we completed the final iteration, we presented it to the client for their review and approval. They were pleased with the result and expressed confidence that it would meet their needs. This collaborative process of presenting multiple iterations and incorporating client feedback was a successful approach that resulted in a satisfactory outcome for everyone involved.

High-Fidelity Screens

Dev Handoff

The team worked together to produce a comprehensive UX/UI document that detailed the proposed design changes for the client's development team. To improve understanding, the document included detailed annotations that were highlighted for export.

We begin by dividing each section into its constituent parts, distinguishing between elements that require coding versus those that are simply images. For example, when working on the hero section, we omit the navigation since the website builder can handle that, and we remove the text and buttons that can be typed directly into the builder. We also focus on ensuring that each section is appropriately filled with the correct background color.

Reflection

Learnings

• Establishing Designs. One valuable lesson learned from this project was the importance of establishing design standards before creating wireframes. By defining a design system at the beginning, the team could ensure consistency across all screens and reduce the need for revisions. Doing this helped to streamline the design process and ensured that the final product was cohesive and visually appealing.

• Effective communication is key for ensuring consistency in design. While it's important for designers to have time to work independently, it's equally important to maintain open lines of communication throughout the design process. By doing so, the team can avoid redundant work and ensure that everyone is working towards the same goals.

• Iterative design can lead to more effective solutions. By taking an iterative approach and gathering feedback from the users and clients, design teams can refine their solutions and develop more effective designs that meet the needs of their clients and users.

Looking Forward

The team was able to bring the client's specific brand vision to life through great attention to detail in this project.

Given more time, I would conduct further research to determine whether users are obtaining all the necessary information or if there are additional elements they would like to see on the page. The aim would be to enhance the number of visitors to the site.

With the launch of its revamped website and increasing enrollment of students in the UX/UI field, I'm excited to see how Avocademy's site will evolve and expand.

Thank you for reading my case study!