Conoscera Foundation
2024
Creating a gamified and immersive launch website for a startup nonprofit
Designed an interactive, immersive website where investors can effectively initiate the investment process and collaboration with Conoscera, all while having a fun experience learning about the organization and why they may be relevant to them.
Overview
Introducing fresh competition in both nonprofit and for profit industries
Conoscera Foundation is a scientific non-profit organization aiming to be the Earth's most human-centric holistic development system and to make it accessible to everyone. Conoscera focuses on achieving autonomy, freedom, and a high quality of life for the individual, eliminating unnecessary suffering by implementing scientific solutions for global change.
My Impact
0 to 1 mobile-first responsive website design project
Gamified navigation design
Design system creation
Successfully exercised leadership and initiative to break down team silos for enhanced communication
Extensive cross team collaboration with illustration, animation, executives, and developers
Created first iteration high-fidelity prototype (PW: AnneUXD)
Research
Defining stakeholder goals and scoping the competition
Defining Stakeholder Goal: Executives
To create an innovative, interactive website that could effectively compete in both the non-profit and for-profit sectors. The platform needs to seamlessly guide key target users—particularly investors—through learning about Conoscera's mission and initiating collaboration and investment opportunities.
Competitive Audit
The competitive audit provided a thorough analysis of the landscape, examining the digital presence of three direct and three indirect competitors.
Our findings identified key design choices essential for distinguishing Conoscera's platform in a crowded marketplace.
The insights highlighted both common features consistently included by competitors and notable gaps that presented opportunities for differentiation.
Key Audit Findings
📱 Mobile-First Design
Prioritizing mobile accessibility to accommodate novice internet users and maintain relevance in today’s smartphone-driven world. I advised the design to be developed with responsive web design and progressive enhancement, adhering to the 4Cs of Design: consistency, continuity, context, and complementarity.
🌍 Inclusive Design and Accessibility (ADA, WCAG,A11y)
It was a unanimous decision that accessibility was to be prioritized from the outset to ensure an inclusive and user-friendly platform. This approach minimizes the need for future rework, fostering a seamless experience for all users.
👍 Intuitive User Flow
An intuitive user flow was established to enable easy navigation throughout the platform, regardless of users' familiarity with online tools. This design facilitates seamless access to information and actions, reducing friction and allowing users to engage effortlessly with Conoscera's mission and investment opportunities.
🎮 Gamified Navigation
I advocated for gamified elements to enhance user engagement and create a more immersive experience. These features encourage exploration and guide users through key actions, making the process of learning about and investing in Conoscera both enjoyable and rewarding.
⭐Visual Uniqueness
Conoscera’s visual uniqueness was primarily achieved through the development of its branding. A distinct design was crafted to differentiate the platform from both non-profit and for-profit competitors, balancing aesthetic appeal with functionality to create a memorable user experience aligned with the organization’s mission. The brand manual, including colors, fonts, and tone, had been established prior to my onboarding and served as the foundation for the platform’s visual design.
Market Research
To further strengthen the design strategy, I conducted additional market research that included analyzing relevant statistics and closely following Google’s Next Billion Users (NBU) Initiative. This research provided valuable insights into emerging trends and user behaviors, particularly in underserved and rapidly growing markets.
By integrating these findings, I was able to advocate for a design direction grounded in data-driven insights, ensuring that Conoscera's platform not only meets current user needs but also positions the organization to gain a competitive edge in a dynamic landscape.
Personas
By collaborating closely with the executive team, who were in direct communication with key investors, we were able to define investor personas by focusing on their goals, frustrations, communication preferences, and unique contexts. This helped ensure our design choices were user-centric and impactful towards the final platform design.
Additionally, I created a persona, user story, and user journey map representing an adult who would benefit from the organization's initiatives, focusing on their goals when engaging with Conoscera Foundation.
Key Persona Pain Points
⏱️ Time
Both investor and adult personas share a key pain point: the need for efficiency. They want to achieve their goals quickly, with minimal effort and little to no learning curve.
📖 Information Gathering
Users prioritize information that is both relevant and actionable. They want the data they gather to directly support their goals, ensuring it’s helpful in making informed decisions and driving them toward success.
🥱 Boredom
Users are seeking more engaging experiences and prefer websites that offer interactive and dynamic elements. They want to move beyond static content, desiring features that keep them interested and make their interactions more enjoyable and immersive.
Ideate
Sketching paper wireframes
With research and creativity, our team dove into paper wireframing as an initial ideation exercise. This approach allowed us to quickly visualize the platform's user flow and rapidly generate ideas. The efficiency of paper wireframes facilitated early testing and invited honest feedback, enabling us to easily discard ineffective designs and explore promising ones without heavy commitment. Since these sketches were created early in the design process, I explored additional ways to visually gamify the platform, diversifying the design options and providing alternatives for A/B testing.
Strategy
Focusing on interactive and gamified elements
I determined that my design strategy will focus heavily on interactive and gamified elements, with a spotlight on key visuals (provided by the illustration team) supplemented with easy to read descriptions for investors and relevant users to quickly understand Conoscera's initiatives. A lo-fi prototype was finalized after various iterations, design critiques, and feedback loops from stakeholders.
🎲 Gamification was a key focus for the platform from the outset.
Leveraging my research expertise and personal passion for video games, I delved into various aspects of Game UI Design and Material Design. I carefully studied which elements and features would be most effective to incorporate into the platform's design, ensuring that the gamified experience would enhance user engagement in a meaningful and intuitive way. Below are some key visuals and styles I evaluated.
🕹️ Why Gamify?
To boost user engagement and create an immersive experience. Gamified features align with the organization’s fun and unique brand, encouraging exploration, guiding users through key actions, and making learning about and investing in Conoscera both enjoyable and rewarding.
👾 Gamification of the Vision
Vision: Empowering individuals to grow from a state of deficit to one of autonomy. Conoscera believes that everyone deserves a high quality of life, and its mission is to support them in achieving it.
I recognized an opportunity to translate this vision into the platform by drawing inspiration from video games, where character customization, inventory, and growth provide a holistic overview of development or achievement. This approach not only aligns with the organization's mission but also offers users a dynamic and engaging way to visualize their journey toward autonomy and a higher quality of life.
🚀 My research in Game UI Design and UX Research inspired a design proposal featuring one of the organization's mascots on the home screen. The mascot is surrounded by the organization's initiatives, presented as part of its inventory or equipment. This design visually reinforces and aligns with the mission and vision, emphasizing that they work together to support individual growth and autonomy.
Design
Design system creation and high-fidelity items
Design System Creation
During the transition to the high-fidelity prototype and mockup phase, I collaborated closely with the illustration, graphic design, animation, and development teams. We discussed animation capabilities and necessary visual assets for our design system.
My Design System Contributions:
I applied Material Design principles to craft the organization’s ideal dark theme (#2113C).
I initiated collaboration with the illustration team to design custom icons for the navigation menu.
I defined key micro-interactions, such as a swipe gesture for seamless page transitions.
High-Fidelity Mock Ups and Prototype
To bring everything together, I designed three high-fidelity mockups for the website's key screens: the Welcome screen, Main View screen, and City View screen.
Lessons
Greenfield projects are fun
This project was a significant learning experience, both in terms of skill development and understanding user behavior. I honed my ability to integrate gamification into UX design, realizing how powerful game elements can be in enhancing user engagement and aligning with brand identity. I also gained deeper insights into how users interact with digital platforms, particularly the importance of intuitive navigation and accessibility.
Feedback from mentors and collaboration with team members played a crucial role in my growth. Their guidance helped me refine my design approach, particularly in making data-driven decisions that ensured our platform stood out in a competitive landscape. This project reinforced the importance of continuous learning and adapting to new challenges, which I will carry forward into future work.
Next Steps
One of the immediate next steps would have been to complete the A/B testing we had in progress, using the results to refine our design and functionality. Utilizing key performance indicators (KPIs) and metrics would help assess user engagement and satisfaction, guiding further improvements to the platform.
For the team or designer following me, I recommend prioritizing user feedback throughout the design process. Engaging directly with users can reveal valuable insights that inform meaningful improvements. I also encourage you to embrace innovative ideas and approaches, as these can lead to exciting developments that differentiate the product in the market.
