Best UI/UX Work

Event Registration

Background

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

Solution

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

ereg-two-banners

ereg-left-only

News Manager

Background

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

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

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

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