Using Interactive Content to Tell the Startup Institute Story
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:
Business 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"]
Organized as an animated timeline using JavaScript, the new page allows visitors to visually experience how the various aspects of our program come together to deliver on our promise of a new career.
To build foundational skills, Lara took our part-time Intro to JavaScript class over the summer, and continued to grow her knowledge base in tandem with her work on the project. I recently sat down with Lara to learn more about her inspiration and the design process:
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: You learned JavaScript in one of our part-time classes in order to tackle this challenge. Can you talk about your process learning to create interactive web content? To what extent was it during the class versus self-study?
A: Yes. The Intro to JavaScript course gave me a foundational understanding of JS. Beyond the course, I did do a lot of self-study to build those skills to the point that I could execute on my vision. If you’re ready to dig into some of the more advanced nuances of JavaScript, I recommend JavaScript: Understanding The Weird Parts on Udemy. This parallax best practices article guided me in designing and coding the animations so that they’d be optimized for better performance. I also owe a lot of thanks to our director of technology, Bach Bui, who helped me develop my skills on the job.[bctt tweet="Advance your skills with #JavaScript: The Weird Parts by @Udemy, says @LarCavezz"]
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?
A: The most challenging thing for me was getting the timing of the animations right. I read a great article called Five Ways To Animate Responsibly, and one of the principles was to make your animations four times faster than you think it needs to be. The article says that when we spend a lot of time working on an animation, our sense of time becomes distorted. Just as the article predicted, I would often think that my animations were timed perfectly, but when I’d watch someone else scroll ten times on their mousepad just to get to the next section, I’d realize that they needed to be a lot faster.[bctt tweet="Make your #JavaScript #animations 4 x faster than you think they should be, says @LarCavezz"]
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 info@startupinstitute.com. [bctt tweet="As a #webdesigner, my work is never done, says @LarCavezz #webdesign #uiux #interactivecontent"]