UX/UI I MARKETING I NEW MEDIA I ID (LOGOS) I ALL
Atmel.com
launched 2015
Challenge
Atmel wanted to completely reimagine its customer experience, from digital platforms to communication strategy. We crafted digital properties and stories that focussed squarely upon the needs and passions of Atmel's core users—"makers" of complex and technologically advanced cool stuff.
​
I directed a creative team of UX researchers and designers, visual designers and writers during a blended process —equal parts waterfall and agile depending on the context. We worked in an intensely collaborate format with the Atmel internal team and through many working and information sharing sessions produced a shared vision for the future of Atmel.com
​
Duration: Engagement to launch—9 months.
Roles
Creative Director
Work Session Facilitator
Art Director
UX/UI Designer
Prototype Developer
Interviewer
Methods
Interviews
Research
Competitive Analysis
Personas
Heuristics Evaluation
Mobile Survey
Google Analytics
Content Assessment
Card Sorting
Affinity Mapping
Site Map
Client Work Sessions
Wire-framing
Customer Journey Mapping
Usability Testing
Prototyping
​Design System
Annotated Mockups
Tools
Sketch
Photoshop
Illustrator
Omnigraffle
Keynote
InVision
pencil/sharpie + paper
Discovery Documents
HEURISTIC EVALUATION
A heuristic evaluation helped bubble up issues and create hypothesis regarding the current site in order to begin a conversation regarding possible point of re-evaluation. This information also helped form the questions for interviews that followed.
MOBILE SURVEY
Atmel.com had been a strictly desktop environment and a move to a responsive framework started with an examination of how competitors were optimizing this space and a general documentation of mobile best practice.
SITE ANALYTICS
We reviewed analytics from several angles—examining broad trends, targeted functionality and page-level behaviors. This data helped underscore the need for more advanced Search, Navigation and Tool refinements.
Interviews, Research and Competitive Analysis
We started with an expansive discovery phase intended to draw out information and insights across a wide range of user types and cultures. Online surveys were sent to Atmel's global customer base while additional in-person interviews were conducted in the US, Germany, and China. We worked with Atmel to identify their two primary user groups, form questions and conduct interviews. From this work was published a comprehensive “User Research Results” report that compiled statistics and analysis that would help shape the actionable goals and rational for the next phases of the project. Included in the report were also needs assessments for localization and translation.
Design Engineers
Focussed on finding the correct device in as short a time as possible in order to validate their design decisions
Systems Architects
Looking for full solutions/capabilities versus singular products
Managers
Concerned with ensuring that budget and timelines are balanced with quality and strategic functionality of product
Key Insights
-
Microcontrollers were largely considered fungible products so the overall speed and fluidity of getting samples, recommendations and accurate information was paramount.​
​​
-
Source documents were only published in English so Non-english speakers put more value in getting input from communities and peers.​
​​
-
Mobile environments were increasingly being used for business critical functions and interactions.
Complete Discovery Docs <available upon request>
Content and Navigation Re-Organization
We conducted numerous working sessions that leveraged card sorting exercises and affinity mapping to arrive at an optimized comprehensive site map. Navigation was shifted from a “link farm” structure into simplified linear categories and pages levels were flattened. This site map was robust multi-page document we created to illustrate all screens of the new architecture for the site redesign.
Wireframes-Responsive Framework
Starting with a few key pages: Home (navigation), Product and Search, we developed conceptual desktop wireframes which evolved toward more detailed and mobile designs. To allow for language translations, all designs needed to provide flexible space to grow while maintaining design integrity.
CONCEPT (LOW FIDELITY)
DETAILED DESIGN (HIGH FIDELITY)
Clickable Wireframes and Prototypes
Throughout the design process we developed various prototypes to help illustrate and explore isolated functional elements.
DETAILED (EXPANSIVE)
MICRO-INTERACTIONS
Microcontroller Selector
The original Microcontroller Selector was a popular and complex tool that allowed user to input a wide array of data and parameters in order to find corresponding products. Like the rest of the site, it too needed to exist in mobile format but because of its size and complexity, additional focussed client white board sessions were necessary to plot an optimized solution. We eventually evolved the tool to allow users to both browse the entire table of parameters at a hight level, then use modal pop-ups to display discreet full screen micro-interactions.
Icon System
We designed a library of 50+ custom icons to cover a wide range of concepts.
Wrap
User-considered, powerful tools and environments to help engineers and managers build with speed and confidence.
Launched: 2015
Status: Archived
Thoughts, Learnings and Beyond
-
In addition to the main site, we also provided high-level designs for related properties such as the Atmel Store, Microsites, Knowledge Center and Sales Portal.
​
-
A tremendous amount of valuable information was developed during Discovery and we made a concerted effort throughout the design process to draw direct lines between those insights and final execution.
​
-
Because the site was translated into 6 different languages, the formatting was made flexible enough to maintain design integrity in even the most stressed scenario.
​
-
A future project considered was the "Maker" mobile app. The app would allow attendees at tech festivals around the world to view augmented reality displays of Atmel products.
