iD Tech

At iD Tech, kids and teens of all skill levels discover coding, AI, machine learning, video editing, robotics, and game design, developing the in-demand skills needed to compete at startups, non-profits, and titans like Google, EA, Facebook, and Apple.

MacBook

Redesigning the website

I led the redesign of an ecommerce website responsible for 90% of the companys revenue. The reasons for the redesign were:

• Elevate our web presence to match the camp experience
• Decrease site confusion, while improving information architecture
• Make the site mobile friendly

IMG_0572

Research/What we uncovered

We conducted Value Prop exercises, spoke with parents at Family Showcase, where family and friends are invited to see the students projects, and listened to conversations with the Client Services team. We uncovered some pain points and new opportunies in the research we conducted:

• Too many options make it hard to choose the right course
• Parent's didn't understand the lingo and certain tech terms
• Couldn't register more than one student at a time
• Couldn't register multiple courses for one student
• Too many CTA's would confuse the visitor
• Visitor did not feel comfortable with the high price point
• The value of the camp was not clear
• Confused between the different programs offered

before

Screenshot of the site before the redesign

Site Flow

We took a step back to rethink the site structure which allowed us to see which pages were no longer necessary and how to progressively disclose the right information through the course of the users journey.

We looked closely at Client Services call script and decided to base the flow of the pages and our conversational design on it.

Sitemapv2

Wireframes

Wireframes

Once we agreed on the new architecture of the site we then created wireframes. The wireframes were printed on large posters and shared thoughout the office so that others would be able to write directly on them and give their feedback. Once we finalized the wireframes we then prototyped the interactions in InVision, gathered feedback and made improvements.

We took the mobile first approach to ensure we were delivering what's essential. If our site was good on a mobile device, it would translate better to all devices.

Wireframes

Design solution #1: Complexion reduction

Less clutter with the use of bigger, bolder and blacker headlines. Colors are also used sparingly, with tons of white space.

Path Page

Design solution #2: Progressive disclosure

We maintained the focus of a user's attention by reducing clutter, confusion, and cognitive workload. This improves usability by presenting only the minimum data required for the task at hand.

I worked closely with a designer on our illustrations by providing ideas on the style of characters, colors, and composition of the art.

Alexa Cafe Page

Mobile experience

Mobile experience

We emphasized finding the perfect course based on your location in mobile as simple as possible. Although we iterated on the availability charts multiple times, visitors are able to get to the course availability and purchase very quickly.

As a result the conversion rate on mobile devices is up 11% from previous years.

Overall, we've increased organic conversion by 23% by clarifying the value prop, allowing the user to register multiple students and courses at once and by improving the legibility of the availability calendar.

iphonex1