Introducing: Myself

Hey, I'll try to keep this part brief since I don't know how much time we have. My name is Geoff, and I'm addicted to digital interfaces. My Dad was a computer programmer and when I was 11 or 12 he gave me Microsoft FrontPage (feel free to cringe) for Christmas. I had a computer in my room because my Dad would get a new one every year and hand me down his old one. I built my first website using the controls in the software, but I quickly figured out that I much preferred flipping over to the source code and messing with that than trying to build a WYSIWYG site.

It didn't take long before I figured out that websites were really just a set of text files with different file extensions, so I abandonded FrontPage (sorry Dad) and just used Notepad to write HTML and CSS from scratch. That was cool and all, but once I understood the basics I wanted to make something real. So, naturally, I made a website devoted to my Ti-83 calculator. I loved that calculator. My Dad taught me how to program it, and I even went so far as to learn some simple assembler language instructions and create a pong game. It was my pride and joy, so I needed to show it to the world on the internet.

I remember devoting a lot of time to how the site would be organized, what content would be available, what the layout would be, and how it would look and feel. Believe it or not, that site is still online at jeff_maki.tripod.com . Please excuse all the pop-up ads... I had nothing to do with that. Long story short, I've been thinking about websites and digital applications from the inside out... their code, their design, their functionality, their architecture, and everything in between ever since I was a kid staying up all night in my bedroom trying to get a site look exactly how I wanted it.

I hope that gives you a good sense of who I am today, and I hope we get to talk a lot more about everything that I've learned since then. In the meantime you can check out a series of writings I've published on the Centerline Digital blog , but for right now let's move on to the meaty portfolio stuff.

Design Process

Identify Customer Frustration or Product Feature Gap

A new design project might come from a number of different avenues. Sometimes Product Managers and/or UX Researchers get recurring feedback on a piece of functionality or an interface quirk that is causing a lot of frustration. Depending on the maturity of the product, there may also be simple feature gaps. In these cases we're aiming for parity within the market while also trying to innovate on what everyone else has done.

Investigate User Needs and Behaviors

This is the most important part of the process, in my opinion. But user research must be done very carefully and with consideration of the entire context of the user's experience. It must also be done without any pre-conceived solutions for the problem being investigated. Unfortunately I've been handed product requirements based on 'customer feedback' before where the feedback was obtained using leading questions and manipulative tactics by a Product Manager who'd already imagined a solution to the problem. As designers, we have to be vigilant, deliberate and thorough when it comes to obtaining and acting upon user research.

Sketch Concepts

Once we're confident in the needs and behaviors being addressed, I like to go ahead and start sketching potential solutions. At least two or three, and usually on the whiteboard in my office. I like to start with the most 'obvious' solution first, then try to see the problem from different angles and try to solve it from those perspectives. I think it's okay to go a little 'out there' at this stage because I believe creativity is important in any form of problem-solving. Paring things down from there and arriving at one simple solution is the real craft of interaction design.

Present and Collaborate

I place a tremendous amount of value in the opinions of my teammates. Especially fellow designers, but quality feedback can just as easily come from engineering or product management. I like to share my concepts with my team and start getting a sense of the pros and cons of each approach. This helps me quickly rule out any bad ideas I might've had and focus on the good ones. Sometimes this means pulling good ideas from multiple concepts and creating something new. At the beginning of the meeting, of course, I'll lay out the key insights from user research that have informed my ideas.

Decide on a Concept and Iterate

When I'm iterating on a concept at this point I'm usually just getting feedback from my UX teammates. I like to include people outside our team early and late in the process, but when the real designing is happening I prefer to keep it in the family. It's very important that we maintain authority over the design patterns we produce and the solutions we create. We may not always get things perfectly right, but it's better for design to be consistent than completely confusing or unusable. I've been burned before by letting my kindness blind my authority as a designer and made concessions I shouldn't have made. We should always be considerate and respectful of everyone's ideas, but at the end of the day design is our job and our passion and our life, and it's very important to me that the user can feel that in the product.

Get Customer Feedback and Conduct Usability Testing

Ideally this is happening throughout the iteration process, but depending on available resources that may not always be possible. Regardless, it's extremely important to get customer feedback on a design before it moves into development. I like building relationships with customers by meeting up with them at conferences and contacting them for feedback on a regular basis. In addition to customer feedback, standard usability testing is also important. Depending on resources available, I've done usability testing in comfortably set up labs or just over the shoulder at a coffee shop. I've traveled the nation interviewing users but I've also made do by showing designs to people from temp agencies, Craigslist, or even friends and family members.

Finalize and Deliver

After a design has been thoroughly vetted by my UX team, the wider project team, customers, and usability tests, it's finally ready to move into development. I like to keep a close relationship with developers so they feel comfortable asking me questions or even offering suggestions when they run into edge-cases we may not have considered in the design process. Having been a developer myself in the past, sometimes I even checkout their code on run in to my local machine just to get a sneak peek at how things are going.

Work Samples

Zumba Fitness: ZIN DJ

At its core, the ZIN DJ app was an app for Zumba Fitness Instructors (ZINs) to help them design playlists for their classes. The added value came from being able to visualize playlists according to the BPM (Beats Per Minute) of each song. A simple idea, but powerful for a fitness class. The app allowed ZINs to design the pace and structure of their classes as they pick songs.

As a researcher for this project I suggested we attend a Zumba Instructor Conference to interview instructors and learn how they create playlists and design their classes first-hand. The client agreed to send three of us down to Orlando for their yearly conference. There were thousands of ZINs from all over the world. It was a user researcher's paradise. We interviewed dozens of instructors. Some informally, recording conversations on our phones. But for most of them we were able to have extended conversations based on research questions we'd prepared beforehand.

When we got home, our Creative Director and I spent several days sketching and designing the architeture, functionality, and layouts for each screen of the app. The app was essentially designed on a whiteboard, and the Creative Director translated our notes and sketches directly into high-fidelity mockups. As a small startup, we were able to move very quickly into development where I actually coded the app along with one of our senior developers.

You can see some of the functionality and design of the app in the video. Which, by the way, was played at the Zumba Instructor conference the following year. This was a huge suprise to us... we didn't even know the video had been made. But the client sent us footage of the video debut and watching the crowd go absolutely nuts over something we'd built was a pretty special moment.

National Instruments

This is the biggest project I've ever worked on in my career. National Instruments (NI) is a huge corporation with millions of customers. Initially, we were hired to help them streamline their hardware product taxonomy. My first mentor at Centerline and I took on the bulk of that work. Luckily, she had done a similar project in the past for their software platform, so she already had a lot of information about NI customers and had relationships with key stakeholders inside the company.

Ultimately we were able to reduce the number of products for sale on their website by more than 80%. The crux of this change was made possible when I noticed a pattern in the product specifications. After many wikipedia articles turned me into an amateur electrical engineering enthusiast (at best), I realized the hardware portfolio could be drastically reduced by grouping products by primary function. Those groups became the products and all the other variants became customizable options for that product.

The client was impressed with all of our taxonomy work to-date (check out the video to see the taxonomy in action on the new site) and rewarded us with a full redesign of their e-commerce website, serving ~1.2 million customers per month. I took the lead on developing a new information architecture while my teammates handled content auditing and developing a new content strategy. Before we began, of course, we needed much more user research applicable to the broader task of redesigning the entire site. We went to their annual conference that year and interviewed more than 50 customers to get started. Armed with insights from those interviews and many discussions with stakeholders, we went to work.

In order to clearly communicate what we learned about NI customers we decided to develop personas. NI already had about 45 different 'personas' they'd created for different reasons over the past 15 years, but after reviewing all of them it was clear that nobody had done the appropriate research for a website redesign. Long story short, we developed what we called the 'engineer mindset' which consisted of simple personality traits with accompanying descriptions. Based on that mindset, we defined two primary types of customers. No offense to the world of engineers but they really all seem consistent in the way they process information, so our customer types were simply divided by whether they were new to NI or had been a long-time customer. We named them Newton (NewtoNI), and Fonzie (nothing clever there, really). The client was so proud of the characters I created for their personas they have life-sized cut-outs of them in their office now as a reminder of who they're designing for as a web team.

After building a new information architecture and developing a new content strategy, we moved into the wireframing stage. Wireframing was my responsibility... for the entire site. It took several weeks and multiple iterations, but I was ultimately happy with how well we were able to collaborate within our team and with the client. I've embedded PDF's of the architecture and wireframes I created below:

PureCloud: Intraday Monitoring

This was my first project as a product designer for PureCloud . The interface needed to communicate a lot of interactive data for call center supervisors to be able to monitor the actual performance of their workforce throughout the day compared to their forecasted performance.

Following along with the design process outlined at the top of this document, there were a few different ways I thought about solving this problem, and a few iterations of the final concept resulted in a very well-received new feature in the product. Flip through some of those concepts by clicking the image to the left.

In order for this feature to acheive the success it did, I had to understand how PureCloud supervisors typically do their jobs and how they think about the data they surf on a daily basis. I relied on my teammates for any and all research they had collected from customers, either by phone or by on-site visit. We even had some basic personas already built to help me get acquainted with my new users. Ultimately it was a trip to one of our larger customers in Arizona that gave me the most valuable insight into the mindset and day-to-day activities of a call center supervisor.

One of the more senior product designers at PureCloud mentored me all throughout this first project, and his feedback was invaluable. He taught me a lot about how to effectively reduce complexity in design. He also helped me form a habit of really thinking critically about small details, and ensuring everything in the design has a specific, necessary purpose. Ultimately I learned how to apply those insights and deliver just the right functionality for our supervisors with this feature.

PureCloud: Tab Navigation

This project represents the biggest impact my design work has had on PureCloud so far. PureCloud was originally designed like a very typical website. Its main navigation, global search, profile picture and a couple other things were lined up in a top bar. Additional functions were listed vertically in a bar on the left side of the screen. One of the challenges that call center supervisors faced was the inefficiency of having to navigate from one reporting screen to another through a traditional menu, and having their filters and other settings reset on each new page load.

Product Management came up with the idea of 'saved filters,' which would allow people to save a screen with all their filters and settings. Using our existing design patterns this meant we could add a 'save' button to each reporting page that would allow you to save your screen and acccess previously saved screens. The problem I had with this was the lack of customer input on the design and the narrow lens through which product management saw this feature.

After expressing my concerns to my director, he challenged me to talk to some customers and come up with a better solution. He would handle pushing a better design through product management. After doing my own research, I found that it wasn't just the ability to save filters that supervisors needed. They needed a way to quickly flip between customized reporting views. Not only that, but every call center has different needs and may focus on different metrics. Ultimately I decided our users needed a customizable workspace within the app. One that would allow them to save custom reporting views, organize them according to their preferred workflow, and quickly flip between them. A simple solution materialized: tabs. Check out my InVision prototype to see a high-res click-through of this idea.

This approach effectively removes the primary navigation for reporting and allows supervisors to set up their workspace with the views that are most important to them. Ultimately it's now our goal to promote this idea to the entire PureCloud experience, effectiely removing the old-school navigation setup in favor of a more software-like approach. In the same spirit, I took this same opportunity to solve another problem supervisors were running into.

Before I was hired, a product manager heard some customer feedback about needing to see summary information for certain sets of objects in the system. His solution was to provide a 'summary row' on applicable reporting screens that would be populated according to the filters you set on the screen. So if my filters result in X number of objects, I'll see the summarized total data for all of those object at the top of the screen. This was a decent approach, as it solved the immediate need, but it wasn't very flexible. Filters now held two responsibilities, which resulted in many people just having a slew of filters set all the time so they could see summary information. But if they wanted any other lens on the data they'd have to remove some filters, change them, then put them back.

Along with my tab interface work, I came up with the idea of allowing supervisors to simply group rows in data tables. Select a number of rows you want to group (every customer seems to have different reasons for grouping things), give them a name and presto! You have the summary data for that set of objects as a single row in your table and you can expand the row to see the data for each individual object. This approach is very simple, but powerful in that it removes the need for a summary row at the top of the screen and doesn't interfere with filtering. Vertical real estate is very important for our supervisors because they want to see as much data on the screen as possible.

PureCloud: Real-Time Dashboards

This project has been the only one so far with PureCloud where I had full reign over the entire design process, including visual design. The feature essentially allows call center managers to set up data dashboards to display on publicly visible monitors within their work space. This gives agents the ability to quickly glance at some high-level metrics (the same ones supervisors are digging into throughout the day) and get sense of how things are going. That way they can make better informed decisions about when it's an okay time to go on break or take a lunch, among other reasons.

This idea isn't new to call centers, but we wanted to create an innovative interface that would not only look and feel more professional than our competitors, but give users a sense of control over their dashboards in a simple and efficient way. Many of our competitors require instructing their users on how to set up their dashboards due to the complexity of the controls and overwhelming set of configuration options.

The trickiest part of this interface was deciding on how people would edit their dashboards. After some brainstorming sessions with my team, I decided I wanted people to be able to essentially 'design' their dashboards in real-time. So while you're making edits you're actually seeing live data start to populate and get a sense of what your final layout is actually going to look like. You can see a few iterations leading to this idea by clicking the screenshot on the left. This project has been in the works for about a year and after many conversations with customers, collaboration with my UX team, Developers, and Product Managers I'm very happy with the result. Check out my InVision prototype to see a high-res click-through of the final mockups.

I feel very confident our customers will be thrilled with this feature... and then ask for even more functionality of course! It will be an ongoing process of feedback and refinement, just like all of our other major features, but I couldn't be happier with what our team has already been able to accomplish.

Fun Stuff

Visual Design Exercise

The awful wireframe you see to the left is part of a design exercise that we give potentential visual design hires at PureCloud. With little to no context, we're interested to see how people interpret such a terrible wireframe and bring it to life with a much more user-friendly structure. Of course, at the same time we're very interested in the beauty, thoroughness, and masterful execution of the design.

I've been a programmer, a user experience researcher and designer, and a product designer -- but I've never been particularly great at visual design. It's something I've always wanted to be decent at, so during some down time last year I took an online class in graphic design and decided to try my hand at this design exercise. Click the wireframe to see how I did.

The Future of PureCloud

During periods of downtime our director challenges us to do exploratory design. In this case, I wanted to see what the future of PureCloud might look like if we promoted the tabs idea (from above) to the entire app. I also took the liberty of re-skinning the app with a dark theme, primarily because supervisors and agents are staring at it all day long and a dark theme is easier on the eyes. I came up with two concepts. One (seen on the left) completely removes the primary navigation bar in favor of tabs. This allows you to create a tab for anything that existed in the primary navigation before while preserving the familiar actions in the left bar.

If you click on the screenshot you can flip to a second concept where I reduced the design further by removing the left bar and creating a radial menu acccessed by hovering over your profile image. This concept would be a huge win for all of our reporting screens because they would then have essentially the entire screen to display more data than before.

That's it! You made it to the end of my portfolio. I hope you enjoyed the ride. There's so much more to talk about, but hopefully this gives you some decent insight into my mind and methods. If you want to connect with me, feel free to hit me up on LinkedIn or Twitter. And yes, I designed this site and built it all by myself in a text editor. Just like when I was a kid!