ANALOG DEVICES (ADI) & ANALOG.COM
Design UI solutions for 30+ web pages to deliver top-of-class, global experience—connecting users with valuable information
Overview
Analog Devices (ADI), also know as 'Analog' is an American multinational semiconductor-technology company specializing in instrumentation, signal processing, power management and data conversion – within the aerospace, automotive, communications and electronics industries.
Primary Goals
Create editorial-style digital web page experience connecting C-level, industry leaders to ADI technology solutions. Take research findings and execute into digital products that are differentiated in the market. Increase user interest and drive traffic within Anlaog.com and Signals+ portal — connecting users with data, information, brand experience, visuals, product links and elevate organic traffic.
Business needs and UX goals
-
Establish the company as a leader in the semiconductor industry-drive new partnerships.
-
Create dedicated sections for products, solutions, or services with detailed descriptions, specifications, and use cases.
-
Use high-quality visuals (e.g., diagrams, product images) to complement text. Use consistent branding, color schemes, and typography that resonate with the semiconductor industry.
-
Include search functionality for quick access to specific content.
-
Use SEO best practices like keyword optimization, meta tags, and alt text.
Impactful Results
The project's success was measured by its tangible impact on users' lives around the globe, reaffirming the power of thoughtful design. Since launching the Signals+ web portal and newly designed UI web pages, the YoY-visitor recorded a +3% increase- researched by OKR marketing metrics.
Responsibilities
-
Desk Research
-
Data Storytelling
-
User Interface Design
-
Digital Illustration
-
Product Design, QC
-
Wireframes, Prototypes
Tools: Figma, Axure, Photoshop-Illustrator, Workfront-CMS
Product Requirements
Entire product design process has integration of: brand, usability, interactivity and functionality—ensuring that the product's user interface is as intuitive as possible.
Challenges
Analog Devices aimed to enhance user engagement and drive traffic to both its Analog.com website and Signals+ portal. However, the UX product team uncovered critical insights through primary research into key metrics. They discovered the user experience was failing to direct visitors to essential data, key information, and vital product links, making the platform less engaging for users. Additionally, there were other business requirements related to UX/UI, SEO, and market research to boost organic traffic. This sparked the development of a comprehensive UI design plan to address these issues and improve the overall user journey.
Research and Understanding
One key feature our team researched were strategies to help direct users to key subject matter, website articles and technical products. The UX team conducted surveys and interviews to uncover friction areas in the user flow and developed action plans concentrated on 'jobs-to-be-done'.​
Project Objectives and Action Plan
Design with Empathy and Research
-
Interview Stakeholders, UX, Team, Project Managers, Clients, and Subject Matter Experts
-
​integrate research and insights into the design solution process
-
Desk research, testing-benchmarks, user journey and user flows
Define and Ideate
-
Speak the same language as UX Research Team
-
Brainstorming ideas,, talk about problems and come up with solutions
-
Influence UI sketches, wireframes and design mockups
Prototype, Iteration and Development
-
Create and iterate rapid prototypes for the UI product MVP
-
Work with engineers and developers to ensure the product is ready for LIVE launch
Test, Validation, Launch and Iterate
-
Test with Development and the UX team
-
QC product before it goes LIVE
-
Make sure all content is properly created, SEO and uploaded to the CMS-DAM
Ideation, Conceptualization and Design
I created tangible UI concepts, ideas and designs from brainstorming, mind maps, and napkin sketches.
With a Bootstrap-style as the underlying framework, I created low to medium fidelity wireframes to present and collaborate with key team members.
​
The UI webpage designs focused primarily on:
-
Clear navigation, efficiency and consistency
-
Focus, balance and aesthetic quality for the product
-
Business goals-requirements and user needs
-
Feedback to the user and Affordances​
-
Visual storytelling and Brand guidelines
Wireframe and stakeholder collaborations
Working with stakeholders and UX product management, I designed responsive UI wireframes, redlines and prototypes— developed functional and user-friendly web page designs.
The UX research and definition helped inform the UI Designs and digital visuals.
Design Process: Medium Fidelity Prototypes
Developer Hand-off, Testing, Validation and Iterate
High-Fidelity Prototypes and responsive web-mobile
I created a multi-page approach to help streamline branding, UI Design and developmental operations.
Business Impact​
By taking research insights and using them strategically into the web page development, the design processes of our team directly affected how the product functions, how users would experience it, and how it looked aesthetically. This was demonstrated by the much-improved UI Designs — meeting the business objectives and goals.
Each one of the web page designs was an occasion to create a unique experience linking UI, content and digital visuals. My focus was to maintain the UI design standards, brand and design system requirements related to functionality and findability, as well as, showing consistency across all pages including navigation and content hierarchical.
Final UI Design Solution: LIVE
Additional Analog.com UI Projects
Examples of UI Design components and collaborations with ADI engineering testing team:
Each website page has an opportunity to create unique content scenarios. As part of this project, I created an interactive solution for a custom information carousel.
The high-fidelity mockups were designed and translated into working prototypes — built and created using Adobe CC, Axure and Figma.
Carousel Redline Specs for Engineering and Development: Responsive Desktop / Mobile
UI DESIGN, TEST AND ITERATE
Information Architecture: Experience Design
UI DESIGN
Analog.com UI Design and content visuals for web pages within Analog.com navigation Architecture
UI Design Results and Goals met
Our team's output resulted in:
-
Clear, intuitive and consistent UI output
-
On-Brand tone, UX micro-copy and visuals
-
Ensured accessibility met guidelines and Dev team requirements
-
Consistent UI conventions and standards
-
Provided feedback to users actions and tasks
-
Exceptional content design and digital visuals.
Key Learnings:
-
Don’t go LIVE without hammering out the details: This projects gave us the opportunity to find and fix some showstopper bugs before launching and making sure the real-world prototypes were functional before they became a ticketed item. We uncovered UI constraints when working with the Engineering. There were also pipeline time constraint tie-ups. Communication and planning were key in helping us deliver the highest quality outputs within project Dev constraints. By asking the right questions as well as preparing detailed Redlines and Prototypes helped me make great first impressions with Dev teams and stay on-track with our goals.
-
Planning and preparation: Find opportunities to connect and learn from Stakeholders and subject matter experts before workshops for design ideation. I uncovered more valuable UI design information by taking a little extra time to uncover experience pain points and user insights from key team members and researchers.
-
Sharing knowledge and participation: I collaborated with our senior stakeholders, PMs and writers to uncover valuable information to determine if the product could move forward to going LIVE in development. Collaboration and constant feedback helped me get closer to delivering QC'd web page designs on schedule and accurate UI development—rolling up my sleeves and getting dirty to manage ways to get to efficiently get to our primary goals. My work became stronger with each feedback session and critique, ultimately improving my skills as a design-thinker.
