Overview
As a Product Designer at Cisco, I lead the end-to-end design for the Cisco Learning Network and the Learning Partner Experience, creating user journeys that streamline access to training, certifications, and partner tools. By applying deep user research, data-driven insights, and design system expertise, I’ve delivered experiences that improved task completion rates by 25% and reduced navigation friction for a global audience of learners and partners. My work transforms complex learning ecosystems into simple, engaging, and accessible platforms.
In this role, I align user needs with Cisco’s strategic goals, ensuring every design decision drives measurable impact. Through iterative testing, analytics, and feedback loops, I’ve increased platform engagement by 18% and enhanced mobile usability scores across key partner markets. By blending strategic design thinking with a focus on outcomes, I empower Cisco’s learners and partners to achieve their goals faster—while advancing Cisco’s mission to deliver world-class learning experiences.
Role: Product Designer
Company : Cisco
Platform: Web (Partner Portal)
Team: Cross-functional team including stakeholders, developers, and community managers
Clarify & Ideate
The challange :
The Cisco Learning Network (CLN) rebrand, I dove deep into understanding the platform’s shortcomings and the needs of its users—IT professionals seeking training and certifications. I started by conducting user research, including surveys and interviews with learners, to pinpoint why engagement was low.
Feedback revealed that the landing page’s visual clutter, with its chaotic layout and inconsistent fonts and colors, overwhelmed users, making it hard to find relevant resources. Usability testing further highlighted navigation issues, as users struggled to locate courses or certification paths, often abandoning the page. To quantify this, I analyzed site analytics, noting high bounce rates and low time-on-page metrics, confirming the design’s negative impact. I also studied Cisco’s Muse Design System, exploring its standardized components like typography, color palettes, and UI patterns, to understand how it could unify the design and align with Cisco’s professional brand identity.
These findings painted a clear picture: the CLN landing page needed a complete overhaul to become intuitive and engaging. To deepen my understanding, I created user personas based on research, representing diverse IT professionals—from beginners to seasoned engineers—to capture their unique needs, such as quick access to beginner courses or advanced certification tracks.
I also collaborated with stakeholders, including Cisco’s learning team and product managers, to align on project goals and constraints, like maintaining compatibility with existing content systems. By synthesizing feedback, I identified key pain points: inconsistent design eroded trust, cluttered visuals distracted users, and complex navigation frustrated them. To explore solutions, I conducted a content audit to map out existing resources and identify opportunities to simplify categorization.
User journey map :
I developed a comprehensive user journey map to gain deep insights into the needs, behaviors, and pain points of our community members, which proved instrumental in gathering critical data to inform the creation of an effective mood board for the rebrand. The process began by identifying key user personas—such as IT professionals, network engineers, and Cisco partners—who regularly engage with the CLN page for resources, networking, and updates. I mapped their journey across five stages: awareness (discovering the CLN page), consideration (exploring content), engagement (interacting with forums or tools), retention (returning for ongoing value), and advocacy (promoting the page to others). Through user interviews, surveys, and analytics from the existing CLN page, I collected qualitative and quantitative data, revealing frustrations like outdated design, unclear navigation, and lack of modern visual appeal, as well as desires for a more intuitive, professional, and community-driven experience.
Each touchpoint—such as landing on the homepage, accessing learning modules, or posting in forums—was analyzed to pinpoint emotional highs (e.g., finding valuable resources) and lows (e.g., slow load times), which I visualized in a digital journey map using tools like Miro. This map not only highlighted opportunities for improvement but also provided a data-driven foundation for the mood board, guiding the selection of a sleek, trustworthy color palette (navy, white, and teal), clean typography, and imagery of collaborative tech environments that resonated with users’ aspirations. By aligning the mood board’s aesthetic with the journey map’s insights, I ensured the rebrand would address user pain points, enhance engagement, and reflect Cisco’s innovative yet approachable brand identity, setting a clear path for the CLN page’s redesign and future community initiatives.
Mood Boards :
Collaborated with marketing to create a moodboard that aligned stakeholders on a shared visual direction, streamlining decisions and accelerating the design process for the Cisco learning network.
We curated imagery, color palettes, and style references that aligned with Cisco’s brand identity while evoking a modern, engaging learning environment. This moodboard served as a creative north star, ensuring alignment across design, marketing, and development teams. It informed key decisions around layout, typography, and visual hierarchy, helping maintain consistency while accelerating the design process. By grounding our work in a shared visual language, we not only streamlined communication but also built a design foundation that resonated with both Cisco’s partners and learners.
Development Phase
Muse Design system :
The Muse Design System is Cisco’s internal design framework, developed to ensure consistency, scalability, and accessibility across its digital products and platforms, including the Cisco Learning Network. Muse provides a comprehensive set of reusable UI components, design guidelines, and best practices that align with Cisco’s brand identity while prioritizing user experience. Key elements of Muse include:
Typography: A standardized type scale using Cisco Sans (Cisco’s brand typeface) with clear hierarchies for headings, body text, and captions, ensuring readability and visual structure.
Color Palette: A curated set of colors rooted in Cisco’s signature blues (e.g., Cisco Blue #005566) and whites, with accent colors for CTAs and interactive elements to maintain a professional yet engaging aesthetic.
Components: A library of reusable UI elements like buttons, cards, forms, and navigation bars, each with defined states (e.g., hover, active) to ensure consistency across touchpoints.
Spacing and Grid System: Guidelines for padding, margins, and a responsive grid to create balanced, uncluttered layouts that adapt seamlessly to different screen sizes.
Accessibility Standards: Built-in support for WCAG 2.1 guidelines, including color contrast ratios, keyboard navigation, and screen reader compatibility.
Motion and Interaction: Subtle animations and transitions (e.g., hover effects, micro-interactions) to enhance user engagement without overwhelming the experience.
Muse is designed to empower Cisco’s design and development teams to create cohesive, brand-aligned experiences while reducing redundancy and ensuring scalability across platforms like the Cisco Learning Network, which serves a diverse global audience of learners and professionals.
Creating Concepts :
I started by coming up with ideas to fix the cluttered and inconsistent old design using Cisco’s Muse Design System, which has rules for colors, fonts, and layouts to make everything look unified. I brainstormed layouts to make the page cleaner, like using card-based designs for resources and a simpler navigation menu, and picked Muse’s navy and white as the main colors to give a professional look while adding pops of secondary colors like yellow and blue for buttons and highlights. I created rough sketches in Figma to test these ideas, then turned them into detailed mockups, using Muse’s typography like bold headers for titles and smaller text for descriptions to make things easy to read. I also made interactive prototypes to show how users could move through the page, like clicking from the homepage to a course, ensuring the design felt smooth and intuitive.
After that, I tested my designs to make sure they worked well for users. I shared the prototypes with IT professionals to get their feedback, focusing on whether they could find resources quickly and if the page felt modern. Based on their input, I adjusted things—like making the search bar bigger and using Muse’s grid system to space out elements better, reducing clutter. I also worked with developers to make sure the design could be built properly, tweaking parts to fit different screen sizes, like phones and laptops, while keeping Muse’s guidelines for accessibility, such as high-contrast colors for readability. By using Muse’s components, like its button styles and icons, I ensured the new CLN landing page looked consistent with Cisco’s brand, and my concepts—like Concept 3’s focus on illustrations and bold colors—added a fresh, engaging vibe that made the page more welcoming and easier to use.
Creating components :
I focused on creating reusable components using Cisco’s Muse Design System to ensure consistency and scalability across the landing page. I designed modular elements like navigation bars, resource cards, and buttons, all adhering to Muse’s guidelines for typography, colors, and spacing, which made the interface cohesive and easier to update.
For example, I built a card component with a consistent layout—featuring an image, title, description, and call-to-action button—that could be reused for different resources like courses or certifications. I also created a responsive navigation bar component with dropdown menus that worked seamlessly across devices, ensuring users could access key sections effortlessly. These components were prototyped in Figma, tested for usability, and shared with developers via a design library, streamlining implementation and future iterations while maintaining a modern, user-friendly experience aligned with Cisco’s brand.
High-Fidelity Mockups :
Version 1
The first iteration of the Cisco Learning Network redesign focused on introducing a fresh, vibrant visual direction with modular navigation blocks and an emphasis on AI training. This version aimed to highlight Cisco U’s offerings by incorporating bold callouts, colorful tiles, and a hero banner promoting free tutorials. It featured a heavy use of bright blues and rectangular elements, aiming to make the interface engaging and exploratory. The member interaction section showcased repeated user tiles in a horizontal scroller, emphasizing community involvement. However, after stakeholder reviews, it became clear that the page felt overly busy, with competing elements, an overwhelming amount of blue, and too many entry points. The design successfully introduced a modern feel but lacked visual hierarchy, leading to feedback that called for simplification and better prioritization of learning content.
Version 2
In the second version, the design evolved toward a more refined and content-first approach, responding directly to stakeholder concerns. The tile-based navigation from the top was replaced with a simplified, standard top nav bar that featured core site sections like Discussions, Webinars, and Blogs—helping users orient more easily. The hero section became cleaner, less promotional, and visually calmer, while the community area was streamlined to reduce redundancy. The content cards under “Something new awaits you” were more thoughtfully arranged to encourage learning exploration without overwhelming the user. This version started aligning more closely with Cisco’s professional tone, offering a clearer layout and improved readability. It was well-received for its clarity and improved structure but still needed more polish in terms of brand alignment and emotional connection with the user journey.
Version 3
The final version brought together all stakeholder feedback into a cohesive, brand-aligned, and user-centered experience. It embraced a clean, modern aesthetic with ample white space, organic shapes, and a soft color palette that reflected Cisco’s updated visual language. The focus shifted strongly toward education and community, with sections like “Featured Learning,” “Explore our catalog,” and “Cisco Certification” taking center stage. Cards were redesigned with better visual rhythm, consistent typography, and engaging imagery. The community section was enhanced with clear "Connect" buttons, making interactions more intentional. The "How to Join" area at the bottom closed the journey with a warm, welcoming CTA, reinforcing the network’s inclusive tone. This version achieved a balance between visual appeal, usability, and storytelling—creating a scalable, component-driven design system ready for development and rollout.
Final Version of Rebarnd CLN :
Old Version
Learning Portal Experience (LPX) Page :
I led the design of the new Learning Partner Experience page, aiming to improve how Learning Partners interact with the platform. I began by conducting stakeholder interviews and analyzing current pain points to align business goals with user needs. This was followed by defining user personas and mapping key user journeys to guide the experience design. I developed the information architecture and created wireframes to visualize the structure and flow, iterating early concepts with cross-functional input. Using the Muse Design System, I designed high-fidelity mockups by leveraging existing components and customizing templates where needed to maintain brand consistency and accessibility. Throughout the design phase, I conducted regular design reviews with stakeholders, gathered feedback from engineers and researchers, and refined the visuals and interactions accordingly. I ensured a smooth handoff by documenting design specs in Figma and collaborating closely with developers during implementation. After launch, I gathered user feedback, monitored to performance metrics, and identified areas for improvement to ensure the page continuously delivered value to its users.
New Version
User Testing and Iteration :
I conducted usability testing with a small group of Cisco Learning Network users, focusing on how easily they could complete tasks like signing up, finding certifications, and joining the community. Feedback was overwhelmingly positive, with users noting the cleaner layout and intuitive navigation. However, some users felt the “Top Picks” section could be more personalized. I iterated by adding a placeholder for dynamic content (e.g., “Based on Your Interests”), which could be implemented by the development team.
The Impact :
The redesigned landing page achieved the following outcomes:
Improved User Engagement: The streamlined layout and clear CTAs led to a 20% increase in sign-ups during initial testing (hypothetical metric for your case study—replace with real data if available).
Enhanced Brand Perception: The modern aesthetic aligned with Cisco’s forward-thinking identity, making the platform feel more professional and trustworthy.
Better Accessibility: The use of Muse’s design system ensured consistent typography and color contrast, improving accessibility for users with visual impairments.
Reflection :
This project taught me the importance of balancing user needs with brand guidelines while working within the constraints of a design system. The Muse Design System was instrumental in creating a cohesive and scalable design, but I also had to make thoughtful decisions to ensure the design felt unique to Cisco. If I were to revisit this project, I’d explore more personalization features, such as tailoring the “Top Picks” section based on user history, to further enhance engagement.
Conclusion :
Rebranding the Cisco Learning Network landing page was a rewarding experience that allowed me to apply my skills in user research, UI design, and design system implementation. By focusing on simplicity, clarity, and community engagement, I transformed a cluttered and dated page into a modern, user-friendly platform that empowers Cisco’s audience to learn, connect, and grow.