Step 1: Understand Our UsersThe first step I took when tasked with the Health View was to gain greater understanding of our end users. I led the team in crafting some traditional ux deliverables: crafting empathy maps, user scenarios, and fleshing out personas. We took it a few steps further, however, traveling on a week-long customer visit to interview customers and determine pain points with our current software. The in-person interviews were valuable, giving us first-hand accounts of user scenarios and pain points in current implementations.

Step 2: Create Some StuffOur initial research allowed us to align around a key goal: creating a single interface to diagnose and remediate network problems. After gaining alignment on the goals of the project, I developed low-fidelity sketches and wireframes to demonstrate big picture navigational ideas. As you see in the sketches below, different types of views were explored. After interfacing with users and stakeholders, the map-based approach proved to be the most promising in context of our users' deployments.

Step 3: Prototype, Test, and RefineOften the most enjoyable part of the process, we began prototyping early. I started with creating high-level navigational elements and connecting them to illustrate user flows. We created some simple prototypes and tested them with our users, culling learnings that we baked back into the final solution through contextual inquiry techniques. Here is a clip of one user working through an early version of the interface:

Step 4: Visual and Interaction DetailsThroughout the process, we were constantly trying new visual and interaction design paradigms. I worked closely with the visual designers, and my background in Visual Design helped to guide them towards a cohesive design language. I prototyped detailed micro-interactions, as well, testing ways to improve ease of use through advanced user interaction. Prototyping in front-end languages (html, css, and js), eased implementation on the development side, and our developers really appreciated the help ;)

Overall, the project has been well received! Our users have appreciated the attempt to structure the interface towards guided workflows:

Step 1: Define the UsersOperating under a startup budget, I was tasked with gaining learnings as quickly as possible. I worked with Product Managers to define our personas: cash-strapped, tech savvy youth who want to find quality goods at a bargain.

Step 2: Test Lo-Fidelity PrototypesI led guerrilla usability studies to determine whether the high-level information architecture was effective. The navigation of the app is anchored in the top and bottom navigational bars. After testing 20 users representing a cross-section of our persona, we had enough data to validate the navigation architecture. We implemented the navigation, then moved on to refining the visual design language and interaction paradigms.

Step 3: Create Visual Design LanguageAfter defining the structure of the app, I moved on to creating a consistent visual design language. I created a typographic structure reflecting the hierarchy of the app, and a restrained color scheme to draw attention to the action buttons.

Step 4: Hi-Fidelity Prototyping and Micro-InteractionsWith the structure of the app in place, I designed transitions and micro-interactions to delight users as they perform complex tasks. Here are some of the final designs:

Step 1: Define the UsersThe first step to take in this project was to engender empathy with our users. Students have a lot to balance between school, after-school work, social lives and extra-curricular activities, among others. I wanted to make sure that our interface made their lives easier and spoke to them in a design language they could relate to. I worked with cross-functional teams to create these personas:

Step 2: Create Some StuffGreat, now we know who our design is speaking to. Let's think about some of the most common use cases for those users: finding a place to take a test, booking a test at that location, and viewing past tests are some of the most important. We developed workflow diagrams and wireframes for all key use cases, and then built around the base. Building around the "finding a place to take a test" scenario, I was able to apply the search interaction / workflow I designed there for adjacent use cases. Here are wireframes I designed to address an adjacent search scenario: as a teacher, I want to find and view my students' test results.

Step 3: Design LanguageCool! Now we have some intuitive workflows. The next step is to craft a design language that speaks to our users. Education connotes many adjectives, yet we settled on a few to use when defining this interface: fun, yet formal. To craft the design language, I start with the building blocks then build out from there. Specifically, I start by applying color, typography, and imagery to previously conceived workflows.

A success! Prior to our project, ETS was a stale brand that didn't connect with the user base. The prevalence of Helvetica and stock photography gave the web experience an institutional feel, a feel that students couldn't connect with. Our project was so successful that the company decided to expand this sub-brand's experience to other sub-brands.