Avalon Authoring (Smartbook Author view) is a desktop product created for internal and external content authors. It gives authors the ability to highlight important areas of textbooks, create learning objectives and build probes (quizzes) for students to be tested on.
Role: lead ux/ui designer
process
McGraw-Hill already had a content authoring platform in place but it was overly complicated. It involved using three separate programs to author and create Learning Objectives, build probes and track how well students performed. As part of my first week on this team, my Product Manager thought it would be a good idea if I went through the same training process as the authors. I was sent to the three day training. I came back with a fresh perspective on current author struggles and a good idea of why things had been built the way they had.
I was able to compile all of my training notes along with business goals and create a rough workflow of the new Avalon system. My workflow of course wasn't perfect, but it provided good talking points for the key stakeholders in the project and helped to solidify the question in everyone's mind, 'What is Avalon?'. From these discussions the team was able to write and prioritize stories on our Jira board.
I continued to work with content authors, my UX manager, the team's Product Manager and the head of the Seattle office on the workflow. It was decided that Avalon would be built on top of the existing ReadAnywhere desktop experience (to house the textbooks required for markup) and would be developed in a bootstrap framework.
At this point I had mocked up a full Invision prototype with a split screen layout. The textbook would take up half the screen and the authoring tools would be the other half. After talking through it with actual content authors I found that my proposed experience would overcrowd the textbook. They wanted to feel like they were still reading a full ebook. I brainstormed to ways to reduce the authoring experience and came up with a tabbed approach.
Here's the original mockup of the layout that I had created.
This is the layout after we decided to give the textbook more room to breathe. This comp is obviously from slightly later in the design process... but you get the idea.
With backend development started and basic layout decided I worked with my Product Manager to finalize the three main sections that would exist as tabs within the application. These were: Content, MetaData and Alerts. The main sections were decided from talking to authors. The terminology may not make a ton of sense to outsiders but it was what they were used to seeing and they had a good idea of what things should be under each header. I struggled with this concept for awhile, I didn't want to create an application that would take as much training as I had originally undergone to become a content author. I wanted to simplify the experience so that new authors would be able to pick it up instantly. The reality of that was that sometimes systems are already in place that you can't break. The people doing our authoring had been using the same terminology for years and it made sense to them. Since they were my users it should be their decision.
This is one of the processes I worked on with the content authors. These screens allow them to go in, select text, add a new or search for an existing Learning Objective and attach assessment items.
Visual Design
With development now well underway I started on a visual design guide. The challenge here was that we never seemed to have enough developers on our team and sometimes back end devs would end up doing front end work.
Above is a sample of some elements covered in the Style Guide. I also went over column width requirements, icons and typography.