Marketo Internship
A 12-week journey with a different UX mentor every week, guiding and helping us learn the tricks of the trade as we worked on brand new set of features for a marketing automation platform with over 6000 daily users.
Role: UX Designer
Location: Marketo HQ
Duration: 3 months
Tools: Balsamiq, Sketch, Principle, Invision
About Marketo
Marketo is a marketing automation web-platform that helps marketers better manage, nurture, and thus score leads. Marketo is a trusted platform for CMOs, helping marketers create better relations with their leads, and grow revenue. The platform is huge, complex, and used by over 6000 customers on a daily basis.
About the Internship
The Marketo platform is undergoing a major UI revamp. And though just an intern, I was entrusted with the UX of two completely new features - both of which are slated to be developed and implemented in the upcoming release. I also worked on redesigning Marketo's Community Support space, and animating loading screen for the new platform. Besides those, I worked with the senior designers on a number of projects at different stages, right from research to visual design.
Apart from having a cool intern program mentor, I had a new UX mentor from the team every week with stronghold on different parts of the UX process - user research, visual design, sketching and wireframing, etc.
Project 1 - Campaign Folders
Folders are one of the most important parts of Marketo. Folders can be thought of as not only an organizational tool but also as a high level reporting tool and an area to create and manage all the assets (Programs and Campaigns) within the folder.
Project requirements
The goal was to revamp Folders for the new UI; but with enhancements to folders along the way. Improve the general UX in order to make users more efficient, while maintaining the familiar workflows Marketo users are comfortable with. With something called channels in Marketo, we needed something that would focus on a bird's-eye view of the data (cost and leads) of the channels running in the Folder. So, working with the PM, I came up with a possible solution of adding an Overview Reports tab.
Design Process Overview
1. Research and Initial Sketching
Having just joined the team and been assigned this project, I had to do quick a lot of reading and research about the platform, folders, channels, and the current flows. The result - there wasn't a place in the normal marketing instance where this kind of data is being reported but a more advanced data reporting tool RCE. So, I wasn't sure if this rolled up data is what a user wants. But given a tight schedule of the release, I talked to the product manager and realized it was a knowledgeable call from his part as he's had conversations with the customers prior to this.
2. Low Fidelity Wireframing
Realizing that a data visualization for a rolled up view would be a good feature going forward, I started designing something that would reflect consistency in design across the new platform. After brainstorming and discussing designs in review meetings, I went in and created the low fidelity wireframes with quite some confidence
Details tab being a new tab too, more so to maintain consistency with the details tab of the other assets in the platform
The reports tab with a default programs view. The graph showing channels data at a folder level being the most unique feature
The campaigns tab though is more of a parity with data blocks being a new addition
3. User Testing
The PM loved the designs I presented, and we almost put it in for developing since the company was on a tight schedule. I however thought it would be better if I could get some users to see and make sense of these designs. So, I decided to conduct testing with some internal marketers who use this platform just as regularly as our customers - daily. The approach was to keep it organic, took some brilliant pointers from the research mentor; the goal was to see if the data that they see is making sense to them as soon as they lay their eyes on it, its an overview data after all, it needs to be comprehensible at first glance.
The result from these tests were a lot more informative than I had anticipated. The graph visualization that I came up with was definitely seen as a value added feature, but it wasn't as quick to understand and take in since there was kind of information overload on the screen. The cost graph increasing downward, the leads bars crammed together, with the summary at the right presenting data that is a little different from the data in the graph, plus there were problems with understanding what the filter menu for the graph did. So, all in all it was a good thing we didn't just go ahead and develop it.
4. Iterating
With the user testings opening up more than a couple of flaws in the design of the graph, we decided to pass the rest of the tabs in design for development, while I continued to iterate the reports design - and there were quite a few iterations before we felt comfortable moving forward.
5. Near Final Iterations
After the iterations, and consulting with senior designers, it was time to hand in the final designs. The details and reports tab both combined into one, summary, and graph in programs view put into one category. The graphs with a little more visual element to it, and the cost metric displayed as another bar and not just an overlay. Now, once these designs are developed and released to the first few customers, usability tests then will validate or bring up more flaws into my designs.
Project 2 - Community Support space
We received a help call from the admins of the Marketo's Community Support space to redesign their website, with a goal to subject users to a clutter-free experience and also help them find solutions and answers quicker than now. The website was built some time ago, with poor information architecture and a bulky UI.
Design Process Overview
1. Card Sorting Research
We decided to conduct a remote card sorting activity for users. The task required the users to segregate screenshots of the website into 6 categories base on how often they use those features of the website. We sent out invites to about 20 customers. The result of the participant users' card sorting look something like this:
2. Analyze and Lo-Fi Proposal
We had a pretty good idea of where we want to go with the redesign job. The results were pretty baffling to say the least, with most of the features of the website rarely ever used and searching being the main feature around which the website use revolves (as expected).
Talking to the stakeholders, we realized that the users mainly come to the space to post their questions or search for blogs to solve those questions. So we then decided to get away with most of the content, and hide the ones that are in-your-face but useless in bubbles, where it can be accessed if at all the users wants to. And make the website more search friendly, by also reorganizing the filters as compared to the previous chaotic layout.
Key Takeaways
Worry about the minutest of details, but also think what effects your designs will have later on. Always think of the big picture.
Branding goes beyond the logo, colors, or UI. It is instilled in the company culture, the cubicles/open desks, in the way of communication.
Anyone can design; understanding the actual problem and the context, and then analyzing it is what differentiates good UXers.