Learning is one of our core values as a company. We believe in trying new things, listening closely to feedback, measuring progress, and constantly improving how we communicate. This year we set out to solve one of our greatest challenges: explaining our highly experiential program within the constraints of a digital medium.
Startup Institute UX designer, instructor, and web design track alumna Lara Cavezza recently unveiled a new program experience page focused on five key objectives:
- Clearly explain our program to prospective students
- Increase site engagement / amount of time spent on our site (lower bounce rate)
- Bring in new leads (see the two calls to action to download content)
User Experience Objectives—
- Create a more human and empathetic user experience
- Be at the forefront of advancements in interactive content and UX development
[bctt tweet="Introducing @StartupInst's new full-time program page w/ interactive content, designed by @LarCavezz" via="no"]
Interactive content is slated to become a big trend in 2016, allowing businesses to create more engaging web experiences and generate high-quality leads. And, for VP of Marketing, Dana Córdova, it also makes business sense:
Explaining our program more clearly to website visitors means we’re more likely to attract the right candidates. This saves the prospective student and our admissions team time—and, creating an interactive, online experience gets us one step closer to the realities of the program.
[bctt tweet="Explaining our program more clearly means we'll attract the right candidates, says @dwcordova"]
Q: Tell us about the inspiration for the program page. What did you want to accomplish in building it?
A: Our full-time program is different from other education bootcamp models because it teaches more than just the technical skills people need to launch a new career. But, we’ve never done a great job of explaining the intangibles on our website.
Between networking and job placement support, mentorship, career development and emotional intelligence workshops, projects and hackathons, there are a lot of components to the program that contribute to the success of our graduates. I wanted to create an interactive experience that would convey the transformative nature of the program with the specifics of our curriculum. For instance, Talent Expo—our program’s capstone event—is a huge part of why our students get hired so quickly. However, taken out of context, alone in our top navigation, it wouldn’t make a lot of sense to new site visitors. The context of what our students accomplish leading up to the big event, is a large part of what makes it so meaningful and effective.[bctt tweet="The context of the program experiences are what make them meaningful + effective— @LarCavezz"]
My goal was to design a web-based experience that would give our visitors the opportunity to step into the shoes of a student. The interactive timeline takes them on a journey through the eight-weeks—a small peek into the life of a student during our program—while explaining those intangibles that make our program unique.[bctt tweet="My goal was to #design a web-based journey through our program, says @LarCavezz"]
Q: Where did you find design inspiration?
A: I found design inspiration on several sites, including the beautiful use of the timeline on the MR Associates site and the delightful section transitions on the MailChimp annual report of 2012. I used the aspects that I liked most from each of these pages as a jumping-off point, and then made it our own from there.
Q: What was your ideation process like?
A: My ideation process included mapping out the information we wanted to convey to prospective students, and what the main activities are that happen during each week of the program. A lot of the content was taken from the program guide, but I wanted to reimagine it in a way that would be digestible, and fun to view on the web.
At the beginning of the process, I spent time talking to alumni about what stood out to them during each week, and what parts of the experience they were most surprised to discover. I considered the questions that our prospective students ask most frequently—Will they get real-world experience? Will we help them to find jobs after the program? Then, I began mocking up each week, checking in with people who knew little about our program to see if my design made sense to them and if the storyline was engaging.[bctt tweet="I wanted to reimagine our content to be digestible + fun to view on the web, says @LarCavezz"]
Q: How did you validate your design choices?
A: Feedback from team members and alumni was extremely helpful to me throughout the process. Still, the most valuable feedback came from people who know nothing to very little about our program. Starting with my initial mockups and through to launch, I was constantly sharing new ideas with friends and family members. Their reactions and feedback helped me to know if I was helping them to better understand our program.
Q: What was your greatest challenge?
Q: What was most fun about it?
A: Honestly, it’s the same answer as the most challenging—getting those small animation nuances, and timings just right. I loved seeing my original mockups come to life through animation. Watching users becoming delighted and surprised when the timeline zooms in and out was both fun and rewarding.
Q: How will you test and optimize performance? How will we know that the page has accomplished our goals?
A: As a web designer, my work is never done. We’ll continue to test the page with alumni and prospective students to ensure both groups feel we’ve communicated the experience of our program accurately. We want to make sure that visitors stay engaged on the page, that their questions are answered, and that it entices them to learn more by downloading our Outcomes Report and Program Guide.
We'd love to hear what you think of our new interactive program experience page. Take a look, and leave us feedback in the comments below or at email@example.com. [bctt tweet="As a #webdesigner, my work is never done, says @LarCavezz #webdesign #uiux #interactivecontent"]