GemStack Academy
Background of Company:
GemStack is a versatile consulting company specializing in custom educational services for software engineers and businesses. They offer tailored courses designed to meet the specific needs of their clients in various programming languages and technology stacks. Recently, GemStack achieved a significant milestone by securing a portion of the Algorand Foundation's 250M ALGO Grants Program. This achievement allows GemStack to design and develop a comprehensive course specifically focused on teaching Web2.0 developers, engineers, and blockchain enthusiasts how to seamlessly build applications on the Algorand blockchain platform. This partnership with the Algorand Foundation demonstrates GemStack's expertise and recognition in the field of blockchain education and their commitment to empowering developers with the necessary knowledge and skills to harness the potential of the Algorand ecosystem.
Project Goal:
The objective of the project is to create a cohesive and unified brand experience for users visiting the GemStack Academy platform. By incorporating GemStack's branding elements, such as the logo, color palette, typography, and visual style, throughout the website, the goal is to establish a strong and recognizable brand presence that aligns with GemStack's overall identity. This integration will help reinforce GemStack's reputation and create a consistent user experience across their educational offerings, showcasing their expertise and professionalism in the industry.
The Solution:
I had the opportunity to synchronize the two websites using the available editor settings provided by Teachable, an online course platform that enables instructors to create and sell their courses. By leveraging color schemes and basic CSS styling, I aimed to create a visual connection between the GemStack Academy website and GemStack's core company branding. This integration allowed the academy platform to feel like an integral part of GemStack, maintaining a consistent and cohesive brand experience for users. Through careful selection of colors, fonts, and styling elements, the aim was to create a harmonious visual identity that aligns with GemStack's overall brand image, reinforcing the academy's association with the parent company.
Research & Tech Limitations:
Due to the limitations of the Teachable plan chosen by GemStack for the academy, there were constraints on customizing the course homepage and detail pages without manually coding each page to align with the core company's branding. To navigate these technical constraints, I conducted thorough research to understand the full customization capabilities provided by Teachable within the chosen plan.
I explored articles and resources published by Teachable that outlined the available customization options for course creators. Additionally, I collaborated closely with GemStack's founder and program architect to gain a comprehensive understanding of the limitations and possibilities within the Teachable platform.
Due to the limited customization options provided by Teachable, such as the restricted color palette and typography, the design panels available for modification offered limited flexibility in incorporating extensive branding elements. The changes allowed were mainly focused on adjusting the background colors, typography, rearranging content sections, adding minor HTML code snippets, and utilizing basic templates to present information.
Unfortunately, these limitations posed challenges in terms of incorporating significant branding elements into the course pages. The scope for customization was restricted, which limited opportunities to add extensive branding components.
Leveraging the available customization options to align the color palette and typography as closely as possible with GemStack's branding guidelines, I ensured that the content structure and organization reflected the GemStack identity and value proposition, even if the visual representation was somewhat limited within the Teachable platform.
Branding Research:
Design:
I drew from GemStack's gradient color scheme to add to the Teachable template to create cohesion between the company's marketing site and the academy.
Inspiration:
Although replicating the exact gradients within Teachable may not be possible, I can utilize the available customization features to choose colors that closely resemble GemStack's brand colors. By incorporating shades of blue and purple strategically, such as in the background elements or typography, I can establish a visual connection between the course pages and GemStack's overall brand identity.
I began sketching out ideas, focusing on finding opportunities to incorporate color and gradients that would capture the essence of GemStack and align it with the Academy website. I explored different sections and components where I could introduce visual elements that reflected GemStack's branding.
I aimed to strategically add touches of color and gradients in key areas. These could include background sections, headers, buttons, or other elements that would enhance the overall visual appeal and create a connection to GemStack's branding.
By utilizing the available customization options, such as adjusting background colors, font colors, and small HTML code additions, I aimed to bring elements of GemStack's design language into the Academy website without requiring extensive coding efforts.
After receiving approval from the founder of GemStack, I began creating various design iterations that focused on incorporating color into the course home page. Given the importance of color in highlighting the changes being made, I delved into the design process with a specific emphasis on utilizing contrast to make a visual impact.
Final decisions and Iterations:
Retrospective:
Working on this project has been a valuable learning experience for me as a designer. It has taught me to embrace and understand the limitations of platforms like Teachable and find creative solutions within those constraints. Working around these limitations challenged me to find ways to incorporate branding elements effectively.
One of the key takeaways from this project was the power of color in transforming the look and feel of a website. Even with limited customization options, I discovered how strategic use of color can make a significant difference in the overall visual impact.
Collaborating closely with the founder of GemStack throughout the project was instrumental in refining my design decisions. Understanding his vision and incorporating his feedback helped me shape the course pages.
The project also pushed me out of my comfort zone, particularly in terms of color selection and design choices. It challenged my eye for color and pushed me to explore new approaches. This experience has expanded my skills and will undoubtedly benefit me in future design projects.
