Internship: Marketo   Date: Jun - Aug 2016  Category: Interaction Design, Visual Design, & UX Research

Why

This redesign will update the Marketo experience so that it is friendlier, more modern, and more intuitive. To provide common standards for the User Experience Design team, the decision was made to create a pattern library using the Atomic Design Process, as explained by Brad Frost. I was responsible for harvesting and classifying the most core building blocks of this design language from a redesigned smart flow and redesigning core parts of the experience, such as the details page, the header, and the main navigation menu. 

Due to the non-disclosure agreement, I am not at liberty to show screenshots until this redesign is released but can show them in portfolio reviews and interviews. This redesign will be released in May 2017.  


PROCESS

User Research

First, I performed secondary research by reading articles on the elements of search and navigation experiences. By using Jakob Nielsen's list of 10 heuristics, I administered a heuristic evaluation on the current Marketo navigation and search experience. 

I then conducted user research by implementing a survey to gather feedback on the clarity of icons and the information architecture of the tree. I also wrote interview protocols to test core parts of the experience, including the tree navigation system and the global search experience. 

 

Design Pattern Library

I performed an audit of the most complete redesigned flow and harvested the most common user interface design patterns and defined their visual design and behaviors. Through frequent design reviews with the design leads and developers, I made changes to the design so that the solution would be more scalable and user-friendly.  Some design patterns include modal windows, forms, dropdowns, context menus, cards, right panels, and grids. 

I also created sketches, wireframes, and mockups to visualize what the new tree experience and search experience could look like. Based on prior user research of current users and interviews of key stakeholders, I provided design iterations. 

I also created new icons. I worked with a team of developers in Portland to keep the assets up to date in their web design pattern library. 

 

Redesigning and creating new features

I redesigned the page that summarizes key information for a smart campaign. This involved sketching, wireframing, and creating mockups. 

I also redesigned the tree navigation search experience. This also involved sketching, wireframing, creating mockups, and prototyping.  

 


TOOLS

We used Sketch to create mockups and collaborated on these design patterns via Invision. Animations were created using the software Principle.