Best UI/UX Work

Event Registration

Background

  • Was in dev for over a year before it was completely scratched
  • Started over with a 3 month deadline
  • I was brought in at end of the dev cycle
  • Launched February 2013

Problem

Structure, layout, front-end output was already in place, which meant I couldn’t do much in terms of workflow

ereg-unstyled

Solution

Focus on UI – typography, hierarchy, contrast, color, etc to improve usability and help guide the user

ereg-mobile ereg-summary

Problem

Front end layout was designed to fit within a very wide container and wasn’t flexible

  • “We designed this for pages with no sidebars”
  • This is not possible to control – over 1000 schools using this
  • We give our clients complete control over the content and layout of their site
  • The left side bar houses the second level navigation
  • We are selling more responsive sites than fixed-width sites

Solution

Change layout based on screen-size, container size, and side bar presence

ereg-two-banners

ereg-left-only

News Manager

Background

  • Allows admins to write news stories, assign categories and user permissions
  • One of our oldest products
  • Was brought in toward the end of the dev cycle
  • Launched November 2012

news-before-after


Problem

In the News Post Manager screen, admins see a list of all news posts, from which they can filter and only see drafts, those awaiting approval, etc. The filter buttons didn’t stand out and they looked like other action items on the page

news-old-filter

Solution

Created new filter button styles

news-new-filter

Social

Background

  • Internal private social networking where admins can post updates, attach files and links, comment and message other students, faculty members, and parents.
  • I was brought in after they were unhappy with the design
  • Launched July 2012

Problem

There was no visual hierarchy – everything was given a similar treatment

social-before

Solution

Added icons, altered type, added whitespace, introduced color in order to visually group together the different elements on the page

social-activity


Problem

Relies heavily on avatars/profile pictures. We can rely on teachers and admins to upload their own photos, but what about classrooms & groups?

Solution

Created 13 default icons for admins to choose from

lms-icon-science lms-icon-ruler lms-icon-pencil lms-icon-music lms-icon-math lms-icon-languages lms-icon-group lms-icon-english lms-icon-drama lms-icon-computer lms-icon-athletics lms-icon-art lms-icon-alumni

LMS

Background

  • Currently in Development, set to go live in June 2013
  • Huge project involving the entire dev team
  • Redesigned 9 of our products and fit them into one
  • Started with Photoshop files – initially to WOW the board, then used it in stakeholder meetings to sell the concept

lms-first-pass

Problem

Too many levels of navigation/information (4 levels at the top plus an account bar at the bottom)

Solution

Visually group classroom level navigation according to function

Take account bar and move it to the top right in the form of a drop down

lms-shred

lms-accountbar lms-settingslms-calendar

Problem

While this new layout so far is clean and easy to use, people will not be happy that they are losing the customization they once had

Solution

They can update the top header with their school logo and choose a background color

We implemented themes so that each teacher can pick one to customize their class

To provide customization on top of just a school logo, admins can choose from ten themes to apply to their classroom or group space.

Red themeBlue theme


Problem

Many schools now have 1-1 iPad programs

  • icons will be fuzzy on Retina displays
  • needs to properly display on all size devices

Solutions

Retina icons!

lmssprite@2 lmssprite

Responsive!

lms-home-mobilelms-calendar-mobile

Problem

Current Discussions are not user friendly and posts are buried 3 levels deep

old-discussions-boards old-discussions-topics old-discussions-posts

Solution

Pull out the first 2 levels on the main page

new-discussions

Leave a Reply

hello.

I lead design at Automattic. I enjoy mountain biking, snowboarding up and down mountains, and eating good food.

I’ve had this site for 14+ years and update whenever the mood strikes. I treat it as sort of a playground. I write down thoughts about work, keep track of things I like, places I’ve been, and other random things.

Take a look around and say hi.

get an email when i post