and I'm a product

  • Designer

  • Developer

  • Admirer

A bit about the process I use

Every project has it's own requirements depending on complexities.
This process merely serves as a great roadmap for me.

Requirements & goals

  • What problem does the application or website solve?
  • What goals do users want to accomplish?
  • How does the content context affect user journeys and goals?
  • Qualitative & Quantitative Research

Develop concepts & workflow

  • Brainstorm with my team, or anyone in my vicinity.
  • I am inquisitive by nature and like to ask questions to solve problems.
  • Our team pulls together data and we analyze it.
  • On my off time, I try to think about solutions in a different way.

Information Architecture

  • Card sorting and white boarding
  • Detailed concepts of task flows and navigation(s).
  • UX naming models for objects and actions in the UI.
  • Ensure the team is on the same page and knows how to present to stake holders.

Incorporate visual design

  • Assess competition positioning and investigate visual ideas.
  • Create a set of different wireframe concepts and share with the team.
  • Prototype in HTML/Video to showcase interactions.
  • Present visuals and talk through the solution with the team.
  • Project management & itterate as needed

Hello, I am Joe Richardson...

I'm a product designer living in San Francisco, California. I started my career over 10 years ago, worked for a few in-house art departments, and afterwards had my own design consultancy. Previous to my current position I worked for Get Satisfaction and currently work as a product designer at DNN Software. Creating user experiences, functionality and beauty is not just my job, it's my passion.

View my Works

Portfolio pieces

Content Management: Publishing Feature

DNN Software

I worked closely with DNN's VP of Product, product managers and engineers through the full design cycle, including research, design sprints, presentations, wireframes, prototypes, revisions, high fidelity mockups, project management, QA and release.


We knew that we wanted to create a publishing feature for our content management system: Evoq Content. We studied the market, our competition and started researching. After the product manager created our official requirements doc we decided to hold a design sprint as this was a brand new feature.

Design Sprint

We began by doing a week long sprint design sprint that was attended by the VP of Product, two designers, and two developers. This sprint is patterned after The Google Design Sprints with some variations tailored to DNN's organization. Our UX, flows, and persona findings steered us to wireframes.


During the design sprint, low fidelity design concepts were created and presented to stake holders. After feedback we went back to the drawing board and created wireframes. These evolved until we were happy with the interactions.


After the high fidelity images and interactions were approved, we created prototypes with explicit directions. This way the developers had a very defined blueprint to work from and we didn't have to have as much back and forth during project management.

HTML prototype: https://www.dropbox.com/s/hl2bgcv77fkraq1/publisher-list-view.html?dl=0
(Copy and paste link in browser)

Early InVision prototype: https://projects.invisionapp.com/d/main#/console/2781391/62236839/preview
(Copy and paste link in browser)

Publisher elements detailed:


Publisher includes support for tags, images and social media sharing. Tags are a useful way to categorize content created by Publisher. Content managers use Evoq’s tags to organize content, which in turn makes it easier for site visitors to find what they need. Tags are a feature that’s common across numerous Evoq features.


Publisher includes integration with Disqus, a third-party commenting system used by many websites. To utilize Disqus commenting, users need to create a Disqus account for their organization. From there, they do a one-time set-up via the Evoq control bar.

publisher front page

Publisher auto-generates a “front page experience,” multiple sections of a site: Blog, News, Press Releases, Webinars, etc. The front page includes two slots for featured posts. This is used to highlight most recent (or, most important) content item. Below the featured posts, Publisher provides a paginated, three-column list of content items, complete with the article’s title and a selected image (taken from the article).

Publisher editing experience

Publisher provides the same, easy editing experience that is found across Evoq products. The user creates Publisher content using the WYSIWYG (“What You See Is What You Get”) editor, which allows them to format text and add images and hyperlinks. The editor supports inline image editing, so the user can crop and resize images inline.

Workflow and Analytics

Content created by Publisher ties in with Evoq’s advanced workflow and content analytics. By using workflow, you can create an approval process to have new articles reviewed before they’re published to the site.

Content writers could have their blog posts reviewed by the marketing manager, who’d publish approved posts to the site. Alternatively, the marketing manager could send the post back to the submitter, asking for changes to be made.

In-context analytics mean that marketers have immediate access to key metrics on any page created by Publisher: page views traffic sources, time spent on page and much more.

Social Sharing

Publisher automatically inserts social sharing buttons at the bottom of each article:

  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • RSS Feed

The sharing buttons make it easy for readers to promote content to personal social networks, helping to drive traffic back to their website.

Mobile Readiness

All content created by Publisher is mobile-ready using responsive design. In addition to being mobile-ready to your site visitors, the Publisher user experience is also mobile-friendly. This means that users can create and edit content from a tablet or smartphone.

Joe Richardson - UI/UX Designer


A friends reunion app

I wanted to design an app that made it easier for friends to coordinate a reunion together. I did some research and used my own experiences to formulate some initial documentation. After designing the app I put together a presentation of the design process which I have detailed below.

Information Architecture.

research documents: http://joerichardson.me/assets/projects/documents-re-dux.zip
(copy and paste in browser to download)

For the design I focused more on the user side of interactions when I started. I knew this would be the hardest part to accomplish. I wanted the app to be able to scale from a simple 1 time transaction, such as a dinner, to a full blown destination vacation with friends. The reason my wireframes may seem a bit complex is because this is the fully scaled out version.

Simple User Journey

Linda is trying to find out how to plan a complex destination vacation for an old set of friends. She wants to get everyone together to celebrate a mutual friend’s birthday party. After some Internet searches and chatting with friends, Linda decides to use Re•Dux.

Linda finds the app on the Re•Dux website and is re-directed to the app store where she downloads it.

Using her mobile phone, she signs up for the service with her email and password of choice. She is then asked if she would like to import contacts from Facebook or her email account. Next Linda is taken to an onboarding screen that shows her how the app functions on one simple screen. She clicks get started and the onboarding screen disappears to reveal the home screen beneath in empty state. Linda notices the prompt and clicks the “Create Reunion” button.

She is taken through a simple stepped process of how the reunion will shape up to be. My thoughts on this are that this app is fully scalable to handle a single event on one day, or a full-blown destination vacation over a multi-week period. The intent is to take the admin through the process very quickly and efficiently.

The Stepped Create Process is as Follows:

  1. Would you like to set up travel accommodations for the event? (yes) (no)
  2. Would you like to set up dining options for the event? (yes) (no)
  3. Would you like to display a guest list? (yes) (no)
  4. Import contacts: Contacts are presented from the user’s database, or if empty they are prompted to import from various options.
  5. (Create) or (Cancel)

Now we get to the sign up process. The admin signs up just like the invitees: See the sign-up wireframes I have provided. If they choose to, they can skip this process and begin when ready, but they are prompted to create at least one item for each feature. The admin has inline edit permissions that a typical user does not. Also, the admin has analytics built into their dashboard and the ability to share admin privileges with others.

Overall, my thoughts on the app are that it takes away the pain of setting up by a few people, which normally happens, to creating a crowd-sourced setup/maintenance.


Re•Dux Wireframes

High Fidelity Mockups

High Fidelity Designs

DNN 3rd party connectors

DNN Software

DNN Evoq is an enterprise level CMS software geared towards marketers. Recently, we designed a way for our users to tie into their 3rd party connectors, so that people can easily connect to their favorite apps and software, such as Salesforce, Marketo, Drop Box, Disqus and more.

User Flow

As part of our framework redesign, we created what we call a "persona bar". The connectors can be accessed here. In essence it is a tool bar that slides out when the user logs in. There is a different tool set for each type of user: Content editors, Content managers and community managers and even more granular permissioning that can be set by the site administrator(s). Connectors increase organizational engagement, proven touchpoint data and also provides simpler workflows

Connectors detailed

  1. We decided to use our established accordion pattern to house the information. The decision behind this came from the fact that many api's have different ways of connecting and trying to standardize the visuals in a column grid would be too granular and cluttered visually. A variety of api connection methods are used in the pattern we chose and will not break the frameworks. Instead the panel grows downward to house extra content if needed.
  2. At a quick glance, the user knows if the item is connected as it has the check mark and the icon is highlighted.
  3. When the item is not connected the check mark is not present and the icon is dimmed back.
  4. The dimmed back connect button prompts the user to connect
  5. As part of being an enterprise level CMS, some Evoq customers need to be able to connect multiple accounts, so when more than one account is added the number indicator shows this and the UI container conforms to the process.
  6. Create new adds another connector to the list
  7. On hover and on state you get a tools panel that enables editing and deletion.
  8. This is a sample connector to drop box.
  9. Cancel closes the panel opens a dialogue asking if the user wants to go through with this destructive process, before closing the panel
  10. Save triggers a loading bar at the top of the panel and then closes it with a color flash to denote the new item
  11. The blue bar is used across our products as a stopping point for the interactions of open panels.

Video prototype created with After Effects

LeaseStar Mobile Interactions

DNN Software

The lead product manager for LeaseStar and I were tasked with solving how to bring the robust features of our website template app to a smartphone. We worked with department heads to ensure that the interaction designs that we made were consistent with the product offering. We then brought in the lead developer to go over the interactions to ensure they were feasible. After a few iterations, we went into production.

LeaseStar interaction design Joe Richardson - UI/UX Designer
GoFundMe redesign

UI/UX visual design overview

Spec Project

I was tasked with coming up with a visual redesign of GoFundMe's website with minimal direction. I used my past experience and process to highlight the main interactions. I wasn't presented with much back story for UX, so I researched the nonprofit sector. Below, you can read a breakdown of the interactions.

GoFundMe Interactions

GoFundMe Layout Joe Richardson - UI/UX Designer
LeaseStar Sales Portal

LeaseStar Sales Portal


We finished creating the framework for the website builder that runs on the RealPage proprietary CMS, but needed a way to showcase it to our customers. The sales portal was intended as a time saver for our sales team and as a quick website setup tool.

User Flow

After multiple iterations of the interactions, our user flow became:
Select Theme --> Theme options --> Customizations --> Service Options --> Add Ons --> Wish List
We decided not to fully automate the process as there was concern at the time that it would throw a wrench into the dev team's work flow, so this process became the ownership of the sales team.

User Flow

Interactions in wireframe

After a few meetings and some information gathering, we were able to put together a series of interactions that would show how our team envisioned the process. LeaseStar was to be the newest and greatest of the new product offerings and through it we wanted to offer as many features to our customers as possible. RealPage has a very large set of features and that is one of the major factors that made this project difficult... How to show and offer all of this to a prospect without confusing them through the buying cycle. After some debate, we decided that a step by step buying process was the way to go. The sales agent would have initial contact with the customer, then send them to the sales portal. When the customer went through the sales portal then the sales agent would reestablish contact and would be ready to finish the deal. In parallel, the dev team would be ready to make the site live.

LeaseStar sales gallery wireframes



RealPage has a very large and diverse user base. We methodically designed hundreds of templates to meet very specific personas and decided it would be a great idea to give the user options to narrow their search down for a template instead of just throwing them into a typical pagination system. We went into our user base and researched our users, which led us to the creation of category search sets. We were very happy with the results and it actually helped us define some of the designs that we were on the fence about previously.

Joe Richardson - UI/UX Designer



PCGS is the United States' largest coin grading and collectible grading service. I was contacted by them to help clean up a UX that had gone astray years before. PCGS had never had a designer on staff and as they grew, they had no one to help them grow visually. The previous strategy was to have the developers put new content up ad hoc. The new strategy was to bucket the content properly for ease of use and updates.

This site has a very large amount of content. The strategy we took was to gather all the pages and re-categorize how we would display content. After we came up with a content strategy I started putting together a initial design and flow mockups.

After a design style was chosen we had to think about how to guide users with the new design. PCGS has a lot of older users who aren't very tech savvy and we didn't want to lose them with the new UI. For the first few months we had how to guides for those who might get lost posted on the home site.

The launch of the new PCGS site created a lot of industry buzz and garnered me more clients at the time.

Notable highlights:

  • Larger, modern header with clear company mission
  • PCGS relys on advertising, so the redesign was built to accomodate PPC ads.
  • Defined call to action areas with clear user goals
  • Clean and modern interface with cross browser compliance for non-tech users
pcgs before and after Joe Richardson - UI/UX Designer
Get Satisfaction Community Software

Get Satisfaction Community Software


Get Satisfaction is a world class community software platform with medium business and enterprise versions. I managed the branding, delivered metrics and worked in cross functional teams to help with product iterations, development and more.

Finished LeaseStar app Joe Richardson - UI/UX Designer
Punch Rewards App

The Punch Rewards Project


I had done a lot of previous work with the lead programmer who was working on developing the Punch Rewards application. He reached out to me to help guide the UI flow and design of the application. After we finalized the app, he also hired me to help design branding and marketing materials.

The Punch Rewards App

At the time there weren't a lot of punchcard or coupon style apps out there, so we were on the forefront of the market. Our approach was to make it as quick and easy as possible. I was also hired by the company to do marketing materials as the user experience would tie heavily into people picking up info cards, coupons and trifolds (pocket sized) at ocations that offered the app.

Joe Richardson - UI/UX Designer

Feel free to Contact Me anytime

Contact me to chat about UI/UX opportunities, technology, film making, comedy, or anything in between.

Joe Richardson
(619) 972 - 4212

Product Designer (UI/UX/Visual)

©Copyright 2014 / All Rights Reserved

Who Am I?

I am a life enthusiast who enjoys his wife, son, work, creativity and surroundings. I've always been a curious person and enjoy all that life has to offer.