Corporate Digital Platform Redesign

UX/UI Design | Branding Design

New digital platform for one of the world's leading electronic components companies, streamlining IA, navigation, and search.

a group of various devices with different close-ups of the homepage design

Role

Creative Direction

UX / UI Design

Digital Branding & Visual Identity

As the Senior UX/UI Designer for Icreon, I led the creative team in designing this project from the ground up. I interfaced with clients and internal stakeholders, and designed and implemented the creative and visual direction for this project as well as the user experience. I oversaw the Junior Designer on our team as she worked with a strategist on the research portion of the design process, and mentored her through the design process.

Research + Discovery

Business Deep Dive + Current Experience Audit

Through direct and indirect research we immersed ourselves in the client’s business – their current content organization, visual language, tone and voice, business processes, and their goals for the future.

In this project, the competitive analysis and exploration of current user pain points were especially important. The client sells thousands of specialized products that need a high level of specific knowledge to even understand how to look for them.

We dove into their particular audience – current as well as aspirational, which guided a lot of how we implemented Search and Filtration, as well as how we promoted individual products.

Created Detailed Research Artifacts

I led the junior designer and junior strategist on my team to create design research artifacts to aid in our future designs and to present our findings clearly to our clients.

Personas are crafted through individual users’ goals and needs, but also the circumstances in which they are engaging with the client’s business – are they relaxed and at home? Traveling? Working? Context and circumstance often drive the most interesting decisions, and only through our careful exploration can we understand and direct those choices. Through mapping this research of business goals and users’ needs, we can identify current pain points and suggest areas of opportunity.

layered diagrams and charts

Market comparison and analysis

Audiences and personas

Users’ needs support the shaping and optimization of the content organization and ultimate Information Architecture, which in turn helps us map their journeys and outline specific user flows. By crafting these narratives and pathways – creating the experiences we want for people in accomplishing their goals – and with all our accumulated data informing our decisions and direction, our team moves into the next phase of the design process.

3 Options for Visual Identity

After gathering + prioritizing the business goals and user needs, and planning the basics of the new Information Architecture and framework for the new platform, I pulled together three design directions for our client to choose from.

Option One: Planned Personalization

Emphasizing specific personalized content for each core audience.

layered desktop designs

Option 1: Planned Personalization

desktop with an animated scrolling homepage design

Option Two: Did You Know?

Emphasizing knowledge, this option prioritizes a suggestion tool to bring direct recommendations to each audience.

a desktop and phone with homepage close-ups

Option 2: Did you know?

layered desktop designs

Option Three: Portal

Direct and to the point for the three main audiences of Investors, Engineers, and Students.

layered desktop designs

Option 3: Portal

laptop and desktop with homepage design close-ups

Strategy & Design

Critical Organization of the IA

After compiling our research results and drafting our plans, I worked with my junior designer to create a comprehensive organizational structure for the extensive product library.

Then I began sketching and wireframing, creating the UX structure based on the purpose and direction for each page, projected responsiveness and motion, and mapping out interaction models.

diagram of site organization

Redesign of Information Architecture and Improved User Flows

diagram of a user flow

Smoother, More Intuitive Access to Products and Purchases

open notebooks with penned design notes and sketches

Initial planning and sketches

layered desktop wireframes

Wireframes

Iterative Design

Building Out Initial Designs

The clients selected Option One from the options the strategist and I presented, but wanted a modified landing section of the homepage to incorporate the ability to showcase multiple hero messages.

So as the next phase of the design process, I developed the designs for more nuanced visuals and motion design. As I designed out the platform, I crafted a visual language for the client’s new digital platform, and developed a flexible design system to accommodate the range of content they had planned.

I designed for growth – with this toolkit and visual library, the digital product is infinitely scalable, adapting to fit new business directions and shifting goals.

layered desktop designs focused on variations in the hero sections

Iterations

layered desktop designs of navigation menus

Menu + Navigation Experiments

layered desktop designs

Initial Market-Based Search Module

layered search designs

Search Refinement Iterations

Refining Navigation + Exploration

Predictive search and extremely organized product divisions and subdivisions became key to this entire project. Working with my strategist and testing at key points, we refined the design of the navigation and search multiple times to hone in on the best experience.

Throughout our design process, I made sure to connect with the client’s team at key points in the process to check in on priorities, content, and goals, and produce the best combination of business and user needs and experience in the final product.

layered navigation menu designs

Streamlined, Organized Navigation and Menu

layered designs of search options

Predictive Search accessible throughout platform

layered design iterations of search results

Refined, Flexible Parametric Search and Dynamic Filtration

layered designs of a side drawer

Versatile Side Drawer

Personalized Content Sections for Core Audiences

With three distinct core audiences, I wanted to give each type of user exactly what they needed quickly and easily. Engineers, Students, and Investors all have unique needs when they come to the site, all while making sure everything feels cohesive.

layered designs of an engineering hub pages

Engineering Hub with a Comprehensive Toolkit

layered designs of an investor dashboard

Personalized Experiences and a Suite of Investor Resources

layered designs of product pages

Comprehensive Product Details designed for Engineering Needs and Purchasing Workflows

desktop and laptop with design close-ups

Focus on Sustainability

Highlight Business Thought Leadership Goal

As a leading supplier in the industry, the client wanted to emphasize their thought leadership in the field, so I designed an elevated experience for that type of content on their platform.

layered designs of article pages

Promotion of Thought Leadership

short animation of a desktop page design scrolling

Final Thoughts

Our team’s design process doesn’t stop when development phase starts, and I maintain constant communication throughout the development process. We work closely with our development team to translate concepts and designs throughout the building process, and proactively grow and adapt designs to solve any issues and address any feedback that comes up during development and user testing. Even after the design is “finished,” built, and deployed, we continue to collect data and feedback, evaluate, and design for growth over the life of the digital product.