Voxy Course Guide Page

Fall 2013

What is the Guide Page?

The Guide Page is the main home screen for Voxy students – it is a dynamic interface that allows students see an overview of their progress through each unit, start new lessons, schedule private tutoring sessions, and review what they’ve learned. 

About Voxy

Voxy is a language learning platform that teaches English as a second language with real world content like news articles, unscripted dialog, and video clips. Each Unit is comprised of a certain number of Lessons created from this content. Students may have several active units at any given time.


My Role

Lead designer on a cross-functional team with 3 developers and a product manager.

Strategy, Usability, Wireframes, Interaction, Visual Design.

Defining the Business Need

I believe every project needs to start with measurable and achievable goals and everyone on the team needs to agree on what those goals are.

The business goal for this project was to increase the number of active users.

Having a single, achievable goal will simplify the decision-making process for the duration of the project.

We defined 'active users' to be 'users that complete at least 1 lesson a week for 3 consecutive weeks.

This first step is crucial, without it we won't be able to measure the success or failure of the changes we make.

Final Mockups for Guide Page design

Understanding User Behaviors and Needs

A team that is aligned on who the end user is will be able to make consistent decisions – both as individual contributors and as a group.

The more we can narrow down our target to a specific market, the easier it will be to design a user behavior change that meets both the business and the user’s needs.

One of the challenges I faced during my time at Voxy, was designing for many types of students at the same time. We designed for zero beginners just starting to learn the basics all the way to fluent speakers looking to keep their skills fresh. We were also attempting to simultaneously appeal to the casual student and to the goal-oriented power users.

When your users’ behaviors and needs vary too widely, it becomes unwieldy to accommodate for everyone and at the very least will lead to an inconsistent experience.

Technical Requirements

The third component of kicking off a project is to understand any known technical constraints, needs, or requirements. By establishing this boundary, we avoid spending time designing experiences that the dev team, for any reason, doesn’t have the time or ability to build.

We anticipated minimal-to-no changes to the core functionality for this project and should be able to complete the work with only front-end resources. 

Depending on the project, the technical needs are likely to evolve as we get closer to a solution. One of the benefits of working in a cross-functional team is that ideas that are technically demanding can get identified and evaluated earlier in the process. 

Identifying Assumptions

Identifying assumptions at the beginning of the product development cycle enables the team to mitigate hidden risks before getting to work. I find the practice of mapping these assumptions on a likely/not-likely, high-risk/low-risk matrix to be most helpful.

The best method for validation is dependent on what the assumption is, the type of product/user, and available resources.

The biggest assumption we had for this project was based on data that showed students who actually begin a lesson are more likely to become an active user.
We hypothesized that by fixing usability issues on the Guide Page, more students would start their lessons and our active user numbers would increase.

A danger of using data and metrics for validation is that you can see what is happening, but not why it is happening.

Usability Testing

Usability tests and studies provide insights by observing how users are actually using a product. I have seen usability testing be especially compelling for building empathy with team members that don’t often get to see real people using the product.

With usability testing observations and data analytics, we were able to identify seven major issues with the old version of the Guide Page including underutilized spaces, extraneous information, and unclear/competing calls to action. 
We found that our students were confused when landing on this page. They don't know what to do first. Many click on the large image, which isn't a clickable area. Other frequently useful actions are hidden behind poorly executed interaction patterns.



Summary of observations from usability testing

Summary of observations from usability testing

Turning Observations and Assumptions into Ideas

A well run brainstorming session, one whose participants have both a stake in the project and have an excellent understanding of the user, has the potential to generate many great ideas for a project. We can also find good ideas from watching what users are actually doing with the product during usability testing and observational studies.

Bringing the team together when generating ideas can help align team thinking and shared knowledge. It will also build trust within the team and help set expectations for stakeholders.

I made this chart to visually represent the clickable areas on the old guide page. The chart serves as a conversation starter, enabling the team to discuss and prioritize possible actions a student could take on this page without the distraction of visual design and layout. 

I made this chart to visually represent the clickable areas on the old guide page. The chart serves as a conversation starter, enabling the team to discuss and prioritize possible actions a student could take on this page without the distraction of visual design and layout. 

Visual Hierarchy Observation: To start a lesson on the old guide page, there is a single button taking up about 1% of the screen, that the student can click. 
Direction 1: Can we encourage the student to start a lesson with changes to the visual elements and cues?
Lesson Resource Assumption: Students are dropping off because they aren't interested in the resource (content) for the lesson displayed.
Direction 2: Can we highlight the flexibility of the content to improve the experience without becoming overwhelming?
Motivation Observation: Students can't see their progress through the unit. They don't know how many lessons they've completed or how many more before the end of unit test.  
Direction 3: Can we motivate the student to start a lesson by setting expectations and providing context for the lesson within a unit?

Sketches of early ideas for guide page

Sketches of early ideas for guide page

Sketching to Explore Ideas

I often start off the process of exploring designs with pencil and paper to capture ideas as quickly as possible. 



Do The Easy Thing First

If there is an obvious and easy way to test an idea, it usually makes sense to try this first.

In this project, the obvious and easy thing was to increase the size of the 'start lesson' clickable area to include the entire image and see how many more students start a lesson. 

Wireframing for Content and Layout

The wireframe phase of a project is an important time to refer back to the customer journey and user flows from earlier. Thinking through every possible scenario for every type of user is the only way to ensure we have considered all the states of a feature, uncovered any dead ends, and identified edge cases. This sounds like a lot of work and sometimes it is. However, it is always less work than the time it takes to fix a failing feature.

Below is a sample of wireframes showing 2 of the directions we explored for this iteration of the Guide Page. Both of these layouts are addressing our 3 main objectives:
     1. A visual hierarchy aligned with the desired user behavior
     2. A more obvious cue that students can choose a new resource for their lesson
     3. To show information about the lesson within the context of the Unit

With wireframes, showing the context of a user’s experiences before and after will ensure that everyone is on the same page during feedback and review sessions.

Guide Page Wireframe 1 – showing condensed unit tracker, expanded lesson detail, and gallery of resources

Guide Page Wireframe 1 – showing condensed unit tracker, expanded lesson detail, and gallery of resources

Guide Page Wireframe 2 – showing expanded lesson details and separate unit tracker

Guide Page Wireframe 2 – showing expanded lesson details and separate unit tracker

Visual Design

In my ideal process, the Visual Design phase should be a straightforward application of styles found in a living style guide. Any new elements that aren’t covered in the style guide should be addressed within the context of the product as a whole to ensure brand and interaction consistency.

Myself and our other Product Designer were the owners of the Brand and Style Guides used for all web, iOS, and Android applications. We were responsible for creating, implementing and maintaining standards during Voxy's complete rebranding in early fall of 2012.
The new Guide Page contained several new elements to style, including the new Unit Tracker and unit header on the main container. 

The Results

A project isn’t over at release, it is over when we have determined whether or not we met the goal. There are several methods I like to use for this, including working with developers to ensure we’re tracking the right data, conducting usability tests on the live product, and working with customer service to collect issues and feedback from users.

Start Lesson
When we increased the clickable area to include the entire image and lesson name, our analytics showed a spike in the number of both new and returning students landing on this page who actually started a lesson.
Choose Different Resource
Images are powerful. During usability studies we observed student after student being delighted at the idea that they can control the content of their lesson. 
Unit Progress
I replaced the Lesson Progress Tracker with a compact Unit Tracker showing progress through the 18 Lessons and End of Unit Test.

Customer service reported a decline in students seeking help to understand when their unit is over and how they can see what lessons they've completed.