Research & Brand Sync
Because I joined an already existing team, I had the task of acquainting myself with the work that the app team and the brand team had already completed.
I spent time downloading and familiarizing myself with all the research around the mobile application I would be presenting on the website. The user research revealed that while users are excited about building tech careers, they often feel overwhelmed by the job search process and uncertain about which skills to build. Many expressed skepticism about trusting AI for career advice, but showed strong interest in personalized learning paths, curated resources, and real-world project opportunities. A lack of mentorship, community support, and structured guidance were common barriers to progress. These insights shaped the foundation for Rita ABC, emphasizing the need for clear, personalized, and trustworthy career-building tools powered by AI.
This research flagged to me that I need to give users of the website a lot of clarity on how the app works step-by-step to assuage any reservations around the use of AI, as well as, showcase the features and personalized approach of the application.
I also extensively worked with the Brand team to get a deep understanding of what the Rita ABC brand is. The guidelines I was given are shown below word mapping, imagery, and design system. More specifically for the website I was told to utilize a brutalist aesthetic and evoke a digital tie-dye, Gen Z vibe.
Competitive & Comparative Analysis
For the development of the Rita ABC website, I conducted a competitive analysis of existing AI-driven and expert-led career platforms—CareersPro, Coach, and Career Explorer. I broke the analysis down into several key areas: landing page design, product features, website design and content, and overall strengths and weaknesses. By examining how each platform presents its tools, messaging, and user flow, I identified best practices and gaps in the market.
This analysis revealed that while some competitors offered strong visual design or robust planning tools, many lacked engaging interactivity, personalization, or clear value propositions. These insights helped shape the direction for Rita ABC to prioritize a user-friendly, transparent AI experience, emphasize personalized guidance, and include features like progress tracking, community engagement, and actionable learning paths—all while maintaining an approachable, modern interface.
View the full Competitive Analysis here in FigJam
As part of the visual and interaction design process for Rita ABC’s website, I conducted a comparative analysis of websites that effectively showcase mobile apps, focusing on layout, animation, and user engagement strategies. I explored a range of examples—such as Pillow Talk, Heads Up, and Lumen—which each use high-contrast visuals, floating elements, motion, and dynamic transitions to present their apps in a compelling way.
This analysis revealed that effective sites avoid rigid structure, instead using varied layouts, layered visuals, and scroll-based animation to guide the user naturally through content. A recurring pattern was the use of app prototypes or devices in action, allowing users to instantly visualize product functionality and value. From this, I drew inspiration to ensure Rita ABC’s homepage would feel lively, modern, and intuitive—using motion, contrast, and strong visual hierarchy to mirror the innovative and forward-thinking nature of the product itself.
View the Comparative Analysis here in Figma
Sitemapping
To build the sitemap for the Rita ABC website, I started by identifying the key goals of the site: to introduce the product, highlight its features, and drive mobile app downloads and investor interest. The homepage serves as a central hub, guiding users through a structured flow—beginning with a hero section and core features, followed by calls to action like newsletter sign-up, investor/donation opportunities, and FAQs.
Supporting pages like Mission and Investor branch off from the homepage, each with clear content blocks (hero, body, and forms where needed) and a consistent footer for navigation and social links. A separate Download App CTA is emphasized as a key user flow. This sitemap ensured a clean, scalable structure that keeps users engaged while supporting business objectives like app adoption and funding outreach.
User Flows
To build the user flows for the Rita ABC website, I mapped out two primary user types: investors interested in supporting the platform and users seeking career guidance in tech. Each flow was designed to align with their distinct motivations and ensure a seamless journey from curiosity to action.
For investors, the flow focuses on leading them through the homepage, highlighting Rita ABC’s mission and features, and ultimately guiding them to the investor page where they can connect with the team. For career-seeking users, the flow emphasizes exploring app features, engaging with a GPT-style intro preview, signing up for updates, or downloading the app directly. Both paths are structured around key moments of decision-making and emotional readiness, ensuring the site provides the right information and call-to-actions at each step of their journey.
View User Flows: User Flows
Wireframing
To build the Lo-Fi and Mid-Fi wireframes for the Rita ABC website, I translated key insights from the sitemap and user flows into a structured, intuitive layout. I focused on creating a clear visual hierarchy that guides users through essential content—starting with a strong hero section and calls to action, followed by modular content blocks for features, values, metrics, and ways to engage. Each page was designed with a mobile-first mindset, ensuring responsiveness and ease of navigation.
The Home, Mission, and Investor pages were all wireframed to align with user goals identified in research: learning about the platform, exploring its broader ecosystem, and connecting with the team. I included interactive elements like a "How it works" section, investor form, and newsletter sign-up to support engagement and conversion. This wireframing stage allowed for rapid iteration and feedback before moving into high-fidelity design.
See below or in Figma.
HiFi
To move from Mid-Fi to Hi-Fi wireframes for the Rita ABC website, I translated the structural clarity of the wireframes into a bold, visually immersive experience guided by the established brand design system. The creative direction leaned into a brutalist aesthetic—deliberately raw and minimal—paired with layered digital tie-dye visuals that brought energy and motion to the interface. These glitchy, vibrant textures helped express Rita ABC’s disruptive, forward-thinking brand while reinforcing the idea of navigating uncharted territory in tech careers.
I also incorporated the brand’s “navigator” concept by using radar-like graphics, sharp directional cues, and precise type hierarchy to guide users through the site. Neon greens and high-contrast blacks amplified key content, while animated UI elements and device mockups showcased product features in action. Every design choice—typography, color, layout, and interaction—was crafted to create a futuristic yet grounded experience, making users feel like they’re stepping into a new kind of digital roadmap.
Animating
In bringing the Rita ABC website to life, I partnered with a developer to refine and implement animations and micro-interactions that enhance the user experience. Using ProtoPie, we focused on scroll-based animations—like the Challenges section, where cards highlight dynamically as users scroll—to add depth and interactivity. Additionally, we worked on more simple, straightforward animations, like hover states for navigation and more. Throughout the process, we iterated closely, and I ensured that component states and design elements were clearly defined in Figma to streamline development and maintain consistency. This collaborative workflow allowed for a smooth translation of design intent into polished, responsive animations on the live site.
Dev Handoff
For the developer handoff, I carefully packaged my designs with clear documentation, organized Figma files, and defined component states to ensure a smooth transition. Given the remote nature of the role, I also recorded detailed Loom walkthroughs to explain layout intent, animation behavior, and interaction patterns. This approach helped bridge the distance, aligned our understanding, and supported a more efficient, accurate build process.
Learnings
Working on the Rita ABC project was a formative experience as my first real-world UX design role. I learned::
How to step into an existing brand and design system, quickly adapting my process to align with established visual guidelines like brutalism, digital tie-dye, and the “navigator” concept.
Collaborating with key stakeholders, I developed the site architecture, user flows, and wireframes, while learning how to balance user needs with business goals.
I also gained hands-on experience in developer collaboration—designing animations in Figma, building prototypes in ProtoPie, and using Loom videos to communicate ideas clearly in a remote environment.
This project strengthened my skills in iterative design, cross-functional communication, and translating high-level creative direction into a functional, engaging product.
