As Alice Cooper put it so eloquently, school may be out for summer, but it’s most certainly not forever. While kids are busy with summer activities and teachers are taking their much needed breaks, some of us have been busy. With our design help TCI, a K-12 publishing company, released their new online tools for students and teachers, primed and ready for the 2012-2013 school year.
Though not your average curriculum, TCI staff has once been quoted saying,
unofficially, we’re out to change the world and the way students learn.
- Maria Favata, Director of Curriculum, TCI
The new online tools were created to meet that goal. So – maybe going back to school won’t be so bad?
The Request
When TCI approached us earlier in the year they were looking for, “support in creating a design vision for their online student subscriptions.” They had a functioning system, but wanted to make it more mobile friendly – specifically tablets (with the rise of mobile devices and the move towards eTextbooks, they wanted to be proactive instead of reactive). Additionally, they wanted the flexibility to add more interactions and elements, but were stuck with the limitations of their current site. With an in-house development team at TCI, it was left to our design team to deliver the goods.
Design Strategy
In looking at our client roster, our work has addressed everyone from young adults to aging seniors. K-12 was a new world for us. Coupled with the fact that TCI was located out-of-state (and a new client), we needed a stable foundation. Enter the Discovery Day.
Discovery Day
The discovery day, or what we’ve aptly named Iteration-Zero, is aimed at refining our project goals and set the protocol for a fruitful working relationship before we start any work. To us this meant a trip to California to meet TCI’s stakeholders, learn about their company, processes, users, and project goals, later defined as:
- Allow for more interactions per lesson
- Provide a sense of place while using less of the screen
- Allow teachers and student to communicate within the subscription
- Provide a program level resource banks (like an appendix)
Armed with this information and flowing with ideas, we launched into our strategy to help them reach their goals.
Researching, Thinking, Sketching, Wireframing, Rinse, Repeat
From our discovery day I had a list of pages and elements that we needed to [re]consider, strategize and [re]design. I also had a lot of information about TCI’s world, but I wanted more. I wanted to know what other online publishers are doing: or, try to imagine how teachers handle their scores for classes and research online (and print) gradebooks: or, think about the sort of interface a 10-year old would prefer over a 14-year old (my 14-year old niece will tell you there’s a HUGE difference). I took a walk down memory lane to try to remember what I was like as a student and what would have caught my interest.
Sometimes putting yourself in the shoes of the user is a far fetch, but in this scenario I actually did have experience.
Albeit, my computer use as an 11-year old involved playing Oregon Trail on a Commodore, but I digress.
And while I haven’t been a teacher (yet), my 16+ years of school plus the handful of teacher friends and family I could ask provided insight into what they need and wish they could have to make their jobs easier and more efficient (and effective).
In other words, I wanted to glean as much information from as many places as I could. My goal was to go in having the whole picture; from students-to-textbook publishers. I needed to understand how others were effectively (or in-effectively) handling the same issues TCI was facing. My mission wasn’t to make a nice-looking design, but to understand what might be a more effective design for the user.
With the first redesign, I spent a little more time thinking, sketching and coming up with ideas. As I worked down the list, I started the process again; researching, thinking, sketching, wireframing. Repeat. As the process continued, the researching and thinking became a less prominent part of my time and became embedded into my designs. I still sketched ideas, I still wireframed a few options, but I was armed with the knowledge (PLUS a better understanding of TCI) that I didn’t have before – and it all became a little easier. The more I worked on the tasks for TCI, the more I understood them AND their user’s needs. The elusiveness of this new age group and service had worn away. It all started to make sense.
Colorful Cues + Exciting New Design = Awesome Interface
In the visual design stage the form is built, but the emotion is not. It’s even more important in this stage to understand how we intend users to interact with the page – knowing we could guide users to specific parts of the page, interactions, or through a process by how and where we add colors and design elements.
We knew that the old app was not as interactive as they intended and tools were being underutilized. How could we guide them? We saw this as a both a design problem and also a knowledge problem. How were teachers to know, for a example, that they could view scores online if there was no introduction to the page? Why would a student use the online tool if it was laid out just like the book – a static page on their computer?
Another important element of any visual design stage is understanding the client in order to effectively establish a design within their brand identity. Coming from a print publishing background, TCI had a strong handle on their brand and style guide. In short, the application was separate from their marketing site, but it was imperative that our visual design kept the TCI look.
Lastly, we couldn’t forget one of the end-goals of creating a responsive design. This meant as we were adding visual elements, we needed to keep in mind how and what environment they would be used. Elements like links, buttons and icons that are easy to select with a mouse, had to be big enough and spaced appropriately enough apart to easily tap with a finger.
Our design strategy sought to resolve these issues, and we introduced new ideas that would inform and invite the user into effectively utilizing the app, instead of scaring them off:
- Helpful tips: welcome notes and tool tips as easy ways to inform the user, and not be intrusive.
- Grouping correlated elements: Identifying elements that belong together to raise utilization and efficiency
- Fun interactions: Taking advantage of being digital and incorporating interactions for items that in print are more static. This meant instead of table of contents to welcome a student, we created a more inviting homepage that was informative (giving lesson assignments) and interactive (students could bookmark lessons and quickly go back to them).
This idea carried through in the chapter homepages as well, where we added more helpful information for a student with assignment dates, section activities (icons with notebook, stars) and their progress in activity and score.
- Less words more visuals: Another issue they blamed themselves for was being too wordy (they are teachers after all). A website can be daunting to a student who’s faced with words to explain everything. To combat this, we introduced visual elements like icons that could do the talking for them and keep the page clean and simple. While new and different, users are quick to learn, and patterns become more recognizable and easy to pick up.
Demo Time
At Planet Argon, we are lucky to house a design and development team under one roof; and we take full advantage of it, collaborating on projects from beginning to end and eliminating any design versus development silos that bog down the process. Even though TCI had their own in-house development team that didn’t change our approach.
As we worked our way down the list, finishing designs, our work wasn’t done. One thing we’ve learned by having our own in-house design and development team is that initial assumptions and expectations change as designs enter the world of implementation. We not only wanted to ensure that the components and functions of the app we designed maintained their integrity, but also be available to TCI if those assumptions needed to be challenged, whether it was to re-strategize an element or redesign a piece to be more suitable for the development.
To enable our testing, TCI used their demo site, to upload the designs into a workable app. As designs were approved, TCI’s team would work on development. This gave us something tangible to review and discuss with their team, and make adjustments as necessary.
The result
At the end of the day, we could count the number of completed screens, pages, interactions, and new designs to TCI’s online subscriptions for teachers and students. But realistically, the numbers that really matter are those of the users; how many teachers will use this app with the new features? did the utilization of the app increase? will students like interacting with the new pages?
School’s out for summer, but soon enough those pesky back-to-school ads will remind us the school year is just around the corner – and then our design will have to stand the real test. We are excited, nervous, and curious to hear what the teachers and their students think, and more importantly, see what the data presents. Were we successful at knowing (or remembering) how to engage a student? Do we really get what teachers need? We think so.
Read more about our work with TCI.