Empowering Students to Shape Their Academic Careers
The Santa Fe Academic Plan was my first task as the new UX Lead at Santa Fe College. It provided me with a unique challenge as this was a completely new application inside of existing ecosystem that would need to rely on the current user flow and some utilities. At the same time while working on the research phases of this project I started to define the beginning of the SF ITS design system. As we moved out of the definition phases I started to validate patterns and components with front-end engineering and designing the screens for the prototypes based on the user flows. The day finally arrived when we began recruiting students across the campus to come in a sit down to help us improve eSantafe/Academic process. A usability lab was setup across the hall from my office, with 4 cameras and using OBS to aggregate the cameras and record user screen interactions. The resulting report can be found in the artifacts of this project. Feedback from our usability sessions was analyzed then worked into our next round of iterations. The academic plan launched at the end of 2019.
Artifacts
Prototypes
Bend the Ear of a Chat Bot and Advisors
The chat bot started out as an idea while I was putting together the sketches for the Academic Plan. The business use case was that the student needed a way to contact an academic advisor at any point of their planning process, if they had any questions. The charm of the chat bot, was the fact that it was able to respond to predetermined lines of questioning. This helps act as a gate keeper to the Advisors that frees up their time. Did the chat bot not answer your question? There is a small group of Advisors available to live chat with you. It was developed as a stand-along component that could be used across various services and would pull its basic knowledge base from a MySQL database.
Prototypes
Providing the Tools and Information Students and Staff Need
The Santa Fe Academic Plan was my first task as the new UX Lead at Santa Fe College. It provided me with a unique challenge as this was a completly new application inside of existing ecosystem that would need to rely on the current user flow and some utilities. At the same time while working on the research phases of this project I started to define the beginning of the SF ITS design system. With 3 levels of global (layout), ecosystem (patterns), and local (component) I set out to redefine the current student and staff portal offerings. It took a fair amount of conversation and meetings with the Director of ITS and the developers to understand the older and current systems and what we could expand upon. The 3 level approach welcomed the rest of ITS to focus on the component or lego brick and make sure that it's the best it can be and is reusable. Then we could begin to build the patterns with the lego bricks. It was an on going project while all of my public facing projects were underway.
Artifacts
Prototypes
Bringing the Book Buying Process Into the 22nd Century
The Textbook Affordability Attestation Form is used for instructors to outline their textbooks for purchase through the college bookstore. Previously the process was handled with a shared Adobe Pro PDF that the instructor/assistant filled out. This presented a hassle for the teachers and keeping up with the influx of printed forms was presenting an issue for the bookstore as well. I was tasked by the Director of IT and the bookstore to help bring the process into the 21st century by digitizing the process. The research I conducted shined a light on major disconnects between the academic assistants and instructors as to who is responsible for the process even though the instructor needed to sign off on the form. My findings allowed me to identify holes in the current process flow while I begin sketching out some rough ideas. I then presented my findings to the Director of IT and the bookstore and presented my proposed idea of making the process similar to an eCommerce solution with a search engine that would populate results from the Barnes and Noble API.
The research I conducted shined a light on major disconnects between the academic assistants and instructors as to who is responsible for the process even though the instructor needed to sign off on the form.
After much discussion during the definition phase of the design process, I started to grab the ITS design system components and design the screens in Invision Studio. I would present my progress at the end of the week in review meetings and give progress updates. Once I received design sign-off, I was able to contact several academic assistants and instructors that I spoke with during our research phase and invited them to participate in usability sessions. One of the things that worked in my favor is that they were super excited to see this type of change in the process.
Artifacts
Prototypes
Creating a Consistent Tone Across SF Services
Had to establish a kanban practice and outline the structure of design feedback meetings. The school was just coming into an agile process after doing waterfall for a number of years. The introduction of Jira and Git repos were a banner day for the UX and UI teams. I wrote the design guidelines in a print format as these were standardized in my practice and would change very little over time and they were established before migrating everything over to Invision DSM. The components found in the ITS Design System where designed in Invision Studio to meet a user need then synced up with the Invision Design System Manager that would allow the front-end team to pull down the code they needed in Angular.
Artifacts
Measuring Your ROI and Success with Cofense
I was approached by the Content, Marketing and Customer Retention Directors to come up with a solution to help show existing customers the value and their ROI while they are using the Cofense products. I sat down with Customer Retention team and had a frank discussion about why our customers left Cofense and what we were doing in order to retain their business. As I do during discovery, there were tons of notes and lots of sketching various random components.
Cofense saw a 12% increase in customer retention thanks to the Measuring Success Report.
I was given a week with the first MVP. We had previously proven a method with localization using XML files in illustrator for the infographics, I created the targets within my illustrator working file and trained the sales and retention team on how to read an edit the XML so it could be handed off to me to generate the PDF. This eventually presented a problem as I would have needed a team of people constantly generating reports due to the popularity of this deliverable. I took a moment a took to the data implementation back to the drawing board. What resulted was an internal data entry tool that would generate an email to send off to the customer, with a CTA to a unique secure URL landing page. This put all of the data and entry power back into the hands of customer facing teams. Cofense saw a 12% increase in customer retention thanks to the Measuring Success Report.
Finding an Easier Way to Gather the Masses
Prior to the launch of the Cofense Recipient Generator, customers had to create a request to their IT department to be able to acquire data to be converted into a recipients list. This of course can be tedious and time consuming. Now with ability to retrieve information from their Global Address List (GAL), Active Directories (AD) or Azure Active Directories (AAD), customers can now set the parameters of the retrieved data then generate a CSV file that can be imported into Simulator. My process began with meetings with the Simulator and Customer Relations teams to better understand the previous process and pain points that the customers were having. I went out across the web and researched various GALs and ADs armed with the technical specifications in hand. The design prototype went through 2 iterations before a MVP was launched to the Cofense customer base in 2017. I didn't want to over complicate the experience with a lot of choices as we were limited on resources and this was Cofenses first foray into Desktop application utilities.
Earn Points by Being an Active Reporter
Cofense Games became a new Content product around 2015. This meant getting to wear my UX and creative design hats as I was tasked with created game boards and assets. In the case of the Reporter game, I was the UX designer and the HTML5 Canvas developer. The environment itself was built utilizing HTML5 Canvas through Adobe Flash (Now Animate) and I added a feature that would allow customers to craft a customized email through XML/JSON. There were some preliminary samples created in Photoshop as I chose an email client environment in an effort to immerse the player as much as humanly possible. Working in 2 week sprints, I had to showcases my progression with the game.
I chose an email client environment in an effort to immerse the player as much as humanly possible.
The player works their way through unread emails in their inbox. They can interact with each email either identifying it as a phish, spam, or delete the email entirely. At the end of the game the player is presented with the results and provided an opportunity to print them out. As I've mentioned some of Cofenses customers would turn reporting a Phish into a game with leaderboards in their office. In this instance I actually reflected that practice in a game.
Artifacts
Monitor Your Phishing Campaigns from Anywhere
One of the first things I was tasked with doing upon being hired at PhishMe/Cofense was to conduct a heuristic evaluation of their flagship product Simulator. My first take away was that the design decisions had been definitely influenced by developers, as Simulator did the thing it was intended to do, but there were gaps in the scenario creation and reporting processes. The easiest approach to this superficial redesign was to assess the screens and content that Simulator already had in place, talk to the customer base and expand out from there. While I was able to assign a UX designer to the desktop version of Simulator, my focus was geared toward the new mobile application.
Implementing the Simulator mobile app gained Cofense a leg up on their competitors, as no one in the space was focused on mobile at the time.
The other UX designer and I shared prototypes through Invision and things really started to take off as I spear headed the efforts to launch the KOI design system. The design system slowly began to take over all of the Cofense products and prototypes as a better alternative to the Engineers loved to build everything in Bootstrap. The KOI design system, was built with Vue.js and I switch my focus from mobile to defining components and UX patterns. Implementing the Simulator mobile app gained Cofense a leg up on their competitors, as no one in the space was focused on mobile at the time.
Artifacts
Educating and Increasing Vigilance through Visual Communication
Producing a new infographic always presented a fun challenge because each one was always different. The infographics provided customers away to not only educate their employees during a phishing scenario but also as print collateral around the office with something other than a vast amount of heavy text. Information is more easily digestible in smaller chunks and we could also make these visually appealing. I used a content first approach as copy and research around the infographic was handed off by the copywriter and research team.
In my time spent at Cofense, I created 56 new infographics.
Then I would pour over everything and do a stint of visual research. Were we the first ones to break the new about this type of attack? Does someone else have more information or done something similar? How can we make a better informative statement? In my time spent at Cofense, I created 56 new infographics. I would start by sketching out some roughs and playing around with ideas in illustrator. The print design was always done first to act as a bible for how we translated the infographic to the web. Because each infographic was different, they all had different needs. I would make custom display fonts for infographics like Malicious Macros. The infographics were also translated into 38+ languages. Working with the web design team I would guide the direction on the interaction design as we collaborated on transforming the web ready versions. The Localization team would be handed the same research and copy I was given to start their process. I worked on an idea that the localization team could produce the translations int XML and JSON. The XML versions were used inside of targeted copy areas in illustrator and the JSON was used for the web equivalent. In order for an infographic to be considered complete it had to have a small (11x17), medium (18x24) and large (24x48) print, a responsive web version and a quick tips version (8.5x11). Each infographic went through 2 iterations and multiple peer reviews with the Content Director and would take roughly a month to produce.
As the person in charge of creating the videos and infographics, featurettes, like the video above, were produced to keep customers updated as well as community posts. (I also created the Cofense Video IDs).
Artifacts
Vigilance Through Storytelling
With infographic and animated content I saw better engagement with the education over the static HTML.
When I started work on the videos, Cofense had a fair number of whiteboard styled videos. There would be the occasional negative customer feedback about them being a little cartoonish. It wasn't until Cofense started entertaining international audiences that I began to transition all of the video content into object based motion graphics with broader color palettes. Videos provided another tool in my phishing education toolbelt for operators to present to their employees. The key directive was micro education, each video should only be long enough to convey the information in 2 to 3 minutes. Understanding the situation and environment the majority of the viewers found themselves in, I wanted them to retain the information and be able to move along with their day. Moving objects and pictures grab someones attention better than having to sit through a computer based training course. With infographic and animated content I saw better engagement with the education over the static HTML. Also looking into the data for each video, I could see what sections were performing better than others, then I would the video and script as needed to adjust for better results. A new video would take 2 months to produce from script writing to storyboard and pre-visuals to animation production and voice over.
Artifacts
Educating Users During a Momentary Lapse of Judgment
Outside of tackling a mobile/process redesign of the phishing simulator, the education presented me with a more ready opportunity to enact change and increase engagement. Our time spent of education numbers were mere seconds. At the time when I began, the designs where using black text on white content block, gray backgrounds and various shades of red to call out information and CTAs based on the PhishMe brand. I started assessing the situation with our color palette and looking a data collected from user feedback groups. The colors were checked for contrast against WCAG 2.0 compliance and the content blocks and HTML were created and heavily commented to inform operators how to edit their own education. The prototypes were built with a content first method then I started designing for mobile up to the desktop version. The templates passed cross-browser compatibility back to IE8 and provision were put in place if the end users browser has JavaScript turned off.
I was presented with an opportunity to gain feedback from customers that signed up as part of the PhishMe/Cofense Beta project. This meant I was able to install analytic tracking and reach out to the individuals as to their thoughts about the new education designs.
Prototypes
Better Connections Through Technology
Mindfinder was built as an internal relationship management tool for Recruitment. The goal was to allow management and HR track/chart candidate and employee progress, capture candidate details, and start any employee centered work practices. I worked with a business analyst and met with the product owner, in this case the head of recruitment, and we collaborated on user flows during whiteboarding sessions. After about 2 weeks of research and sketching, I started to put together wireframes using Balsamiq and several hi-def prototypes of screens in Photoshop. The initial color palette was taken from the organizations original branding. When I met with the product owner at the end of every sprint for sign-off, validated ideas were kicked over to the developers to begin ensuring the designs meshed with the outlined technical stack. During this process I worked closely with a Business Analyst, the Head of Recruitment, my Project Manager and the developers. The team and I developed a rhythm of new patterns and releases as we delivered featured every sprint and included the product owner in our retrospectives.
Artifacts
Getting Developers Excited About Design
Out of the students, 15% of them switched disciplines from Java the UI development
I started the UI development courses at Mindtree after there were conversations and an uptick in interest from a fair number of the Java Developers. I put together a core curriculum of basic front-end knowledge and several UX principles for the courses. Each deck and assignment was shared with the UX/UI team for peer review on Monday before classes the following Wednesday. It was a learning experience for everyone including myself. I began to incentivise class engagement to increase interest in the courses as they were not required. Class attendance would roughly fluctuate between 12 to 25 students after work hours. Out of the students, 15% of them switched disciplines from Java the UI development and the interns produced some really good results as each students core project was to create a personal website about themselves and their time in Gainesville.
Artifacts
Reducing Food Waste with Science
Kitchen Cloud has been a passion project for a number of years aimed at helping users improve their overall health and save money at the same while encouraging more home cooking by reducing food waste. I started exploring my research by talking with local grocery stores trying to understand more about UPC codes and how they actually handle expiration dates. With food waste being the cornerstone of this product, I outlined a freshness index that we could hold all of the foods in the digital pantry up to. Every idea starts with a sketch and Kitchen Cloud is no different. There is almost an entire Moleskin sketchbook of components screens and idea regarding this project. The design prototype has been through several feedback sessions, both in focus groups and one on one usability tests. Where Kitchen Cloud is now I can not design anymore of the experience without overdoing it. Outside of personas, journeys, flows and screens, I built a Kitchen Cloud wiki to outline the experience documentation for potential developers. If you'd like to learn more about Kitchen Cloud as a whole, please visit kitchencloud.net, otherwise I'm an open book when it comes to my process with Kitchen Cloud.
