The team reviewed various online schools to discover their UX/UI design strategies.
Avocademy
A platform for inclusive education enabling people from any background to pursue UX/UI.
Overview
Avocademy, a woman-owned and LGBTQ+-led startup, prioritizes passion, creativity, connection, and inclusion in all aspects of its operations. The company's overarching mission is to make a positive impact on students, colleagues, and the industry as a whole by upholding these values.
Problem
Avocademy required a redesign of the "Affiliate" page to align with the updated branding. Additionally, there was no "About Us" page in existence. The client's objective for the "Affiliate" page is to educate prospective affiliates about the program and provide guidance on the sign-up and sign-in processes. On the other hand, for the About Us page, the client aims to offer website visitors insights into Avocademy's company and its job opportunities.
Solution
Adhering to Avocademy's updated branding, our team redesigned the "Affiliate" page with a fresh appearance. The page now includes comprehensive details on how to become an affiliate, along with the advantages of signing up and the corresponding rewards. Additionally, we developed an "About Us" page to showcase information on Avocademy as a company, its values and mission, and the organizational culture, which serves as a resource for anyone interested in joining the Avocademy team.
Role:
UX/UI Designer (team of 4)
Process:
Discovery
Ideation
Design
Developer Handoff
Reflection
Tools:
Figma
Zoom
Slack
Duration:
5 Weeks
Discovery
Project Kickoff
To kick off the project, the team held a client onboarding meeting via Zoom to discuss the client's requirements. The initial task at hand is to create wireframes, comprising of 2 pages with 3 frames each for desktop, tablet, and mobile. The team of 4 has split into two pairs to work on each page respectively.
By utilizing the client's existing website assets, the team conducted a thorough review and established various UI elements such as text styles, color styles, and components. Additionally, the client provided a comprehensive press kit that includes information on the company's background, culture, contact information, employee teams, photos, logos, and other essential branding assets.
Key takeaways that informed the team's design decisions:
The client helped identify potential pain points in the existing design.
User preferences influenced design decisions made as we moved forward.
Competitive Analysis
At the outset of the project, our team conducted a thorough analysis of the existing design assets and product. Next, we conducted competitive research on UX/UI design schools, including CareerFoundry, General Assembly, Flatiron School, UXpressia, Coursera, and others, to gain insights into their strategies for "Affiliate" and "About Us" pages.
In terms of UX/UI design, the prevalent information hierarchy pattern observed in affiliate program pages includes three key sections: "Expectations," "Becoming an Affiliate," and "FAQs." Conversely, the "About Us" pages tend to feature a distinct set of sections, including "Mission and Values," "History," "Culture," and other relevant information about the company as a whole. By leveraging industry best practices, we aimed to enhance the user experience and optimize the performance of these pages.
Key takeaways from the analysis:
Information hierarchy was used to organize content and guide users.
The content organization ensured that information was structured in a way that was easy for users to understand and find what they needed.
The interactive design was employed to create engaging and intuitive interfaces for user interaction through the use of CTAs.
Layout design balanced visual elements to guide the user's eye through the interface.
Ideation
User Stories
Whilst analyzing the user stories, I gained insights on the redesign of Avocademy's "About Us" and "Affiliate" page, including identifying the critical features and functionalities necessary to enhance the user experience.
As a potential affiliate, I need an easy-to-use interface that highlights Avocademy's affiliate program and a clear call-to-action to sign up and log in to quickly understand and join the program.
As a website user, I aim to access informative and well-structured content on Avocademy's "About Us" page to gain an understanding of their company background, values, and mission as part of my browsing experience.
"As a website user, I want to learn more about Avocademy's job openings on their "About Us" page to explore potential employment opportunities.
Med-Fi Iteration of the "About Us" Page
Med-Fidelity Wireframes
As UX/UI designers, my team member and I collaborated to create responsive versions of the "About Us" page using existing design assets and adhering to the updated branding guidelines. Concurrently, the "Affiliate" page was reimagined by other team members to align with and maintain visual consistency. Throughout the design process, we conducted regular client meetings to gather feedback and produced 4 wireframe iterations.
Our main principles as designers include:
Prioritizing information hierarchy and content placement
Implementing responsive design principles to ensure a seamless user experience across different devices
Creating a balance between functionality and visual aesthetics, while keeping the design simple and intuitive for the user.
Design
Incorporating well-established principles and guidelines for effective UI design
UI Iterations
Through continuous collaboration and iteration, we were able to produce 3 UI iterations for the "About Us" and "Affiliate" pages that were visually appealing, functional, and consistent with the project's overall objective.
To streamline the project execution, the UX/UI design team divided the work into two pages and assigned two designers to each page. I collaborated with another designer on design iterations for the "About Us" page.
Whilst incorporating client feedback as we progressed, the team then conducted a thorough review of both pages, assessing various design factors such as white space, iconography, typography, and color. In addition to utilizing assets from the client's existing designs, we also created new components to build the designs.
Style Guide
As a UX/UI designer, I recognized the importance of adhering to a consistent style guide in this Avocademy design project. To do this, I created a style guide as a guideline for design elements, such as color palettes, typography, buttons, iconography, and UI components. These design elements are used to create a consistent visual language for Avocademy's brand, which is essential in UX/UI design.
Adhering to the style guide, it helped maintain consistency throughout the design, ensuring that all design elements were visually cohesive and followed the principles of good UI design. This consistency also improved the usability of the product, as users can quickly become familiar with the interface and navigate it more efficiently.
Moreover, following the style guide using established UX/UI design principles created a positive impact on user satisfaction. Users tend to prefer interfaces that are visually appealing and easy to use, and consistency in design helps to build trust and brand recognition, which can lead to increased engagement and loyalty.
By following the style guide while staying true to Avocademy's brand visual identity, the project's success will be improved through consistency, usability, and user satisfaction - all essential elements in UX/UI design.
Final Hi-fidelity Screens
For our UX/UI design project, we utilized a pair-based approach where each team member was assigned to a specific page. My team member and I were assigned to design the Hi-Fi screens for the "About Us" page, while the other pair worked on the "Affiliate" page. Our main objective was to create a visually clean and professional design that aligned with the client's brand identity.
Throughout the design process, we actively gathered feedback from the client and incorporated their suggestions to ensure that the final designs met their expectations. We worked collaboratively, leveraging our design skills and knowledge to make necessary changes while adhering to the project's established style guide.
Our team successfully delivered final designs for the "About Us" and "Affiliate" pages that not only met the client's objectives but also aligned perfectly with the project's overall goals.
Developer Handoff
The team collaborated to deliver a comprehensive UX/UI document that outlined proposed design changes for the client's development team. Detailed annotations were included to enhance comprehension, and specific design elements were annotated for export. The team's dedication to enhancing the user experience resulted in a successful deliverable that met the client's needs.
A section of the About Us page that show our annotations for the developer.
Reflection
Looking back on the project, I realize that effective communication and collaboration were key components of successful project management. Our team prioritized regular client meetings and feedback gathering to ensure that we were meeting the project objectives and delivering designs that met user needs.
In terms of design, we focused on creating visually appealing designs while still prioritizing user experience and functionality. This involved implementing responsive design principles, prioritizing information hierarchy and content placement, and producing wireframe and UI iterations.
To continue improving in the future, I recognize the importance of continuous feedback gathering and user testing to ensure that designs are meeting user needs and preferences. Exploring new design tools and techniques can also help keep designs fresh and innovative.
Overall, I am proud of the work our team accomplished on this project and look forward to applying the lessons learned to future design projects.
Thank you for reading my case study!
Want to share ideas & discuss ways to collaborate? Send me a message!