GAIN
/OVERVIEW
Gain — a digital learning experience that expands on learner-centered design principles.
CREATIVE DIRECTION
USER EXPERIENCE
HIGHER EDUCATION
UX/UI DESIGN
ACCESSIBILITY + SEO
STYLE GUIDES
CONTENT STRATEGY
CONTENT GUIDELINES
VIEW PROTOTYPE
Gain is a comprehensive web learning platform focused on providing practical skills and valuable insights to empower users to reach their goals in the field of User Experience. With a mission to elevate higher education, it offers a range of educational resources, workshops, and tutorials. Centered around learner-centered design principles, the interface aims to prioritize hands-on learning and real-world applications to equip professionals with the tools and knowledge they need to thrive in today's digital landscape.
Approach
Our strategy involves leveraging hedonic qualities in our interface design to enhance user engagement and motivation. Emulating learning experiences that generate positive feedback loops that nurture heightened exposures to self-guided practices.

By prioritizing user-centric design principles, we aim to inspire creativity and innovation among our users. Fostering a community of passionate individuals dedicated to honing their skills.
Assignment
GDES 4362 (003), Senior Thesis and Exhibition
Objective
Designing a learner-centered interface that inspires aspiring web designers to create meaningful experiences.
Contributions
User Experience
Higher Education
Creative Direction
Design Systems
Brand Identity
Designer
Adrian Ortiz
Year
Spring 2024
GAIN
/SUMMARY
Gain’s interface helps manage learning goals, facilitate learning development, and celebrates knowledge acquisitions. It’s a great solution for learner-centered design that caters to educators looking for an efficient way to enhance user engagement and inspire creativity.
Learning professionals can set personalized goals that aim to inspire creative and innovative practices. Fostering communities that build virtual experiences that emulate positive hedonic qualities to enhance user engagement and motivation.
Challenges and Leaderboards
Users can participate in various challenges and compete with friends or the community to earn acquisitions. Leaderboards can display rankings, foster friendly competition, and encourage users to push their limits. Despite not being currently implemented, it was in the ideation process for making learning more enjoyable and seen as an opportunity for instantly gratifying experiences to help users build momentum towards desirable aspirations.
By leveraging hedonic qualities, the interface attempts to ensure enhanced user engagement that motivates through continuous improvement and iteration of user feedback; emulating an environment that grows with each QOL update. Striving towards a platform that stays relevant in its language, design, and approach to learning materials.  
Learning Acolades
Gain offers pre-designed and community resources tailored to different skill levels. With an ever expanding library of courses spanning diverse topics in web development, design, marketing, and content management. As you learn, you collect certificates, achievements, and more.
Community and Social Features
Various features allow users to connect with a global community of professionals, join virtual learning spaces, and share their achievements on social media platforms.
GAIN
/STRATEGY
Gain — started as an undergraduate thesis supported by research.
USER EXPERIENCE
BRANDING + IDENTITY
HIGHER EDUCATION
WEB DESIGN + UX/UI
COMPUTER SCIENCE
VIEW THESIS
Gain is only as successful as it is considerate and without proper reflection of empathetic qualities it struggles to leave the intended impression its designed for. Without accessibility, interactive benefits, or user-advised revisions does it suffer from improper applications of user experience and learner-centered principles.
Though this was a concept that derives from the existing literature in research, it still fails to deliver in its approach. There's no doubt that branding is an expensive and time consuming process that is not only a long-term investment — but is also a high-risk, high-reward exploration in the context of newer concepts. It'll need revisions, and can be statistically raised both qualitative and quantitively when doing competitive research analysis of existing educational approaches.
Abstract of Problem
Although user experience is a developing field of expertise that has already proven its positive benefits in depth, it is less explored in its teachings, practices, and bestowment. Existing studies on a variety of topics regarding learner-centered design will lay the foundation for further envelopment of the idea of practicing what is preached in design thinking and finding ways to suggest a starting point for improving classroom materials. This will be the first step forward for designing classes around students by using web design as a subjective example.

As literature on its own has shown deficiencies in highlighting and proving this exact correlation, it will be sought out through the synthetization of multiple ideas that were found in existing research. Not only will this lay foundations for the potential of the groundwork for future researchers, but theoretically show attention to the frustrations of under-represented efforts on the sides of professors and students. Inspired by the feedback of many graphic design peers in their own experiences, the negative correlations of learning web design has seemed to be a difficult task that has placed blame on multiple conclusions; instructors, course design and layout, materials, etc. These probable pretenses will vaguely be associated with the practice of empathy in writing and will be consulted by evidence of research to reflect what may cause these issues.

By researching why learner-centered design works and formulating a framework, the gaps can be closed and expose ways to include accessibility to all kinds of educators. Therefore, bettering educational spaces for all types of learners through critical thinking and self-reflection. The results of this synthesized study can be used to reference ways to improve presentation of materials within the class environment and welcome ways to include user experience in other practices to receive its proven benefits.
GAIN
/PROCESS
Typography is vital in interface design, especially when demanding needs for versatility, adaptability, and accessibility. This is where Acumin Variable Concept infuses its classic charm of modern functionality, offering designers its comprehensive flexibility across various mediums and platforms.
Relatability to Interface
Chosen for its seamless adjustments in weight, width, and optical size, ensures optimal legibility and visual appeal in any context. Its well-suited for digital environments that require readability in responsive design. Additionally, its aesthetic and clean lines convey a sense of professionalism and sophistication, aligning with the brand's commitment to higher education. Primarily, this typeface was used consistently across all brand communications, prototypes, marketing materials, and instructional content. To ensure proper visual coherence, sufficient contrast and spacing was used to elevate accessibility.
Brand Effectiveness
Enables precise control over typographic elements, offering various design solutions without font pairings. Simplicity allows the brand to tailor its visual identity to suit different contexts and applications. Overall, striking a balance between functionality and aesthetics that makes it an ideal choice for a brand focused on web learning.
Logotype is modern, blocky, and abstract to represent a sense of innovation, sophistication, and adaptability. Breaking the rules of readability in traditional practices of identity design was purposeful to reflect these core values.
Abstraction in Design
What is seen as a reverse R, is actually the bottom spur of a G. This intentional design choice was an essential design choice that speaks towards a forward-thinking web learning platform. Breaking the rules of traditional design principles to display an act of re-imagining a system around education that looks to challenge educators to think outside the norms. This controversial decision also works in favor of the brand to make it memorable and impactful.
Usability of Logotype
The cornerstone of the brand identity anchors its visual representation across various printed materials, advertisements, and related deliverables. By incorporating the logo into these materials, such as business cards, brochures, and posters, a sense of cohesion is established that enhances brand recognition and credibility. Moreover, the logo's design elements, colors, and scalability was strategically integrated into the layout of these materials to create a cohesive visual language that resonates with learners in hard skill professions specifically; like web design.
Green conveys freshness, renewal, and prosperity. Reflecting the idea of progress and improvement that aligns with Gain's mission to empower users with practical skills and valuable insights.
Why Green Instead of Blue?
Gain opts for a color palette that resonates with its core values and mission. The bright green paired with the black and white, which represent sophistication and clarity respectively, it embodies redundant qualities of professionalism, reliability, which work in favor for attributes of a trustworthy platform; in substitution to blue.

While blue is often associated with trust and reliability as well, green conveys higher senses of dynamic and energizing hedonic qualities. Which is more suitable for a platform focused on learning and personal development.
Use Cases of Bright Green
In web interfaces, this color scheme can be utilized strategically to enhance user experiences. Bright green accents were used for call-to-action buttons or progress indicators, and mainly utilized to draw attention to desired features that the interface looks to capitalize on; premiums, courses, or other visual elements. Meanwhile, black and white provide as an assistive element for cleanliness, readability through high contrast, and a visual anchor.
Sitemaps were constructed to consider the full-scope of the user journey—from initial interactions to finding exactly what they're looking for. Transforming the experience by organizing content in a clear, logical, and purposeful informative architecture.
Strategic Flows
Through this process, executed positioning or repositioning to understand user needs and clearly distinguish differences from competitors. Additionally, the conducted flow was combined with market segmentation and targeting based on demographics of learning types, deriving insights and setting based on the research accordingly.
Ideation Process
In this phase, it was prioritized to define issues or areas of improvement where points of service was interacting with potential consumers. Based on existing dashboards, research, and literature it was found that there were definitive pain points that were core values for users. By tackling existing interface models, classifying tasks, processes, functions, and more, established a purpose; integrate desired features from user feedback. By identifying touchpoints where users interact with the product or service, it became possible to simulate a controlled experience through a visualized user flow based on methodologies.
Deliverables inherited the logo as a focal point to capture attention and communicate key brand messages effectively. Acting as a cue that reinforces identity and values, helping establish a strong connection with desired audiences.
Marketing through Advertisement
Creating various promotional materials such as bags, posters, business cards, banners, and postcards is crucial to promote brands and attract users to its platform. These physical items serve as tangible representations of the interface, allowing it to reach potential users in different settings and contexts. For example, marketable products displayed in public spaces or at events yield higher probability for brand awareness which converts well to user retention.

On the other hand, business cards provide a convenient way for representatives to share contact information with potential clients or consumers. Reinforcing this notion, bags, posters, and giveaway items can be promotional incentives to generate buzz and interest around the brand. This exploration of deliverables can be strategic assets towards longevity and memorability of messages or wider-marketable attraction.
GAIN
/CHALLENGES
01
Gain needed a content management system that was useful for streamlining the design, organization, and delivery of educational content.
Seeking to enhance its platform by implementing a robust CMS that empowers instructors to easily create and manage educational materials while providing an engaging and seamless learning experience for users. Supporting various content formats, such as text, images, videos, and other key interactive elements. Allowing for easy navigation and exploration of course materials; additionally granting access for version control, collaboration, and assessment feedback for instructors in delivering high-quality content and tracking student progress.
02
In order to properly prototype, the design of the interface utilized auto-layout features within Figma to be responsive and purposeful; pseudo-coded from scratch.
From the start the entire system had to be built with the intent of prototyping useful interactions, motion references, and experience references at a component, module, and page level. To be mindful of this every step of the build, and even worked with actual existing branded content when creating user flows, in an effort to help stimulate realistic key journeys throughout the experience. Each element was built responsively and with purpose, so that the dashboard could preview various pages and content exactly as they would appear for the user.
03
Developing innovative and engaging ways to present diverse types of content within the dashboard to cater to different learning preferences and enhance user engagement.
In order to aspire towards an empathy-driven, interactive, and highly-engaging experience for learners, their must be consideration and recognition that there are all types of deficiencies in the way information is perceived and digested. It is when empathy is included in the design process that there can be effective reflection in the way materials are reconfigured and evolved towards improvement in their respective qualities; especially in the rising marketability of remote learning interfaces.