Visual Design

I design clean, professional, and consistent interfaces that cater to the aesthetic expectations of the end-user. I aspire to always serve the end-user through an iterative design process based on research, testing, and feedback.

Collapse

It's worth noting that, while Visual Design is listed first among my portfolio tabs (its work is most visually appealing), I prefer to begin Visual Design only after I've researched my target audience and sketched/wireframed my intended layout.

I'm equally comfortable creating new styles from scratch, or working from another designer's styles. Since I also write HTML and CSS, I know how my interfaces should be coded and won't design anything that breaks a style guide or can't be built semantically.

Tools

These are some of the tools and resources I use most in my Visual Design work.
- Photoshop
  
  I use Photoshop for all of my Visual Design work. It's a powerful tool that affords me lots of versatility when creating graphical elements.
- Font Awesome
  
  I'm a big fan of the Font Awesome icon set. It's a robust package of icons, whose font I can use in Photoshop, and whose font-icons can be rendered to scale without the need for image files.
- Google Fonts
  
  Google Fonts is my goto font kit for professional fonts that I can use both in Photoshop, and in my web development work. Not only that, but it's free, making for ease of experimentation and implementation.
- Subtle Patterns
  
  I primarily use patterns from the Subtle Patterns library. They're clean, minimal, and give designs that added touch of depth.
- iStockPhoto
  
  Of the many stock photo libraries, iStock is my goto. They have a huge selection of professional stock photos and graphics.
Process

This is the process I use when creating a new design in Photoshop.
- 1.
  
  Guides
  
  The first thing I do when I open a new canvas in Photoshop is lay down some guides. Guides help me define grid boundaries and make crisp, pixel-perfect shapes.
- 2.
  
  Shapes
  
  Next, I'll lay down blank shapes to define the contours of my layout.
- 3.
  
  Layer Groups
  
  I individually title all of my layers, as well as their layer groups. I title my layer groups according to the different sections of my interface (ie. Header; Content; Sidebar, etc.)
- 4.
  
  Fonts
  
  I'll start by using Helvetica Neue for all of the fonts in a design, and then alter the fonts once I have my content in place.
- 5.
  
  Icons and Imagery
  
  I'll pull in stock image comps from iStockphoto or Shutterstock, and add iconography from font-icon libraries such as Font Awesome, Entypo, and Glyphicons.
- 6.
  
  Colors and Textures
  
  Up until this point, my design will look like a wireframe. I'll finally start playing with colors and textures, determining a color palette and aesthetic style for my interface.

See: Tools & Process

Note: Tap or click the images below to see an expanded version in a lightbox. Then, tap or click the left and right arrows on images within the lightbox to view alternate designs for each project.

CIO Blogs Mobile

While working at IDG, I was tasked with a complete redesign of CIO.com's popular Blogs website. I built the wireframes and designed the UI for both CIO Blogs Desktop and CIO Blogs Mobile - a site that sees about 15,000 unique visitors/day. I focused on creating a clean, simple layout, with a minimal navigation for ease of use.
CoachUp Home Page Redesign

At CoachUp, we needed a new home page design after we switched to the "Post A Job" model, popularly used by other two-sided marketplace sites, which consists of a lead-capture/concierge form on the home page rather than an interface that allows the user to search the marketplace. At the time, we had also just undergone a rebranding, so we were still playing with our general look and feel. These are mockups I created to incorporate the new "Post A Job" functionality.
BeautyMotive v3

These are third-round mockups I designed for the BeautyMotive platform. The platform offers YouTubers the ability to find and opt-in to paid promotional video campaigns from beauty and fashion brands. Our web-savvy, predominantly-female audience preferred smooth, colorful layouts that utilize thin, sans-serif fonts and lots of imagery, which is the approach I went for in these designs.
Computerworld Insider Marketing Pages

Back in 2010, when IDG launched its freemium content model, I was part of the branding and implementation team. The first IDG brand we launched on was Computerworld, and these are mockups I did to market our Insider program. The mockups were intended to look fresh and stylish to convey added value to our userbase.
Moving Metrics v3

This is a landing page I designed for Moving Metrics, the brand-focused side of the BeautyMotive platform. The design was intended to be stylish yet clear in conveying the value provided by the service.
Terrene v2

These are the second round of mockups I designed for the sustainable interior goods manufacturing company, Terrene. Featuring a large, eye-catching image on its home page, the design was intended to pull the viewer in and help them focus on the call-to-action contained within.
Computerworld Skimmer iPad App

This is a prototype I designed for Computerworld at a time when we were exploring building an iPad app to resemble the New York Times' recently released Skimmer tool. The app was intended as a lead-gen app that pairs the functionality of Computerworld's website as well as IDG's Tech Dispenser web product. I aimed to create an interface that would allow advertisers to serve ads while simultaneously allowing us to serve premium, gated content.
Car Care Check

I designed and built the the initial website for Car Care Check (now called Jaze), a service that helps diagnose car problems for drivers. Our design approach was meant to convey a sense of stress-free car-management to folks who may not know a lot about cars or car maintenance (like myself).
BeautyMotive v2

These are a couple of the designs I did for v2 of BeautyMotive's Visual Design. I went with a simple approach with lots of white space and gentle shadows to follow in the footsteps of other beauty and fashion sites with a similar aesthetic.
Computerworld Newsletter

Each of IDG's brands (Computerworld, among them) feature a host of topic-specific newsletters. We were constantly A/B testing different designs on different newsletters reg forms, and this was a design I did for the Technology newsletter sign-up page. The design aimed to simplify what was once a long page of form fields and additional newsletter options. Alas, this design didn't perform so well (users preferred the traditional approach without accordions) but nonetheless it was a valuable design project.
CoachUp Coach Profile

These are a series of mockups I did for CoachUp's coach profile. While undergoing this project, I also played a role in the information architecture process, determining which content to display to users, using which language, etc. One challenge with these designs was putting the focus on our main call-to-action despite having so much other text on the page.
Moving Metrics v1

Back in the early days of Moving Metrics, we billed ourselves as video production specialists before going the route of a full technology solution. We teamed up with video-production-savvy YouTubers who became extensions of our Creative Team. These are first-round designs I did for the Moving Metrics content site.
Backupify

This is a prototype design I did for Backupify at a time when I was vying for a position there. I attempted to take what I thought was a flat and rather dull design and give it life through the inclusion of a human character and bright colors/graphics.
CIO Blogs Desktop

This is the desktop site design I did for CIO Blogs, in advance of the mobile design shown in my portfolio above. The design offered CIO bloggers a cleaner presentation for their content, as well as better bio pages and more focused taxonomy pages.
OurStage Mobile Recommendations

OurStage is a music-recommendation and discovery platform for emerging artists, whose algorithms are based on a music-ratings system. They needed a new web and mobile UI for their recommendations tool. These are several in a series of draft mockups to improve the look and feel of that tool.
MMotive Landing Page

MMotive was an experimental off-shoot of Moving Metrics prior to the creation of the Motive sub-brands. Featuring the once-popular header ribbon approach, this design catered toward young, web-savvy users with its slick shadows, rounded corners, and bright colors.
Boston Academy of English

In its process of switching building locations, BAE decided to rebrand itself with a new, cleaner design and better access to content. I created this design with the hopes of luring would-be English-speakers using lots of professional imagery and a slick carousel to showcase BAE's beautiful new property.
Growth Spark - Astronauts

This design was part of a series of fun marketing pages aimed at small business owners. In addition to designing this landing page, I also ran a Facebook ad campaign to draw visitors to the page. The design pokes fun at niche-specific landing pages by isolating a very improbably crop of users - astronauts. Other intended series pages included Ninjas, Snowmen, and Rabbits.
ITWorld Help Desk

One of my first design projects at IDG was mobile screens and a landing page for a mobile app called ITWorld Helpdesk - a simple "Magic 8-ball"-type app that would display funny help desk quotes at the shake of the device. Sadly, the app never launched, but the design process was fun.
ViralGains Dashboard

I gave ViralGains' dashboard UI a fresh coat of paint to help make their platform more marketable to brands. The UI features a flexible layout meant to accommodate screens of varying size. While working on the project I also played a role in the information architecture process, helping to determine the order of top-level navigational items as well as their sub-menus.
Moving Metrics v2

Building off of the v2 design for BeautyMotive, I designed Moving Metrics' brand-focused site to feature a consistent UI, with lots of white space and bold, bright colors. These are a series of mockups I did for various pages of the marketing site.
OurStage Desktop Recommendations

This is the desktop variant to the mobile music recommendations design above. Users would come to OurStage, be prompted to listen to songs by emerging artists, and then vote on which song they preferred more. The preferred songs would rise or fall in rank based on these votes.
Terrene v1

This is one of the first Visual Designs I did while contracting for Growth Spark, back in 2009. The client was Terrene, a manufacturer of sustainable home products. The client specified that they wanted a fresh design with a unique look-and-feel, which I attempted to deliver, using lots of green tones and an overlapping sidebar.
Uprise Medical iPad Prototype

Uprise Medical (now Centrana Health) needed a prototype of its product, designed as an iPad app. I designed this interface to accommodate both the iPad 1/2 and the iPad Retina, with graphics sliced for each.
BeautyMotive YouTube Channel

Back when Google allowed custom designs on YouTube channels, I designed a series of channel skins for BeautyMotive's YouTube presence. These are two of the more progressive designs, featuring listings of BeautyMotive scheduled programming, as well as hosts for the channel.
CoachUp Checkout Flow

One of the first things I redesigned after joining CoachUp was our checkout flow, which needed a new UI for processing payments, as well as entry points to let existing users make repayments. This design features a stepped approach, with lots of value points made throughout the flow to drive home CoachUp's underlying value (and convince users to follow through with their purchases).
Computerworld Mobile Video

These are a couple of mockups I made to help freemium users gain access to gated video content on Computerworld. The designs echo Computerworld's signature yellow background and blue-button aesthetic.
Mimoco Info Page

This was a landing page I designed for Mimoco that intended to inform new users about who Mimoco was, as well as introduce them to Mimoco's line of Mimobot character-based flash drives. I both designed and coded the page, using tie-ins to our Magento eCommerce platform and Mailchimp newsletter system.
BeautyMotive MoMenu

While at Moving Metrics I came up with this idea for a video-based channel guide, where users watching our "MoMenu" videos could click linked annotations to be redirected to other videos. The "video" was little more than a slideshow with YouTube annotations layered on top of it. Here are a few of the mockups I made for the slides.
IT News

These are a couple of designs I did for IT News to enhance their site's visual presence and boost reader registrations. While among the family of IDG sites, IT News was the only pure content aggregation site, with no original publishing of its own. As such, readers often found IT News after searching Google for the term "it news." My challenge was to make the site look lively enough that readers would feel compelled to register for gated content.
ChrisBeaman.com

See my portfolio sites from the past: These are mockups from prior iterations of my own website.

Wireframes

Wireframes are important to my design process because they help me to think through my layouts, interactions, and delivery mediums. I take an iterative and collaborative approach to wireframing, making sure that my clients can see and provide feedback on my work as it progresses.

Collapse

In an ideal environment, I would precede an initial wireframing stage with a user research/business discovery process so that I become very familiar with the needs of both my client and their users. In order to be most effective in my work, I like to know who will be using my interface, what they expect, what they currently use, and why they should want to use what we're creating.

I tend to progress from a lower-fidelity wireframing approach to a higher-fidelity approach as my concepts are given the green light. Unless I'm doing the Visual Design or coding myself, I prefer to finish a wireframing stage by handing the Visual Designer/developer a fully annotated spec.

Tools

These are some of the tools and resources I use in my wireframing work.
- Omnigraffle
  
  Omnigraffle is my preferred wireframing application. It features a robust toolkit and is intuitive to use, making it easy for me to quickly materialize digital concepts.
- Graffletopia
  
  Graffletopia is home to hundreds of Omnigraffle stencils and is my source for the latest in platform vectors.
- HTML/CSS
  
  When a clickable PDF doesn't suffice, I build rapid prototypes using HTML, CSS, and Javascript, and/or front-end frameworks such as Twitter Bootstrap.
Process

This is the process I use when building wireframes using Omnigraffle.
- 1.
  
  Sketch
  
  If I haven't done so already, it helps me to sketch out ideas on paper before jumping into wireframes. Sketches are the fastest way for me to materialize ideas.
- 2.
  
  Guides
  
  Just like with Photoshop, I'll lay down some guides to help define some initial structure to my document.
- 3.
  
  Shapes
  
  I wireframe almost entirely with grayscale shapes to clearly distinguish structure from presentation. Instances where I'll use color are for overlays, or validation dialogs, etc.
- 4.
  
  Stencils
  
  Stencil libraries are great for providing contextual graphics to wireframes. For example, when wireframing for iOS7, I'll use a complete iOS7 stencil to emulate iOS7's UI kit.
- 5.
  
  Rapid Prototypes
  
  After each iteration of a wireframe, I'll present it either as a static PDF, a clickable PDF, through an online feedback tool (such as Cage or Onotate), or built out as an HTML / CSS / JavaScript prototype.

See: Tools & Process

Note: Tap or click the images below to see an expanded version in a lightbox. Then, tap or click the left and right arrows on images within the lightbox to view alternate designs for each project.

CIO Blogs Desktop Wireframes

These are wireframes I created for the redesign of CIO Blogs. I worked through nine iterations of wires after an extensive interview process with editors from CIO about the features and functionality they wanted for their site. Specs and annotations for this project were written in Basecamp as opposed to the document itself.
CIO Blogs Mobile Wireframes

After completing the Visual Design process for CIO Blogs Desktop, I moved into the wireframing stage for the mobile version of the site. The work I did for CIO Blogs Mobile set the stage for each of the mobile designs going forward for other IDG properties. As such, I did all of the research for screen sizes, ad formats, content types, whether we could/should offer mobile commenting, etc. Specs for this document are based off of specs I wrote for the desktop version of the site.
NFPA PV App Wireframes

These are wireframes I built for the NFPA (National Fire Protection Association) as part of a project to create an OS-agnostic mobile app for solar PV installers. The app was built using Sencha Touch by a third-party developer and deployed via Phonegap. Shown in an iPad frame, the wireframes contain 21 screens and cover all content and interactive aspects of the app.
CoachUp Checkout Flow Wireframes

These are the finished wireframes for CoachUp's new checkout flow, which previously existed as a single-page operation. My goal with this design was to give the user the impression that the checkout process wasn't very long, while simultaneously showing them a lot of information.
IT News Mobile Wireframes

The structure of these wireframes is based off of the work I did for CIO Blogs (described above). The website automatically detects the size of the visitor's viewport when visiting the site and shows them either the mobile version or the desktop version.
CIO Blogs Slideshow Tool Wireframes

Before creating a universal slideshow tool (Roboto: see below), I built wireframes for a CIO Blogs-only slideshow CMS. The tool would streamline the process for CIO editors to create, customize, schedule, edit, and delete slideshows on the site.
American Airlines Personas

These are personas I researched for American Airlines as part of their Email For All initiative in 2012. I interviewed subject matter experts and employees from seven airline departments at AA to understand how they access digital communications. Up until this point, AA hadn't offered employees a company email address and had no centralized digital communication method. Since airport employees are constantly on the go, AA needed to know how best to distribute information to and support their employees on the new email system.
Rent Pay Express Mobile Wireframes

Rent Pay Express is a mobile app that allows tenants and landlords to manage their rental experience, including paying and receiving rent via their smartphones. As part of the initial product launch, I built 62 screens for an app that would be built inside a Phonegap shell for portability to iOS and Android. The wireframes include all interactions both inside the app and out.
IDG Insider Interaction Flow

This is a spec I put together as IDG was beginning to think about its Insider freemium model. The interaction flow shows how users of various types would interact with freemium content, as well as how Insider would be deployed to our existing properties.
CoachUp Coach Profile Wireframes

These are different iterations of wireframes I built in advance of my Visual Design for CoachUp's coach profiles. A substantial portion of this project involved figuring out which information to show and not to show.
Roboto Slideshow CMS Wireframes

These are some of the more complex wireframes I've created, showing screens, user roles, and interactions for a CMS application that would allow editors across each of IDG's properties to create, customize, schedule, edit, and delete slideshows.
ViralGains Tracker Wireframes

These are the green-lit wireframes showing the intended interaction for switching between campaign videos in the new ViralGains dashboard, which I did the Visual Design for, as well.
CoachUp Post a Job Wireframes

I built these wireframes to document the interaction flow for CoachUp's forthcoming post-a-job feature-implementation, which I did the Visual Design for, as well. The wires show what the user would see as they make their way through the flow, as well as what a successfully posted "job" would look like on a landing page marketed to external coaches.
Car Care Check Wireframe

This is a wireframe I put together in advance of beginning the Visual Design for Car Care Check's initial website.
Widgetbox Tech Deck Interaction Flow

These are specs I put together for a new ad format we were exploring at IDG, using interactive tabbed widgets provided by Widgetbox (now Flite). The wires attempt to document all interactions of both the Widgetbox ad and the content box accompanying it.
BeautyMotive v3 Wireframes

This is a set of wires I built for the informational side of a redesign of BeautyMotive. We didn't end up using this layout, however the wireframes were still valuable in helping us to think through the type of approach we wanted to go with.
Computerworld Author Page Specs

These are specs I wrote to guide stakeholders and developers on the features of elements of Computerworld's forthcoming Author Pages redesign.
Compare Banks Wireframe

This is the finished wireframe I built in advance of creating the Visual Design for CompareBanks.com.
CoachUp Search Wireframes

This is a wireframe I built for a proposed redesign of the Search page. After building this, we determined that this page would be better used as an SEO landing page than as our search page, and thus it because a "hub page" rather than our search page. There is a slight interaction shown in the wires for an extended search vs. a simple search.
Computerworld Skimmer Specs

These are specs I wrote to describe the intended functionality for my prototype Skimmer app for Computerworld, as part of an effort to help pitch the idea to stakeholders.
CFO World Mobile Wireframes

The structure of these wires is based off of the work I did for CIO Blogs (described above). This is largely a spec document to outline how the existing desktop site should be ported for mobile.
ViralGains Specs

These are specs I wrote to guide the development team behind the implementation of ViralGains' new dashboard, which I performed the Visual Design for. I wrote the specs as PDF notes, so only a few small samples of specs are shown. The specs cover aspects from pixel dimensions to interactions within the application.

HTML, CSS, & JavaScript

I began writing HTML and CSS before I learned to design. Over the years I’ve worked on a lot of different coding projects, from desktop sites to mobile sites to Wordpress and Drupal sites.

Collapse

I write standards-compliant, semantic, search-engine-optimized HTML5, CSS3, and JavaScript, with comments throughout for ease of understanding.

Tools

These are some of the tools and resources I use most in my front-end development work.
- HTML5
  
  I write standards-compliant HTML5. View this site’s page source for an example.
- CSS3
  
  Thanks to the advent of CSS3, I can now code all of my gradients and rounded corners rather than exporting and piecing together images from Photoshop.
- jQuery
  
  I use the jQuery JavaScript framework to build smooth interactions for my sites.
- Coda
  
  I use Coda as my text-editor for writing HTML, CSS, and JavaScript. It’s a fully-functional IDE with support for snippets, multiple panes, and FTP/SFTP synchronization.
- Twitter Bootstrap
  
  When it comes to rapid prototyping, I use Twitter Bootstrap for quick access to mobile-ready styling and a beautiful UI kit.
- Wordpress
  
  I’ve built a number of custom Wordpress themes from scratch, as well as modified existing themes and plugins.
- Github
  
  I’m most comfortable with Github as my code repository for maintaining versions of project files.
Process

This is the process I use when I write HTML, CSS, and JavaScript.
- 1.
  
  Boilerplate Files
  
  I tend to start most of my web projects using boilerplate files from templates such as HTML5 Boilerplate, Normalize.css, and Modernizr.js.
- 2.
  
  Write HTML
  
  After implementing my boilerplate, I’ll write all of my HTML. This helps me to establish a foundation for the structure of my sites, as well as for my classes and IDs.
- 3.
  
  Write CSS
  
  Next, I’ll write my styles to define the look and feel of my sites. I’ll finish my CSS by writing media queries to target screens of varying sizes.
- 4.
  
  jQuery Plugins
  
  I tend to write my jQuery last, unless its implementation will completely alter sections of my code, in which case I’ll implement it before I write my CSS.
- 5.
  
  Commit to Github
  
  If I’m working with other developers, I’ll periodically commit my changes to Github and provide comments about my changes; otherwise, I’ll commit my changes at the end of the day.

See: Tools & Process

Open Huntsville

I designed and coded the entirety of the front-end for Open Huntsville. Open Huntsville is an idea I came up with and built with a few friends of mine. It is kind of like LinkedIn for Huntsville. I coded the site to be fully responsive, which means each page and feature, both externally and internally is mobile-responsive. Going forward, as we've continued to make updates to the site, we utilize a design-first line of thinking, whereby all designs are coded in mobile view before attacking desktop view.
Boston Academy of English

I designed and built Boston Academy of English’s current website. I’ve also done a few smaller development projects for BAE, including a Drupal marketing site and a Wordpress site, neither of which are still in existence. Check out bostonacademyofenglish.com.
NFPA

I contracted with the NFPA as a UX designer and built out a set of wireframes for their OS-agnostic mobile PV app. I then coded the wireframes into a rapid prototype to be demoed to stakeholders on an iPad. See it here in its static form (no database): http://nfpa.chrisbeaman.com.
Above The Fold

While working at Above the Fold, I coded a number of custom Wordpress and Drupal themes for clients such as Andy’s Parties (Drupal), Our Money Place (Drupal), Revolve This (Drupal), and Write Biz Plan (Wordpress). I also configured and themed plugins for each platform.
Growth Spark

While working at Growth Spark I built a couple of small sites and performed maintenance on others. I built Resolute Marine Energy and Babson’s iTower sites as Wordpress themes, as well as Growth Spark’s “Web Design for Astronauts” landing page in custom HTML, CSS, and JavaScript.
Moving Metrics

While at Moving Metrics, I was Head of Product and built all of the company’s websites from 2010 through 2012. This included several iterations of movingmetrics.com and beautymotive.com, as well as several separate landing pages.
Solar Visionaries

In 2009 I designed and built Solar Visionaries’ first site as a custom Wordpress theme.
The Prettier Party

I ported my friend Laura’s then-Blogger site to a custom Wordpress site so that she could have more control over its content.
Mimoco

While working at Mimoco I was in charge of their weekly newsletters, each of which featured a custom design and build. I designed their newsletters in Fireworks and coded them on top of a custom Mailchimp template.
American Anti-Slavery Group

I worked as IT Manager for the American Anti-Slavery Group in 2007 and during that time was responsible for all site updates, which involved making updates to the site using HTML and CSS.
ChrisBeaman.com

I have now had four different portfolio sites, including this one, and have designed and built each one from scratch.

User Research

I am a big proponent of user research to understand product-market fit. The fluency of a value proposition or the effectiveness of an interface can only truly be determined by its users.

Collapse

I tend to distinguish user research as a process to create hypotheses, and user testing as a process to prove or disprove them. Both are cyclical, iterative processes, neither of which is performed only once.

Through continual research and testing, we can create products that truly serve our customers, resulting in increasingly optimal usability, and, in turn, a higher ROI.

Tools

These are some of the tools and resources I use to conduct user research.
- User Scout
  
  Short of having users or clients to interview, I use UserScout to source focus group and usability study participants.
- Morae
  
  I use Morae to include stakeholders in my customer interview process. Morae allows stakeholders to chime in and collaborate while I’m conducting interviews.
- Survey Monkey
  
  When it comes to conducting surveys, I find SurveyMonkey to provide a robust toolkit for segmenting users and displaying dynamic data.
Process

When it comes to conducting surveys, I find SurveyMonkey to provide a robust toolkit for segmenting users and displaying dynamic data.
- 1.
  
  Define Objectives
  
  I start by summarizing my goals for the research. What am I trying to learn? Who am I trying to target? Who am I not trying to target?
- 2.
  
  Determine Hypothesis
  
  I base my hypothesis on what I think I already know. My goal with coming up with a hypothesis is to establish a neutral belief that I will either prove or disprove.
- 3.
  
  Outline Methods
  
  Next, I create an outline of how I intend to answer my questions, based on the resources I have at my disposal. Money, people, and time are always key factors.
- 4.
  
  Conduct Research
  
  I conduct systemized research through phone calls, interviews, focus groups, surveys, and usability tests, depending on the resources available to me.
- 5.
  
  Synthesize Results
  
  Lastly, I compile my results to determine whether I proved or disproved my hypothesis. I’ll prepare a report for stakeholders to identify design opportunities or challenges.

See: Tools & Process

Moving Metrics

As a founder of Moving Metrics, I built the business from the ground up based on user research. Moving Metrics started as a company that served brands and YouTubers in a variety of markets. Eventually we narrowed our focus to the Beauty market, targeting cosmetics brands and women who produce makeup tutorial videos. Throughout this process I interviewed countless brand representatives, YouTube Beauty vloggers, and makeup consumers to learn about their usability expectations, buying habits, product preferences, familiarity with technology, personal schedules, interests, and more. Every facet of our product was shaped by interviews and focus groups I conducted with our target market.
American Airlines

I was contracted through Weber Shandwick to create user personas for American Airlines employees. As part of an internal email service rollout to AA staff, I had to get to know the digital communications habits of seven different employee roles at the company. To achieve this I set up phone interviews with a number of AA employees and subject matter experts to understand the habits, preferences, technological limitations, and schedules of my target user group. I compiled my results into a set of user stories told through personas which you can view in my Wireframes section.
CoachUp

As Lead Designer at CoachUp, my job was to create user interfaces for our target user groups: athletes, parents, and coaches. While redesigning coach profiles, I interviewed a number of coaches to understand their needs from a usability perspective and from a business perspective. As part of my interviews, I would walk coaches through my wireframes and visual mockups, collecting feedback and digging further to understand their emotional and behavioral reactions.
CIO Blogs

At IDG, parent company of CIO, I was assigned the task of redesigning CIO’s popular blogging site, CIO Blogs. In addition to creating an improved experience for readers, I also had to create an improved presentation for the editors. Prior to building wireframes, I interviewed each CIO blogger who would have a column on the site to understand their expectations, needs, and preferences. Additionally, throughout the wireframing and Visual Design stages, I relayed mockups with editors to get their feedback and help shape the direction of my efforts.
OurStage

I was hired by OurStage to help architect a website redesign for the brand. As part of this process, my team and I conducted an extensive survey to understand how our user-base used our product. With a variable SurveyMonkey survey and the incentive of winning an iPad, we sent our survey to 50,000 members, whose responses both greatly segmented our market, as well as helped us to understand the strengths and weaknesses of our product.

User Testing

I test users to understand whether my design hypotheses are correct or incorrect. If they’re incorrect, it’s not a bad thing; it’s an opportunity to try a new approach that may prove more effective.

Collapse

Outside of user testing, I’m also interested in traffic analysis, having used tools such as Google Analytics, Omniture, and Chartbeat. I value being able to look at metrics such as time on page, bounce rate, and how far users make it through a funnel.

Tools

These are some of the tools and resources I use to test usability.
- Open Hallway
  
  While I prefer testing users in person, sometimes remote video testing is the only option. I use OpenHallway to conduct remote usability tests with a preselected group of users.
- User Testing
  
  When I don’t have a base of users to source from, I leverage UserTesting.com’s large network of testers to click through a flow and provide feedback.
- Five Second Test
  
  I use FiveSecondTest to gather feedback on first impressions, such as recognition of a brand name, or of certain colors, or to gauge an initial emotional response.
- Clicktale
  
  I find ClickTale to be one of the more comprehensive tools for looking at heatmap analyses of how users currently do or don’t engage with elements on a page.
- Usabilla
  
  I use Usabilla to passively gather feedback on websites, especially initial launches. Usabilla offers a ubiquitous feedback button that allows anyone to quickly submit usability feedback.
- Solidify
  
  Solidify is great for collecting feedback on mockups — especially wireframes. Solidify allows me to gather written feedback from users as they are clicking through a flow.
- Optimizely
  
  Optimizely is a very user-friendly tool for quickly conducting A/B tests. I appreciate being able to use Optimizely to test different placements of site elements or calls to actions.
Process

This is the high-level process I use when testing users, regardless of the specific approach.
- 1.
  
  Make a Plan
  
  My first step is to make a plan of action. This includes determining which resources I’ll use, which processes I’ll employ, who I plan to test, and my criteria for stopping the exercise.
- 2.
  
  Define A Scenario
  
  Secondly, I’ll draft a scenario to offer participants. This helps them to understand the context of the test. I try to keep this broad without letting on too many details.
- 3.
  
  Arrange Facilities
  
  Next, I’ll set up my testing environment. This could mean space for in-person interviews, or accounts with online software, etc. I’ll make sure I have the resources I need.
- 4.
  
  Run A Pilot Test
  
  Before starting my actual test, I’ll run a pilot with a stakeholder or coworker to rehearse my process and ensure it will run as I envision it.
- 5.
  
  Recruit Participants
  
  Next, I’ll recruit participants, either through contacting users myself, placing an ad, or sourcing users through an online mechanism.
- 6.
  
  Facilitate The Test
  
  While testing users, I prefer to withhold information, such as who designed the interface they’re testing, or who will be evaluating them. I try to keep things broad, give them lots of encouragement, and ask follow-up questions as is necessary.
- 7.
  
  Write A Report
  
  After finishing my test, I’ll synthesize my findings so that I can provide stakeholders with actionable directions for how to improve an interaction or flow.

See: Tools & Process

Moving Metrics

In the process of designing and building websites for Moving Metrics, I performed constant user tests, both at a high-level, and through specific conversations with users. I showed mockups and wireframes to users and recorded their feedback, consistently trying to be as systematic as possible so to achieve the most actionable results. I spent a lot of time trying to understand and distinguish users’ emotional feedback from their behavioral feedback.
Growth Spark

While at Growth Spark I conducted numerous user tests for clients, helping them to understand the value of conversion-optimized design. I implemented Google Analytics and ran traffic reports, I installed heatmap analytics software and identified areas of activity and inactivity, I ran user tests using UserTesting.com and OpenHallway, and I A/B tested calls-to-actions on client sites and internal marketing sites.
IDG

One of the repeat assignments I had while at IDG was to redesign newsletter signup forms. Many of the registration forms on IDG-brand sites were old and outdated, and it was my job to attempt to improve them. Outside of designing new interfaces, I also A/B tested my designs to understand whether users preferred less or more form fields, hidden or revealed interfaces, and offerings of more or less newsletters to subscribe to. A defining moment in my UX career was learning that our users preferred less web 2.0-style interfaces and more traditional interfaces with long, vertical forms, smaller text, and use of flat colors over gradients and rounded corners.
CoachUp

At CoachUp, we made a big shift in our home page marketing approach from offering users the ability to search for coaches on our homepage, to giving them a registration form to our concierge service. We hypothesized that a more stylish homepage with easier access to our concierge program would lead to faster conversions and a better user experience for our users. As it turned out, this was the opposite of what users wanted; they preferred to search first, and then be guided into our concierge funnel. It was valuable to undergo this test, as using our “Post A Job” form on our homepage resulted in suboptimal conversion.
Mimoco

I was initially hired at Mimoco as a front-end developer, helping to improve aspects of the site that were managed by Drupal. Later, I was given the opportunity to try my hand at design, and took over the responsibility of creating each week’s email newsletter. Using Mailchimp as a marketing platform, I designed and built multiple versions of each week’s newsletter, A/B testing each one with a subset of our subscriber-base. This allowed me to understand, from a click-through perspective, which newsletters were most effective. In turn, I would email the winning design each week to the rest of our membership.

Product Management

Over the years I’ve worn many hats, from front-end developer, to Visual Designer, to UX designer, to founder of an online marketing business. Through this process, I’ve come to appreciate the value of an effective product development workflow.

Collapse

Above all tools that aid in product management, I place top priority on good communication with colleagues and stakeholders. Products are powered by people, and it takes personal cohesion on everyone’s behalf to move the ball forward.

Tools

These are some of the tools and resources I use for product management.
- Basecamp
  
  I find Basecamp to be most useful for communication with clients. Basecamp takes the pain out of lost email threads with a well-organized communication platform.
- Asana
  
  I find Asana to be useful as a high-level roadmapping tool. Better for creating lists than managing task flow, Asana is a slick tool for collecting ideas and team feedback.
- Trello
  
  Trello is great for moving deliverables through a task flow. I find that its simplicity compliments its usability in providing teams quick and easy collaboration management.
- Google Drive
  
  I do all of my written work in Drive, from recording specs, to organizing product features, to managing and commenting on competitor screenshots.
- JIRA
  
  While at IDG, we used JIRA for project management and I found it to be the most robust tool for collaborating on all aspects of a process.
- Onotate
  
  Onotate is a simple tool for uploading wireframe and mockups and collecting stakeholder feedback remotely. I first used it at CoachUp and have incorporated it into my workflow since.
Process

This is an example of the process I’d use to manage product development flow.
- 1.
  
  Sprint Meetings
  
  In an agile workflow environment, it’s important to iterate quickly with constant communication. I find that weekly sprint meetings help to keep the Product team on the same page.
- 2.
  
  Documentation
  
  Even if just loose notes, I regularly update my product documentation to keep track of which methods we’ve tried and how they performed.
- 3.
  
  User Research
  
  Before designing a new product feature, I like to survey a subset of users to gauge whether the direction we’re thinking of moving would resonate with them.
- 4.
  
  Mockups
  
  I design wireframes and mockups and collect feedback from my team to ensure we’re moving in the right direction.
- 5.
  
  User Testing
  
  A design is only effective if our users agree. I create clickable mockups and prototypes so that users can share their feedback in advance of a full feature-build.
- 6.
  
  Development
  
  After users have signed off on concepts, it’s time for development. I use project management software to collaborate with dev to see features through production.
- 7.
  
  QA
  
  Quality assurance testing is an important part of the delivery process. At IDG, our QA testers were often able to spot bugs that our designers and developers would miss.

See: Tools & Process

Curse

I worked as a Product Manager at Curse Gaming, overseeing product development for Curse's YouTube MCN, Union for Gamers. While at Curse, I led my team's day-to-day agile workflow, including facilitating daily standups and weekly dev retros, writing documentation, building wireframes and clickable prototypes, and ensuring that designs and development met specs and requiirements. I built wireframes and prototypes using Axure. Meanwhile, my team and I used JIRA Agile to manage our product development workflow and Google Apps to manage scheduling, email, and document management.
Moving Metrics

While at Moving Metrics, we tried a number of different project management applications, such as Basecamp, Redmine, Pivotal Tracker, and Google Drive. We ultimately found a combination of Basecamp and Google Drive to be most effective for us -- the first for collaboration, the second for ideation. With daily meetings rather than weekly meetings, we utilized the same process outlined above for our product development flow.
CoachUp

At CoachUp, we maintained an agile workflow with weekly sprint meetings, weekly development retros, and lots of iterative design work in between. We used Asana for ideation, Trello for task management, Onotate for design feedback, and Google Drive for documentation.
Growth Spark

Growth Spark has always been a champion of two pieces of project management software: Spreadsheets (either through Excel or Google Drive), and the 37Signals suite, namely Basecamp, which it uses for client interactions. Each time that I would start a new project with a client, I would create them a Basecamp project, show them how to use it, and upload all project files to it. Whether the client used Basecamp themselves was a different story, however Basecamp served as an important facet of our internal client management flow.
IDG

At IDG, we used JIRA for all of our project management needs. JIRA proved to be a robust toolkit with support for issue tracking, task prioritization, and code integration. As an enterprise environment with thousands of employees, it was helpful that everyone in the company had access to JIRA. Through role designation and prioritization, employees were able to collaborate on different projects without getting in each other’s way.
Above The Fold

At Above The Fold, we would meet every week to discuss the projects on our plate, how they were going, and to review design and development work from our team. We used Basecamp as a communications platform, both for clients and ourselves. As my first job working with a creative agency (2008), I learned a lot from Above The Fold about the importance of maintaining structured communication with clients, as well as keeping client-consultant expectations realistic. The knowledge I gained from my time at Above The Fold serves as the foundation for my appreciation for Product Management.

I’ve been designing and building apps and websites for 10 years. Hire me to:

Visual Design

I design clean, professional, and consistent interfaces that cater to the aesthetic expectations of the end-user. I aspire to always serve the end-user through an iterative design process based on research, testing, and feedback.

Collapse 

Tools

Photoshop

Font Awesome

Google Fonts

Subtle Patterns

iStockPhoto

Process

Guides

Shapes

Layer Groups

Fonts

Icons and Imagery

Colors and Textures

See: Tools & Process

Note: Tap or click the images below to see an expanded version in a lightbox. Then, tap or click the left and right arrows on images within the lightbox to view alternate designs for each project.

CIO Blogs Mobile

CoachUp Home Page Redesign

BeautyMotive v3

Computerworld Insider Marketing Pages

Moving Metrics v3

This is a landing page I designed for Moving Metrics, the brand-focused side of the BeautyMotive platform. The design was intended to be stylish yet clear in conveying the value provided by the service.

Terrene v2

These are the second round of mockups I designed for the sustainable interior goods manufacturing company, Terrene. Featuring a large, eye-catching image on its home page, the design was intended to pull the viewer in and help them focus on the call-to-action contained within.

Computerworld Skimmer iPad App

Car Care Check

I designed and built the the initial website for Car Care Check (now called Jaze), a service that helps diagnose car problems for drivers. Our design approach was meant to convey a sense of stress-free car-management to folks who may not know a lot about cars or car maintenance (like myself).

BeautyMotive v2

These are a couple of the designs I did for v2 of BeautyMotive's Visual Design. I went with a simple approach with lots of white space and gentle shadows to follow in the footsteps of other beauty and fashion sites with a similar aesthetic.

Computerworld Newsletter

CoachUp Coach Profile

Moving Metrics v1

Backupify

This is a prototype design I did for Backupify at a time when I was vying for a position there. I attempted to take what I thought was a flat and rather dull design and give it life through the inclusion of a human character and bright colors/graphics.

CIO Blogs Desktop

This is the desktop site design I did for CIO Blogs, in advance of the mobile design shown in my portfolio above. The design offered CIO bloggers a cleaner presentation for their content, as well as better bio pages and more focused taxonomy pages.

OurStage Mobile Recommendations

OurStage is a music-recommendation and discovery platform for emerging artists, whose algorithms are based on a music-ratings system. They needed a new web and mobile UI for their recommendations tool. These are several in a series of draft mockups to improve the look and feel of that tool.

MMotive Landing Page

MMotive was an experimental off-shoot of Moving Metrics prior to the creation of the Motive sub-brands. Featuring the once-popular header ribbon approach, this design catered toward young, web-savvy users with its slick shadows, rounded corners, and bright colors.

Boston Academy of English

Growth Spark - Astronauts

ITWorld Help Desk

One of my first design projects at IDG was mobile screens and a landing page for a mobile app called ITWorld Helpdesk - a simple "Magic 8-ball"-type app that would display funny help desk quotes at the shake of the device. Sadly, the app never launched, but the design process was fun.

ViralGains Dashboard

Moving Metrics v2

Building off of the v2 design for BeautyMotive, I designed Moving Metrics' brand-focused site to feature a consistent UI, with lots of white space and bold, bright colors. These are a series of mockups I did for various pages of the marketing site.

OurStage Desktop Recommendations

This is the desktop variant to the mobile music recommendations design above. Users would come to OurStage, be prompted to listen to songs by emerging artists, and then vote on which song they preferred more. The preferred songs would rise or fall in rank based on these votes.

Terrene v1

Uprise Medical iPad Prototype

Uprise Medical (now Centrana Health) needed a prototype of its product, designed as an iPad app. I designed this interface to accommodate both the iPad 1/2 and the iPad Retina, with graphics sliced for each.

BeautyMotive YouTube Channel

Back when Google allowed custom designs on YouTube channels, I designed a series of channel skins for BeautyMotive's YouTube presence. These are two of the more progressive designs, featuring listings of BeautyMotive scheduled programming, as well as hosts for the channel.

CoachUp Checkout Flow

Computerworld Mobile Video

These are a couple of mockups I made to help freemium users gain access to gated video content on Computerworld. The designs echo Computerworld's signature yellow background and blue-button aesthetic.

Mimoco Info Page

BeautyMotive MoMenu

IT News

ChrisBeaman.com

See my portfolio sites from the past: These are mockups from prior iterations of my own website.

Wireframes

Wireframes are important to my design process because they help me to think through my layouts, interactions, and delivery mediums. I take an iterative and collaborative approach to wireframing, making sure that my clients can see and provide feedback on my work as it progresses.

Collapse 

Tools

Omnigraffle

Graffletopia

HTML/CSS

Process

Sketch

Guides

Shapes

Stencils

Rapid Prototypes

See: Tools & Process

Note: Tap or click the images below to see an expanded version in a lightbox. Then, tap or click the left and right arrows on images within the lightbox to view alternate designs for each project.

Collapse

See: Tools & Process

Collapse

See: Tools & Process

Collapse