LISA MURNAN

LISA MURNAN

UX Portfolio2019

User Experience Designer

I’ve been designing web and mobile interfaces and leading UX projects for over 20 years. In 1994, I was on the team that put one of the first newspapers online (NandO.net) and in 1995 I was part of the first wave of corporate webmasters.

I’ve played almost every role on the user experience spectrum and worked on all types of digital projects, as both a corporate UXer and a consultant for startups.

I also taught the UI/UX Design Certificate Program at Boulder Digital Arts from 2017-2019, where I guided students through the user-centered design process and coached them on their career development.

I love figuring out how to make complicated processes seem simple and straightforward to end users. I love solving problems. I love making things better.

A few years ago, a usability test participant was working through a task in one of my designs and said this (it made me so happy, I wanted to embroider it on a throw pillow and put it on my couch):

OVERVIEW

A little bit about myself…WORK EXPERIENCEDell Secureworks – Principal UX/Interaction DesignerAlly Financial – Senior Information Architect/Interaction DesignerACTIVE Network – Senior Interaction DesignerTIAA – User Experience LeadBank of America – VP, Information ArchitectScient – Customer Experience ArchitectIBM – Web LeadVirtus (3D Software) – WebmasterThe News & Observer (NandO.net) – Web Developer

Lisa Murnan: UX Design Portfolio page 2

EXPERTISEI specialize in complex web apps and follow a user-centered design approach. My skills and knowledge include wireframing, prototyping, interaction design, information architecture, user research, usability testing, visual design, UX strategy, and project leadership.

I am also very comfortable working in an Agile environment.

IN ADDITION TO UXDogs are my hobby and I have a lot (11). A few years ago I wrote a dog sport training book called The Beginner's Guide to Flyball.

In 2018 I wrote How to Get a UX Design Job, inspired by the students in my UI/UX Design Certificate Program at Boulder Digital Arts.

I live with my husband and kids (and all the dogs) in the mountains of Colorado, right outside of Denver.

In addition to these full-time roles, I have also been an independent UX consultant for the past 15 years.

[email protected] | lisamurnan.com

Over the course of 24 years I’ve designed a lot of stuff.

Some of it is highlighted in this portfolio. I picked projects that I was proud of, that I could tell a good story about, and that I thought made a difference (solved a problem, made somebody’s job easier, saved some time, put a smile on somebody’s face).

My design process varies depending on project goals and constraints.

As a UX designer, I collaborate with product management, engineering, and other stakeholders to design end-to-end digital experiences. Sometimes I am a UX team of one, so I do all the user research, information architecture, interaction design, content strategy, visual design, and usability testing myself. Other times, I am part of a larger UX team with more specialized roles, so I work collectively with user researchers, visual designers, and content strategists to come up with the best design solutions. I’m happy either way.

In general, I like to follow a user-centered design process something like this:

About this portfolio and my design approachA NOTE ABOUT USER RESEARCHOne recurring theme you’ll see throughout this portfolio is that I always always always do a lot of upfront user research, no matter what the project is or my role on it. I do research even when I’m not paid to do research. I want to understand the person who will be using the product that I design – their goals, motivations, pain points, and unique characteristics.

I visualize that person in my mind as I sketch, as I create wireframes and prototypes, choose icons, and write instructional text and error messages. Whenever I can, I involve that person in my design process and continually revise based on their feedback.

page 3

Discover: Research time!

Define: When I organize everything (user/task flows, site maps, etc.)

Design: Sketching, wireframing, prototyping, testing (iteratively)

Deploy: Producing specs, visual assets, and style guides for devs

Measure: Analyzing metrics to see where we can improve

I spend a lot of time working in Agile dev environments and integrate my design approach accordingly.

I took this photo while observing a usability test of an iPad app I designed for Ally Financial. The test participant, an F&I manager at an auto dealership, was holding an iPad (with a prototype of our app installed on it) in his hands and giving his “pitch” to one of the user researchers while the test facilitator looked on.

Discover Define Design Deploy Measure

Lisa Murnan: UX Design Portfolio [email protected] | lisamurnan.com

page 4

Secureworks

Redesign the UI of a SaaS-delivered client portal application

1/3Red Cloak Portal | 2017-2019

OBJECTIVERedesign Red Cloak to provide a fresh modern look, allow for increasing levels of user customization, and improve the workflows for various types of users.

BACKGROUNDRed Cloak is an endpoint security solution originally developed by the Secureworks Counter Threat Unit for their own use (to hunt threats on clients’ networks). Clients were so impressed with the results that they started asking Secureworks if they could buy Red Cloak for themselves.

The SaaS-delivered Red Cloak portal (which is where all the endpoint data is displayed) was originally built by developers in Bootstrap and leveraged many of the default Bootstrap styles/settings. The front end left much to be desired, especially as a paid client-facing application.

BEFORE: Existing Red Cloak dashboard (designed by developers several years ago)

ROLEI was initially asked by Red Cloak’s Product Manager, Curt, to create a conceptual design of Red Cloak’s home page dashboard and a second-level page to show senior management, with hopes that they would support Curt’s redesign proposal and approve funding for the project.

Once we presented the design concepts and got the green-light to move forward, I was tasked with redesigning the entire web app (~110 screens). This included user research, information architecture (the whole navigation had to be restructured), interaction design, and some up-front visual design (later in the project I worked closely with visual designer Jim Y. to finalize the design).

PROCESSFrom the beginning, I worked very closely with one of the threat hunters in the CTU, Ryan, who was already prototyping Red Cloak workflows in a sandbox environment. I used Ryan’s prototype as the foundation for my design and it evolved from there.

I reviewed customer feedback from meetings with product management, talked to the trainers who onboarded new Red Cloak clients (and I sat in on several onboarding sessions), and met with internal subject matter experts to understand how they used Red Cloak. I also researched competitor apps and dashboard best practices in general.

I created a high-fidelity Axure interactive prototype and used it to socialize ideas with SMEs, keep Product Management updated on progress, and provide guidance to the dev team (three scrum teams of ~15 devs, plus an external design firm, Slalom, with a UI/UX team of 3). I documented visual design styles and specs, and wrote Jira stories for the development of each screen and feature.

Lisa Murnan: UX Design Portfolio lisamurnan.com

page 5

Secureworks


2/3Red Cloak Portal | 2017-2019

PROCESS (CONTINUED)I also worked closely with end users and subject matter experts to redesign the site navigation and make it more intuitive.

Legacy Red Cloak navigation, which all lived under a settings icon and a gear icon in the header (pink lines and text indicate where each of the nav items will live in the redesigned portal. )


Site map of new nav structure (done in Excel)

page 6

Secureworks 3/3Red Cloak Portal | 2017-2019

RESULTS

My wireframes on left (Dashboard and Search Results), Jim Y.’s final visual design (light and dark theme - Dashboard) on right.



EARLY CLIENT FEEDBACK“I have only just opened it and already love the slick modern look and information presented on the dashboard.”

“I like the new interface of the portal that provides the relevant information on the dashboard.”

“You have the best data in the industry, these UI improvements provide a much more intuitive way to use it.”

“I believe this is the right path forward with the tool. Looks similar to other tools (CB Response) which is a good thing for analysts. I am looking forward to leveraging this tool.”

“Faceted search! Yes!”

“Generally she (the client) was elated with the mockups, at one point clapping at the table.” - Curt, Product Manager

2016’s Hackathon theme was “Zombies” so I created a zombie theme (along with several other themes) and made an interactive prototype in Axure that demonstrated how users could switch between themes and even upload their own background image.

page 7

Secureworks 1/1

Redesigned “dark” Event Detail widget, live in Production.

Interestingly, this also led to analysts asking for a ”dark” version of TAP immediately. I had initially designed TAP to match other (client-facing) Secureworks’ applications, which were predominantly white and blue. Analysts complained that these colors hurt their eyes. So we got to work on a dark theme right away.

TAP HACKATHON PROJECTSecureworks runs a Hackathon every year and encourages all engineering employees to participate. In 2016’s Hackathon, I mocked up the idea of “TAP themes” – after spending a lot of time with the security analysts (both in person and on many Skype meetings where I got to see their screen shares), I thought they’d appreciate the ability to customize TAP, since they spent all day every day staring at it.

My idea was inspired by Gmail’s themes and included the ability for analysts to change their background image on TAP’s main screen (including uploading their own image and sharing it with others), switch from a light to dark theme, and increase font/table sizes.

When I demoed my project at the end of the Hackathon, the security analysts were yelling, “How soon can we get it?!!” and the Product Manager added it to the product roadmap.


Replacing a business-critical legacy C application with a new web-based applicationThreat Analysis Platform | 2016

Hyperspace

Creating a variety of web apps for integration into Lightspeed Retail Point of Sale

PROCESSAt the beginning of the project, I deconstructed the visual design and layout of Lightspeed Retail Point of Sale and leveraged that to create templates and design patterns for Hyperspace’s different apps, focusing on things like top navigation, left navigation (collapsible panel), form elements, tables, fonts, color palette, etc.

OBJECTIVEDesign a collection of web applications to be built specifically for Lightspeed Retail Point of Sale users as part of Hyperspace Workshop.

Apps include:• Delivery App for consumer client• Purchase Order App for consumer client• Prescription App for eyewear company• Barcode Sticker Printing App for jewelry store• Weight Scale App for candy store• Shipping Quote App for multiple clients• Classes/Workshops Management App for yoga studio• Portion of Sales to Community App• Background Check App for multiple clients• Customer Lookup App for eyewear company• Driver’s License Scanner App for retail store

1/2Hyperspace Workshop | 2017-2018

BACKGROUNDI consulted with Hyperspace on these apps for over a year. I worked primarily with Brett G., Director at Hyperspace, and received business requirements and design direction from him.

Brett’s ask for all the apps was that they have a similar font, color scheme, and style as Lightspeed to make the experience as seamless as possible for end users who were moving back and forth between Lightspeed and Hyperspace Workshop’s apps.

page 8

THEIRS: Lightspeed Retail Point of Sale screenshot – what I leveraged to design Hyperspace Workshop’s apps (see next page for examples of what I designed).

ROLEI worked as an interface/interaction designer and visual designer, producing pixel-perfect Axure prototypes with accompanying style guidelines that Brett turned over to Hyperspace’s development team.


Hyperspace 2/2

page 9

Classes/workshops management app – 4-day calendar view (above) and list view (below), each with a class selected and class details displayed in panel on right.

Purchase Order app – showing advanced functionality that allows user to filter down products in the table then choose multiple sizes for multiple types of items going to multiple store locations.

My high-fidelity interactive prototypes of some of the apps:

Lisa Murnan: UX Design Portfolio

Creating a variety of web apps for integration into Lightspeed Retail Point of SaleHyperspace Workshop | 2017-2018


page 10

Boulder Digital Arts

Guiding BDA students through UX concepts/processes/skills and coaching them on their career development

1/2UI/UX Design Certificate Program | 2017-2019

I revamped the curriculum to fit my UX expertise and teaching style, and starting teaching the course in January 2017.

Each 40-hour course was taught in person and typically ran five consecutive Sundays. I taught six certificate programs over two years.

ROLEUI/UX Design Certificate Program instructor.

OBJECTIVETo teach aspiring and junior-level UX designers the fundamentals of user experience design and the user-centered design process.

Students working on a card sorting exercise

PROCESSMy class was a mix of lecture and hands-on exercises. Each student chose a web or mobile project of their own to work on, then created portfolio-quality project artifacts and deliverables throughout the course (including personas, task flows, sketches, and wireframes). The course was highly collaborative – students acted like a real-world UX team, brainstorming together on design solutions and presenting projects to each other.


BACKGROUNDBoulder Digital Arts has offered the UI/UX Design Certificate Program since 2012. When their instructor decided to move on in late 2016, I applied for and was offered the position.

My first teaching stint in January 2017


page 11

Boulder Digital Arts 2/2

I focused heavily on user research, information architecture, interaction design, and usability testing, and coached students on their presentation skills. I also mentored them on their UX career development (during the class and after it was over).

We collaboratively created user/task flows for each student’s project using Post-it Notes or the whiteboard


Each student created personas for their own project. I taught best practices and design principles but encouraged students to apply their own voice/style to their designs and deliverables.

Guiding BDA students through UX concepts/processes/skills and coaching them on their career developmentUI/UX Design Certificate Program | 2017-2019


Parking Pro

Matching up drivers and parking space suppliers using a mobile application and website

OBJECTIVETo create a mobile application and website enabling people to list their private parking spaces for rent, and drivers to find and pay for these spaces.

1/1Parking Pro Mobile App & Website | 2014

BACKGROUNDI consulted with Barefoot Solutions on a number of projects in 2014, including Parking Pro. I took direction from Barefoot’s creative director, Peter H., and produced wireframes and an interactive Axure prototype that I reviewed extensively with the client. Upon completion, my prototype was turned over to Barefoot’s development team and a contract visual designer.

page 12

ROLEI worked as an information architect/interaction designer, producing high-fidelity prototypes of both the mobile app and the accompanying website.

PROCESSBarefoot is all about speed, so my process was very compressed and relied heavily on iterative design with frequent feedback from Peter and the client, Marc.

First, I received a project brief with high level functional requirements and met with the Barefoot team in person to walk through it and ask questions.

Next, I spent a day or two researching similar applications and websites (including other parking apps as well as companies with similar marketplace models like Airbnb and Uber), taking note of user flows and design patterns that I liked.

I spent a day with Post-it Notes, mapping out the common user/task flows and doing rough paper sketches of each screen based on these flows. Then I started transferring these ideas into Axure.

Over the next five weeks I revised the prototype many times based on feedback from Peter and Marc, and built it out to include the website (~12 screens) and both iOS and Android versions of the mobile app (~15 screens each).

The final prototype was approved and ready for development six weeks after I started on the project.

Screenshots of my prototype (2 larger screens) and final design (3 smaller screens)


Ally Auto

Creating a web application to help auto dealerships quickly file service claims for their customers

I collaborated closely with the visual designer and content strategist on the Claims project, as well as the information architects working on the other One Stop Shop workstreams to ensure a consistent user experience across all the apps under One Stop Shop.

OBJECTIVECreate a web application that allows auto dealerships to quickly look up coverage details and file vehicle service claims on behalf of their customers.

1/2Claims Web Application | 2013

BACKGROUNDAlly Dealer Products & Services (DP&S) had a complex and disjointed F&I (Finance & Insurance) product suite that involved multiple brands and non-integrated systems and administrative processes. Ally DP&S wanted to rebrand everything as Ally and house all the billing, collections, and disbursements in one place (to be called “One Stop Shop”) on the Ally Dealer Portal website.

The One Stop Shop project was broken up into multiple workstreams – the Claims web app was one of those.

page 13

As part of the collaboration process, the team would gather in conference rooms and hold informal whiteboarding sessions to explore design ideas

ROLEI worked as the information architect/interaction designer (and UX team lead) and collaborated with user researchers, content strategists, and visual designers to create personas, storyboards, wireframes, prototypes, and design comps that effectively communicated our interaction and design solutions.


PROCESSThe Ally usability team had several years’ worth of great user research reports and usability studies for the auto dealer industry, so I took advantage of those and also spoke to subject matter experts inside Ally DP&S, as many of them had worked at auto dealerships prior to working at Ally and were extremely knowledgeable about the target audience’s goals and pain points.

I used all these inputs to create low-fidelity wireframes that evolved into a high-fidelity interactive Axure prototype.


Ally Auto

The app tested great – it was one of my proudest moments as a UX designer. My favorite participant quote: “It couldn’t be more straightforward. Unless the system can read your mind.”

Once my wireframes/prototype were reviewed and approved by the design team and other stakeholders (many iterations over the course of one to two months), we scheduled usability tests at auto dealerships with service managers.

2/2

page 14

This was a slide from a PowerPoint presentation given by the business owner of One Stop Shop to his peers in Dealer Products & Services. He sat in on several of the Claims usability tests in person and was thrilled with the test participants’ ability to complete tasks and their positive feedback.


My Claims home page wireframe (larger screen) and final visual design.

Creating a web application to help auto dealerships quickly file service claims for their customersClaims Web Application | 2013

After two rounds of usability testing we made a few minor changes to improve the user experience, then the project’s visual designer Mikal A. produced the final look and feel.


Halftime Dogs

Promoting the Halftime Dogs Flying Disc Show with a responsive website and print marketing materials

1/2Website and Promotional Material | 2017-2018

page 15

A section of Halftime Dogs’ home page


OBJECTIVETo create a compelling promotional website for Halftime Dogs that athletic directors and sports marketing professionals could easily find, scan, and share with colleagues.

BACKGROUNDHalftime Dogs was founded by my husband, Todd Murnan, so I had a tough demanding client to deal with. ☺

ROLEI did everything on this website except design the logo and take the pictures/videos. I did user research, content strategy, writing, visual design, screen layouts, and WordPress development. I designed the business cards, postcards, and banners. I monitor the site traffic with Google Analytics to see what’s converting and what needs tweaking.

PROCESSI spent some time researching other halftime entertainment sites (not just dog acts, but also skydivers, Zooperstars, etc.) and also halftime entertainment in general – what was its purpose (to keep fans energized during the break), what athletic directors were looking for, and how they went about recruiting and booking talent.

I designed a long scrolling home page because I wanted to tell people the story of Halftime Dogs and keep them engaged with exciting action photos, video clips, and scannable chunks of content. I thought this format would serve busy athletic directors well.

In addition to content about what Halftime Dogs has to offer, I included a current schedule at the top for credibility, and embedded posts from Twitter, Facebook, and Instagram for social proof. At the bottom of the page are testimonials, plus a complete list of everywhere Halftime Dogs has performed.


Halftime Dogs 2/2

page 16

I designed business cards and postcards to help promote the business. I also created a Halftime Dogs Facebook page.

5 x 7 postcards

RESULTS

Halftime Dogs gets contacted several times a week by college athletic departments, NFL teams, minor league baseball teams, and other event promoters requesting halftime entertainment bids/proposals. They booked 28 events for 2018 (compared to 3 events in 2017) – all leads came from the website and/or the postcards.


I registered the halftimedogs.com domain and researched WordPress themes until I found one with a lot of customization features (Avada). It was important that whatever I picked was responsive and looked great on a mobile device since nearly half – 46% – of Halftime Dogs’ site visitors are on mobile.

Halftime Dogs needed a unique and eye-catching logo to put on the website, t-shirts, banners, frisbees, and stickers. I started a logo contest on 99 Designs and we got exactly what we were looking for.

Promoting the Halftime Dogs Flying Disc Show with a responsive website and print marketing materialsWebsite and Promotional Material | 2017-2018


What people say about me

page 17

“I think Lisa is the best. She is so incredibly personable… Many developers rather cringe at the idea of having to have some ‘expert’ come in and scrutinize ideas that you have worked on. But Lisa knows how to gently come into the picture and make suggestions and help people take a broader outlook at what they are doing. She always helps with an understanding of the WHY something should be done a certain way rather than just pointing out problems or making corrections. Now, the team and myself look forward to having new UI components so that we get the opportunity to work with her…”- Mike H., Principal Software Engineer

“I’ve taken many BDA classes, including several leading to certificates... Although all my certificate classes have been excellent, Lisa's teaching style and structure seemed to make this the most generous, interactive and collaborative experience so far at BDA. During five Sundays, I think (and am sure everyone in the class would agree) that we felt like a mini UI / UX collaborative team. In part, this was because Lisa encouraged us to work on and get feedback on individual projects (such as creating a new App, updating a website, etc). I just loved this class, and highly respect Lisa's organized but warm and generously open teaching style.” - Anonymous student feedback from my UI/UX Certificate Program at Boulder Digital Arts, August 2017

“Lisa’s work is thorough, consistently well done, well-articulated and firmly rooted in UX best practices. She is an absolute pleasure to work with – never gets upset, always willing to help, and really good at ‘thinking on her feet’…she always has great perspective…”- Kathy L., Principal User Experience Designer

“…Taking into consideration the skills of the developers and the audience for whom the end products are meant, I find Lisa to be perfectly flexible…pushing us to make changes in critical areas and allowing for alterations in others…”- William D., Software Engineer

“Lisa has an excellent way for providing suggestions and making the team understand the ‘why’ behind the presentation of the solution. She is flexible and understanding of the technical challenges of the team and quick to provide alternative solutions which take into consideration technical challenges, release timelines and also meets the need of the end-user.”- Bharat K., Software Engineer Sr. Manager


“Lisa has done a great job guiding the UX design of the TAP. She quickly came up to speed when she joined and has had a HUGE impact on the TAP. Lisa is also very timely with her designs. I’ve been very glad to have Lisa on the team and her willingness to dive head first into the TAP was awesome. ”- Gary Deckerd, TAP Product Owner/Business Analyst


Thank you!

Lisa Murnan


Documents

LISA MURNAN