# Intradiem UX design manager · ’14 – ’17 [Visit Intradiem](https://www.intradiem.com) Intradiem was my first real design job, and it was honestly the only reason I got into product design in the first place. They hired me to join their marketing department, making collateral for tradeshows, ebooks, social media assets, all of that. They'd just rebranded right when I came on board, so it was my job to basically figure out what the brand meant and how to use it. ## Building the website in Webflow ![Sub-brand marks built from the Intradiem mark's triangle grid, half filled in its greens, oranges and yellows](https://www.tomjohn.design/videos/intradiem/1995752-derivative-logos.mp4) ![The Why Agents Leave & How To Stop It ebook, its yellow cover showing a man climbing out of a building, on a desk with old leather and glasses](https://www.tomjohn.design/images/content/intradiem/1884459-ebook-hero-panel-1.jpg) ![A row of Intradiem email templates standing in front of illustrated green mountains](https://www.tomjohn.design/images/content/intradiem/1786368-email-templates-1.jpg) Part of that rebrand, though, was redoing the website. It was maybe the first month or two on the job, and we had a call with an agency who was bidding on the website for us. I think the estimate came back at $40–60k or something. It was a lot. My boss at the time wasn't thrilled with the quote. We got off the call, and young, naive, never-built-a-website-before me piped up and said "I can build it." You see, Webflow had just launched. I'd tried it. It was magic. So I planted my new reputation in the soil and said that I would build it. And I did. And it was good. And I learned a ton. Webflow still to this day has a special place in my heart for that opportunity and chance to build something. I even got a bonus for the site, something I'd never had before, and used it to put a down payment on a house. Crazy, crazy times. ![Eight line-drawn perk icons for a careers page: a camper van, a leg lamp, coffee and a donut, a wheelbarrow, a piggy bank, an office building, a book with a graduation cap, and an umbrella in the rain](https://www.tomjohn.design/images/content/intradiem/1802488-employment-perk-icons.jpg) ![Six made-up client logos in white on green, for healthcare, telecom, retail, insurance, finance and technology](https://www.tomjohn.design/images/content/intradiem/1806892-top-company-logos.png) ## An iPad app for Sprint But that web work, and the success of the launch, didn't stop there. After I designed the site, Sprint came knocking and was looking for a new iPad app for their retail stores to help manage their workforce. The product team came knocking to me and said "you can do a website... so can you design an app?" Yes. Yes I could. (No, I absolutely could not.) Designed the whole thing in Illustrator. Crazy times. Terrible design. But it worked, and it launched, and Sprint somehow loved it. ![Screens from the iPad app: task details, pie charts of progress, and lists of tasks due, in pink, teal and yellow](https://www.tomjohn.design/images/content/intradiem/2159680-ipad-app-progress.jpg) ![A wireframe of the iPad app's second version, with a task list down the right and controls along the bottom](https://www.tomjohn.design/videos/intradiem/2278950-ipad-layout-v2-0.mp4) ![Version 18 of the retail iPad app: a task's details with a list of tasks down the right](https://www.tomjohn.design/videos/intradiem/2622119-retail-app-v18.mp4) ## Becoming a UX designer After that, I lobbied for "more education in UX", got them to pay for my General Assembly courses, and pretty soon I was a Graphic Designer no more. I was a UX Design Manager. Then came more apps, and better ones. A totally new desktop experience for contact centers. Another mobile app, this time for mobile workforce management. I learned so much. And I will say, looking back, that the interaction work and ideas I had were kinda great for such little experience. ![A zoomed-out board of the new desktop console's screens: logins, lists, settings, and a green progress screen](https://www.tomjohn.design/images/content/intradiem/2481189-new-desktop-console.png) ![A web app's My Schedule panel and a March calendar with the day's work segments](https://www.tomjohn.design/images/content/intradiem/3427465-web-app-1.png) ![The Otto app on an iPhone, an Android phone and an Apple Watch, with Otto beside them](https://www.tomjohn.design/images/content/intradiem/2664742-otto.jpg) ![The Otto app on an iPhone: a week's schedule of work blocks and a break being changed](https://www.tomjohn.design/videos/intradiem/2813315-otto-change-schedule.mp4) ![The split and move interaction rebuilt in Webflow on a phone: dragging hours from one day to another](https://www.tomjohn.design/videos/intradiem/3709127-split-shift-made-in-webflow.mp4) Were they easy to build? No. Feasible and elegant from an engineering perspective? Not a chance. Those lessons would come later. But I was a UX designer. And now I still am. ## Work and media - [The split and move interaction rebuilt in Webflow on a phone: dragging hours from one day to another](https://www.tomjohn.design/videos/intradiem/3709127-split-shift-made-in-webflow.mp4): Split Shift - Made in Webflow I'm still in search of a single way of doing all of these prototypes I have to create. People say Framer can, but I just cannot learn how to use it for the life of me. The previous shot was made in Principle, and did a great job for user testing and screen captures, but it was impossible to share with windows-based developers, many of whom are overseas and can't just look over my shoulder or at the demo on my phone. I needed something that was interactive in order show some of the underlying logic of this interaction, so I turned to ol' trusty Webflow and whipped this up in around half a day. It's bug ridden, not 100% accurate, but it's code based and most important, not a mp4 or a gif. Gotta love that. It also works on mobile (well not 100% correct on iOS, but flexbox is buggy on Safari. What can ya do) so feel free to mess around with it yourself and let me know what you think! http://splitshift.webflow.io/ - [Splitting a shift on an iPhone: the day's work block, then its start and end times being edited](https://www.tomjohn.design/videos/intradiem/3537369-split-shift-v5-1.mp4): Split Shift v5 - [An earlier version of splitting a shift, editing the work block's start and end times](https://www.tomjohn.design/videos/intradiem/3537369-split-shift-v5-2.mp4) - [An earlier version, picking pieces of a shift to split and move](https://www.tomjohn.design/videos/intradiem/3537369-split-shift-v5-3.mp4) - [An earlier version, a break dragged into a work block](https://www.tomjohn.design/videos/intradiem/3537369-split-shift-v5-4.mp4) - [A web app's My Schedule panel and a March calendar with the day's work segments](https://www.tomjohn.design/images/content/intradiem/3427465-web-app-1.png): Web App - [A web app's notes on a prompt's maximum and minimum height, with two task dialogs](https://www.tomjohn.design/images/content/intradiem/3427465-web-app-2.png) - [A web app's done tasks, the archive and the tasks and assignments list](https://www.tomjohn.design/images/content/intradiem/3427465-web-app-3.png) - [A web app's tasks and assignments, from my list to a task's details](https://www.tomjohn.design/images/content/intradiem/3427465-web-app-4.png) - [A web app's schedule, current and future, with the day's work segments](https://www.tomjohn.design/images/content/intradiem/3427465-web-app-5.png) - [A web app's task with an attachment, in two states](https://www.tomjohn.design/images/content/intradiem/3427465-web-app-6.png) - [Splitting and moving a shift on an iPhone: a dial picking the time, the original shift and the selection, and a Split Shift button](https://www.tomjohn.design/images/content/intradiem/3386772-split-and-move-shift.png): Split And Move Shift Working on a flow to allow people to move part of their work to a different day while restricting the selection so that their request would have a higher chance of being approved. Will be testing next week. - [The bell pulsing when the last notification is cleared](https://www.tomjohn.design/videos/intradiem/3115536-notifications-cleared.mp4): Notifications Cleared Didn't like the way that the last interaction looked, so I made the pulses look more pulse-y. When a user clears the last notification in the app, this interaction will show. Might add a sound, but probably not. I'll upload the version I made for iOS later. Made in principle. - [A notification bell ringing on pale green, the empty state for messages](https://www.tomjohn.design/videos/intradiem/3110231-notification-empty-state.mp4): Notification Empty State Whipped up a little illustration and interaction for the empty state of this part of the app. - [A component library in progress for an Angular Material product: rows, tabs, buttons and cards](https://www.tomjohn.design/images/content/intradiem/3021875-design-system-wip.jpg): Design System - WIP Building out a component based design library for one of our products that uses the angular material library. Tedious stuff, but should be worth the effort. - [The Shift app on an Android phone and an iPhone side by side, showing a day's shifts](https://www.tomjohn.design/videos/intradiem/2989312-shift-ios-and-android.mp4): Shift - iOS and Android - [The Shift app's launch animation: a lightning bolt and the word Shift on a green circle](https://www.tomjohn.design/videos/intradiem/2967413-shift-launch-animation.mp4): Shift - launch animation Launch animation? Well see if this one makes it to production. I think it's friggin sweet, but then again, I'm only now learning how to do these types of animations. - [A ring of green dots spinning as a loader inside a green circle](https://www.tomjohn.design/videos/intradiem/2962253-loading-dots.mp4): Loading Dots Made this for fun in principle yesterday. I think it's pretty cool. - [The Shift app on an iPhone, a work shift being dragged on the day's timeline](https://www.tomjohn.design/videos/intradiem/2948805-shift-app-v100000000000-final-4-2-revise.mp4): Shift App v100000000000_final_4.2_revised_test3 I can't even how many revisions I've done for this. CAN'T. EVEN. All kidding aside, high fidelity prototypes before development are so awesome. User testing is better, revisions are better, requirement refinement is better. Life is better. - [The Intradiem mark redrawn as a sticker in concentric orange, yellow and green lines](https://www.tomjohn.design/images/content/intradiem/2865129-intradiem-stickermule-giveaway.png): Intradiem - Stickermule Giveaway This is my rebound of the sticker mule giveaway. - [The Otto app on an iPhone: a week's schedule of work blocks and a break being changed](https://www.tomjohn.design/videos/intradiem/2813315-otto-change-schedule.mp4): Otto Change Schedule This project is starting to grow on me. This interaction prototype demonstrates modifying a schedule, indicating to the user when a modification can't be made, a dual week and month calendar view, accepting additional tim on their calendar, and some other schtuff. I'd love to hear your thoughts. - [Otto's onboarding on an iPhone, ending on Otto beside a broken-down car: or when life happens](https://www.tomjohn.design/videos/intradiem/2781817-otto-onboarding-1.mp4): Otto Onboarding - [An onboarding illustration of Otto asleep in bed](https://www.tomjohn.design/images/content/intradiem/2781817-otto-onboarding-2.png) - [An onboarding illustration of Otto by a broken-down car, steam rising from it](https://www.tomjohn.design/images/content/intradiem/2781817-otto-onboarding-3.png) - [An onboarding illustration of Otto in sunglasses under a beach umbrella](https://www.tomjohn.design/images/content/intradiem/2781817-otto-onboarding-4.png) - [A list of regions, each with its readiness, expanding and collapsing](https://www.tomjohn.design/videos/intradiem/2694854-list-interaction.mp4): List Interaction This is a more detailed view of how this list view will behave. As always, I'm amazed that I can do this kinda stuff with principle. I would never be able to have this prototype-able in 1 day worth of effort and be able to get great user feedback. - [A list of tasks due today and tomorrow, opening deeper into the hierarchy](https://www.tomjohn.design/videos/intradiem/2692793-list-expand.mp4): List Expand Trying to make a view that allows someone to go 8+ levels deep into a hierarchy, while still being able to understand where they are in the structure, and being able to quickly navigate back up to the top view, all while not displaying truncated views of the data and also making sure all of the code will be reusable for users who have different permission profiles (each with different visibility) and completely different hierarchy models and groups is no easy task. I'm close, but now I've just got to test it. Made in Principle and Sketch. - [The Otto app on an iPhone, an Android phone and an Apple Watch, with Otto beside them](https://www.tomjohn.design/images/content/intradiem/2664742-otto.jpg): Otto I couldn't help but mess around with the Angle mockups as soon as I purchased them. Putting all versions of the Otto app side by side really helps to enforce cross-platform uniformity. I've already made a few changes that I wouldn't have otherwise seen without messing around a bit. Get them for yourself: https://designcode.io/angle - [Spec documentation for task list rows, chips and buttons, with spacing marked in blue and pink](https://www.tomjohn.design/images/content/intradiem/2638769-documentation.png): Documentation Nothing like some good ol' documentation to get you through the day. - [Version 18 of the retail iPad app: a task's details with a list of tasks down the right](https://www.tomjohn.design/videos/intradiem/2622119-retail-app-v18.mp4): Retail App V18 A lot can change in a year. I started working on this app a little over a year ago with no iOS or native design experience. I knew I didn't know much, but I was sorely underestimating the amount of time and effort it takes to make an application of this nature. All I can say is thank God for Sketch and flinto. 2 years ago when I was hired as a Graphic Designer, I was asked where I wanted to be in 5 years. I said that I wanted to be able to look back on the work that I was was doing currently and hate it as much as the work I'd done in my first year of design school. It only took 2 for that to happen. I hate v1 of this app so much, I hate how little I knew and how much I assumed, but I know that the versions I'm working on now gain so much from having started so low. Here's to hoping that I hate v18 as much next year as I do v1 now. Progress. - [A pixel-aligned icon set for tasks: people, clipboards and tags, each with a check, an alert, a calendar, a clock and more](https://www.tomjohn.design/images/content/intradiem/2579227-task-icons.png): Task Icons I love the smell of a good pixel-aligned icon set in the morning. - [Unused Otto stickers: the robot with chat bubbles, and the Otto wordmark in green and in orange and yellow](https://www.tomjohn.design/images/content/intradiem/2575796-otto-stickers-scrapped.jpg): Otto Stickers - Scrapped Originally, Otto was going to be a chat-based interface. That idea was scrapped because we determined that it wasn't the right solution. I made these back then, and I liked the way they turned out, but unfortunately they probably won't ever see the light of day. Poor Otto. Gone but not forgotten. - [Variations on accepting or declining a new available shift, as green cards with buttons and switches](https://www.tomjohn.design/images/content/intradiem/2538276-accept-decline-session-wip-1.png): Accept / Decline Session --- WIP - [A day's schedule with a new shift offered in green, in three variations](https://www.tomjohn.design/images/content/intradiem/2538276-accept-decline-session-wip-2.png) - [More variations of the accept and decline cards for a new shift](https://www.tomjohn.design/images/content/intradiem/2538276-accept-decline-session-wip-3.png) - [A sticker of Otto the calendar robot on yellow](https://www.tomjohn.design/images/content/intradiem/2491700-otto-sticker.jpg): Otto Sticker Saw that stickermule is giving away some stickers, so I couldn't resist. Follow the rebound link to get your own and stay tuned for more shots about Otto. - [A zoomed-out board of the new desktop console's screens: logins, lists, settings, and a green progress screen](https://www.tomjohn.design/images/content/intradiem/2481189-new-desktop-console.png): New Desktop Console Super-zoomed out portion of one of the projects I've been working on for the past few months. Very excited for this to be in the real world at the end of the quarter. I'll share more when it's ready. - [Small task-type icons in green, yellow, pink and blue, in in-progress and completed states](https://www.tomjohn.design/images/content/intradiem/2481160-task-icons.png): Task Icons These are some simple icons to denote task type. The middle ones are in-progress, and completed states are on the left. I got rid of the drop-shadows that were on previous versions, as this sizes wasn't lending to it very well. - [Otto, a calendar robot, drawn six times with different expressions](https://www.tomjohn.design/images/content/intradiem/2446387-otto.png): Otto Meet Otto. He's a pretty chill calendar robot who wears his emotions on his sleeve. I hope that you'll be seeing more of him in the future. - [A wireframe of the iPad app's second version, with a task list down the right and controls along the bottom](https://www.tomjohn.design/videos/intradiem/2278950-ipad-layout-v2-0.mp4): iPad Layout v2.0 We're working on a new version of our retail productivity app, so I did this layout in atomic to show the differences between v1 and v2. Because animation, and atomic is just awesome. Less static containers, a better utilization of the card list's space, uniform control along the bottom of each task, tabbed list, revamped filters... it's more scalable. Now to see if the dev effort is able to be scoped. - [Three book icons in yellow, pink and blue](https://www.tomjohn.design/images/content/intradiem/2237287-books.png): Books Working on a book icon. Can't decide which one I like best. Which one you do you like best? - [Three blue message icons: an envelope with a red badge, a letter coming out of an envelope, and a card](https://www.tomjohn.design/images/content/intradiem/2235106-message-icon-meanings.png): Message Icon Meanings A quick litmus test for these: What do they mean? I'm getting conflicting answers here, so it's to the masses. I know conflicting answers means I'll have to rework it, but I still want to hear your thoughts. - [Prompt a Revolution in thin letters over a green-tinted painting of soldiers crossing a river](https://www.tomjohn.design/images/content/intradiem/2192477-prompt-a-revolution-1.jpg): Prompt A Revolution - [Another crop of the Prompt a Revolution artwork](https://www.tomjohn.design/images/content/intradiem/2192477-prompt-a-revolution-2.jpg) - [Choosing an assignment's date range on a calendar, with progress steps down the left and a Next button](https://www.tomjohn.design/images/content/intradiem/2163632-calendar-assignment-creation.png): Calendar - Assignment Creation This is a shot from the assignment creation protion of our iPad app. There's a progress indicator on the right and the icons on the calendar are draggable. I'll post some more shots with context when I have them. - [Screens from the iPad app: task details, pie charts of progress, and lists of tasks due, in pink, teal and yellow](https://www.tomjohn.design/images/content/intradiem/2159680-ipad-app-progress.jpg): iPad App Progress I figured I'd share another mockup of the ipad app that I've been working on over the last year. It's come a long way. - [An iPad showing a task list with a pink header, switching between light and dark versions](https://www.tomjohn.design/videos/intradiem/2055028-light-or-dark.mp4): Light or Dark Which do you prefer? - [An illustration of an orange and white traffic cone](https://www.tomjohn.design/images/content/intradiem/2053773-traffic-cone.png): Traffic Cone Just a traffic cone. - [An illustration of a green suitcase stacked on a yellow one](https://www.tomjohn.design/images/content/intradiem/2053499-luggage.png): Luggage Some luggage from our "customer journey' guide that i'm illustrating. - [An illustrated green station wagon with luggage on its roof, driving past green mountains under an orange sky](https://www.tomjohn.design/images/content/intradiem/2046888-roadtrip.png): Roadtrip A little something for the cover of an ebook. - [Two rows of round progress icons for expected duration, one with an hourglass and one with a clock, filling with orange](https://www.tomjohn.design/images/content/intradiem/2041625-which-one-to-use-for-expected-duration.png): Which one to use for Expected Duration? Hourglass or clock to show expected duration? I need some opinions. - [Sub-brand marks built from the Intradiem mark's triangle grid, half filled in its greens, oranges and yellows](https://www.tomjohn.design/videos/intradiem/1995752-derivative-logos.mp4): Derivative Logos I was tasked to create a series of sub-brand marks for different parts of my organization. One is for our blog, one for our social community of clients, and the others were for awards and internally facing projects. After some trial and error I derived a triangle grid system based off of our primary brand mark. I also looked at the logo and found that if you divided it into those 32 individual triangles, it was both perfectly symmetrical and took up exactly half of the grid's space. Using that as my template, if made 5 logos, each of which are symmetrical and also are only make up half of the grid. Also they all use a color scheme that is mostly made up of high and lowlight versions of our primary palate so that when compared with the original they didn't have the contrast. ... Only two got used, but hey, it was good practice right? - [Three Beer Can Appreciation Day posters, each with a can wearing the Intradiem mark, on a wooden wall](https://www.tomjohn.design/images/content/intradiem/1933908-beer-can-appreciation-day.jpg): Beer Can Appreciation Day A few posters for around the office. - [The Why Agents Leave & How To Stop It ebook, its yellow cover showing a man climbing out of a building, on a desk with old leather and glasses](https://www.tomjohn.design/images/content/intradiem/1884459-ebook-hero-panel-1.jpg): Ebook Hero Panel - [The Why Agents Leave ebook among boots, a belt, a pipe and glasses on a wooden desk](https://www.tomjohn.design/images/content/intradiem/1884459-ebook-hero-panel-2.jpg) - [The Why Agents Leave ebook open to its pages of tables on a wooden desk](https://www.tomjohn.design/images/content/intradiem/1884459-ebook-hero-panel-3.jpg) - [The cover of the Why Agents Leave & How To Stop It ebook](https://www.tomjohn.design/images/content/intradiem/1884459-ebook-hero-panel-4.jpg) - [A line portrait of a bearded man in a beret wearing the Intradiem mark, over the words Prompt a Revolution](https://www.tomjohn.design/images/content/intradiem/1851006-prompt-a-revolution.jpg): Prompt A Revolution This is Mike, he has a big beard. - [Six made-up client logos in white on green, for healthcare, telecom, retail, insurance, finance and technology](https://www.tomjohn.design/images/content/intradiem/1806892-top-company-logos.png): Top Company Logos Finished the fake logos for our shyer clients that won't let us use their actual names on our website. Top 10 Healthcare Top 5 Telecom Top 5 Retail Top 5 Insurance Top 10 Financial Top 5 Technology - [A made-up healthcare logo: a white staff and serpent over a striped circle, on rust red](https://www.tomjohn.design/images/content/intradiem/1805596-healthcare-logo.jpg): Healthcare Logo Making some fake logos to represent companies that we don't have the rights to name on our website. This is the "Top 5 Healthcare" company logo that I came up with. - [Eight line-drawn perk icons for a careers page: a camper van, a leg lamp, coffee and a donut, a wheelbarrow, a piggy bank, an office building, a book with a graduation cap, and an umbrella in the rain](https://www.tomjohn.design/images/content/intradiem/1802488-employment-perk-icons.jpg): Employment Perk Icons Made some icons for the redesign of our careers page. - [A row of Intradiem email templates standing in front of illustrated green mountains](https://www.tomjohn.design/images/content/intradiem/1786368-email-templates-1.jpg): Email Templates - [Full-length email templates in green, orange and yellow, side by side](https://www.tomjohn.design/images/content/intradiem/1786368-email-templates-2.jpg) - [A Movember poster: a huge mustache under a man's face, ringed by portraits of famous mustaches, on yellow](https://www.tomjohn.design/images/content/intradiem/1774789-movember-1.jpg): Movember - [The same Movember poster on green](https://www.tomjohn.design/images/content/intradiem/1774789-movember-2.jpg)