CRUCIAL.COM
Commerce redesign
Redesigned commerce pages, ensuring consistent branding, improved usability, and an enhanced user experience.
ROLE
Lead UX Designer
TIMELINE
9 months
DELIVERABLES
Design System,
UX/UI design solutions
TOOLS USED
Figma, Photoshop, Illustrator
COLLABORATION
UX Manager, Project Manager, SMEs, Development, Commerce partners (Adobe, Digital River)
01 BACKGROUND
Overview
Micron, a global leader in memory manufacturing, offering retail memory and storage solutions for consumers through their e-commerce website, crucial.com, helping customers upgrade their devices to be more productive and efficient.
Problem
Crucial.com was transitioning its e-commerce platform to Adobe Experience Manager (AEM) from Digital River. This shift aimed to streamline global operations, improve site performance, enhance user experience, and ensure scalability and consistency in asset management and page structure.
Transition challenges
Migrating from Digital River to Adobe Commerce caused technical and usability challenges.
Workflow misalignment
Some workflows had become outdated due to evolving business requirements and shifting priorities.
Conflicting messaging
Content in some cases had not been updated to match newer workflows.
02 RESEARCH
Turning research insights into strategic advantage
Competitive analysis
By leveraging deep user insights and thorough competitor analysis, I identified overlooked gaps in website and brand experiences. This enabled me to deliver innovative, user-centered solutions that addressed unmet needs and provided a strong competitive advantage.
What I learned
Industry
The demand for DIY RAM and internal SSD upgrades continues to grow in the consumer market. AI and personalized tools are helping consumers make more informed decisions about which RAM and SSD best fit their needs.
User perspective
Consumers want easy-to-install upgrades with clear guidance, prioritizing high-performance and reliability to keep up with advancing tech. With similar prices and performance across RAM and SSDs, companies find it challenging to stand out.
Crucial's direct competitors
MISSION STATEMENT
Empowering today's professionals and tomorrow's champions.
TARGET MARKET
Gamers, content creators, and PC enthusiasts.
STRENGTHS
Offers reliable RAM and SSDs with 2 year warranty.
Modern look with large images.
Personalized experiences tailored to different user-types accessed in mega menu.
Filters offer a lot of different options.
WEAKNESSES
Layout can be overwhelming maybe because not enough color differentiation, mostly black.
Navigation mega menu is a bit overwhelming.
Product listing and category pages have a lot of elements making it difficult to browse the pages.
Can get lost in the information design browsing around the website.
MISSION STATEMENT
Provide quality products and solutions with unwavering service and support.
TARGET MARKET
Gamers, tech consumers and PC enthusiasts.
STRENGTHS
Offers reliable RAM and SSDs with lifetime warranty.
Consistent layout throughout.
Clear, simple navigation system to get to the right information.
Content offers helpful information about products.
WEAKNESSES
Hard to find personalized product/content tailored to user-type.
Filter system a bit confusing on product listing page.
Trust is hard to build for first time users because of lack of reviews.
Hard to understand if can buy products on site or not.
Research findings
Research insights informed the design of pages, tools, and features to create a seamless and supportive user experience, enhancing usability and positioning Crucial as a trusted leader in a competitive market.
-
Streamlined Commerce Workflows: Developed clear, branded workflows with logical steps from catalog to checkout, reducing confusion and boosting user confidence.
-
Modernized Checkout Experience: Designed a fast, intuitive single-page checkout process, using color and iconography to guide users, minimizing friction and catering to all user types.
-
Enhanced Order Management: Enabled seamless access to invoices, returns, and tracking information, improving efficiency, transparency, and trust in the customer experience.
Contextual user research at Best Buy
New to the project, I decided to conduct a contextual inquiry at Best Buy, observing shoppers and how sales specialists addressed their needs in the gaming and computer department. This would help me design with a customer-focused mindset, ensuring alignment with real-world shopping experiences.
Key objectives
-
What motivates consumers to seek help from sales specialists?
-
Why computer performance is important to consumers?
-
How do consumers shop for different systems?
-
What detractors prevent consumers from making a purchase?
-
Learn what visual aesthetics consumers are drawn to?
Methodologies
Observe and conduct contextual interviews with consumers shopping for computers and gaming devices in-store.
Interview plan
-
Introduce myself to selected and willing participants in store.
-
Explain my role and why I am doing this research.
-
Learn how they are navigating the store.
-
Understand what they thought of the aesthetics.
-
Learn how consumers make purchase decisions.
-
Learn what detractors are keeping them from buying anything.
User interview insights
Non-tech consumer
Steve, father of two children
"Found what I wanted and more!"
*Said this at the cash register to me.
Purchasing for kids, trying to find a present for them.
Overwhelmed by technology but willing to find a new system that fits his family needs.
Information dependent, relying on the sales specialist to help him find what he needs.
Aesthetics has less impact on Steve, he was more interested in understanding more about different gaming systems and what is most popular.
Detractor is lack of information to help him make a decision.
Avid gamer
Michael, teenager
"I come here to check out the latest stuff with my friends."
*Started conversation about Mario game to break ice."
Not purchasing, browsing with friends with no plan to buy anything.
Gaming technology is exciting the latest and greatest even better.
Doesn't need help from sales specialist, already knows what's he likes.
Likes bold, colorful aesthetics 3D artwork and animations. Xbox gravitates too.
Detractor is no money for all the latest greatest technology and games.
Informed gamer
Dan, sales specialist
"I love to game so working in this department is right up my alley."
*Sparked conversation when I asked about the Meta Quest 3 VR gaming.
Not purchasing, rather selling gaming technology
Loves technology and helping people find what they need when it comes to games and technology.
Likes futuristic aesthetics with minimal design, 3D artwork, a fan of virtual reality.
Detractor is not enough money for all the latest greatest technology, but saves up for products he wants with his employee discount.
03 DESIGN AUDIT
My process
1. Analysis of brand
Collaborated with the Micron brand team to align Crucial.com with the overarching brand strategy to ensure a cohesive brand experience.
2. Audit of design patterns
Reviewed design patterns to develop a strategy for translating them to Crucial.com while ensuring compliance with W3C standards.
3. Updated Crucial style guide
Utilized research, insights, and Micron's style guide to develop an updated guide that improved communication.
Integrated Micron's new design system across Crucial's components while preserving Crucial’s unique identity. This involved aligning, refining, and expanding the Crucial's style guide with new components, enhancing accessibility with new reusable components.
New and enhanced UI component examples
04 PROTOTYPE
Rapid prototyping for seamless user experiences
As the sole UX designer for the platform migration, I led the prototyping and design of a new commerce experience over nine months, including account pages, shopping cart, and checkout. Working in agile sprints with teams in India, I updated workflows, crafted features, and ensured precise, on-time delivery, enhancing the user journey and driving business outcomes.
Product catalog page redesign
Redesigning the Product Catalog page for the Micron brand was key to building trust and driving engagement. I revamped product filtering, introduced new product cards, and enhanced responsive design.
Before
After
Before
After
Redesigned filters
Single-page checkout flow
Redesigned the new checkout to have the new Micron branding streamlining the experience into a single-page flow with expandable/collapsible blades with a guided navigation using iconography and color. Integrated Digital River's new payment widget, aligning it with brand requirements and negotiating the addition of missing Terms and Conditions for compliance.
Before
After
Account sign-in
Redesigned account sign-in and account creation pages as modals to keep users on the current page, ensuring a smoother, faster experience. With dynamic loading, this approach enhances performance, boosts engagement, drives conversions, and improves overall satisfaction.
Before
After
Account management page
Redesigned all account pages to align with the Micron brand. Conducted a content audit to update outdated information, enhanced usability, and created new design flows when needed for a seamless transition to the Adobe platform.
Before
After
05 RESULTS
The site launched with no major issues. Features and usability enhancements that could not make it into launch I documented in a backlog for the BA to prioritize for enhancements. Overall, there were no complaints from customers and leadership was pleased with the optimized performance and new user experience. A big accomplishment for our team! See it live at crucial.com.
Recap of accomplishments
The migrated pages on the Adobe Commerce platform were redesigned with a focus on the customer experience. The new design enhances users' ability to find relevant products quickly. Recap of UX design successes:
-
Refined the style guide to enhance brand awareness while preserving Crucial's identity.
-
Improved iconography for efficient navigation.
-
Expanded color use to emphasize key information and reinforce branding.
-
Updated the responsive hero template for flexible design.
-
Modernized commerce pages with Micron branding and new features.
-
Ensured responsive design for accessibility and usability on the React code base.
Next phase
Post-launch, the team plans to measure the user experience and introduce further enhancements and new features that couldn’t be added during migration.