Project Overview

Background

This is actually a pretty old project with a more dated design that began in 2010. I decided to include it in my portfolio not because I was particularly fond of my UI design, but because it was one of the first projects that I really took the lead on UX with. Villari Martial Arts wanted to build an online instructional video site so that people in areas not near dojo locations could participate in course work and learn martial arts.

Challenge

To plan the information architecture and design the UI for an online video learning program.

Process

Research

After the initial meetings with the client in discovery I the began user interviews. There were 4 types of users that would be utilizing this system: students, parents, instructors and site admins. From the discussions I had I was able to put together some personas for the different groups and use them to identify the most important features that they would be working with within the application.

The site itself would be broken into 2 sections: a public-facing informative site for non-logged in users, and a dashboard area tailored with information related to the user type of the individual. When you weren't logged in a user could learn more about the programs and site mission, learn about the instructors of the site, register with the site, purchase items from the store, and view testimonials and other marketing material. Logging in would bring a user to their dashboard where they could view community activity and social feeds, site news and updates to programs they were enrolled in, view/edit their account info, view where they left off in their current curriculum, view any lessons available to them, or perform tasks specific to parents and instructors.

Wireframing

After the content was established I created low-fidelity, interactive wireframes user stories for every type of user across the site. I then performed user testing with admins and potential site users to get an initial feel for the accuracy of the site hierarchy and user flow. After feedback was recorded some changes were made to the wireframes and user stories, and then I moved into the visual design phase.

Landing page for new visitors
A non-logged in screen for viewing a sample lesson

UI Design

After the wireframing and user stories were complete, I first made photoshop full-page mockups of some of the key areas of the site. The color palette for the site came from Villari's branding package which were black, red and gold. With the approval of the overall look and feel, I then provided them with mockups for the different modules within the site. Once the visual design was complete I created an html styleguide for the developer who was doing all the dev work, and I continued working with him throughout the development portion of the project to address the need for any new design or component corrections that came up after end-of-sprint demo and testings.

Dashboard design after logging in
A category of lessons page
Individual lessons for logged in users
Back to Portfolio