DESIGNING THE FEATURES

Deep diving into each part

Some of the features of the eLearning tool were more challenging to create, one of them being the courses and course creator. When designing this part, I started the sprint by conducting more in-depth research, this included everything from exploring specific design guidelines and recommendations to existing design solutions. On existing design solutions I conducted an analysis where I explored;

• the thoughts and reason behind that design (how did they structure the hierarchy? why did they choose these buttons? how was the placement of elements? how was the storytelling? etc.),

• how the user would interact with these systems

• what was or was not well-designed from a usability point of view.

Researching and analysing different design solutions

Creating information architecture and iterating over the design

After completing the in-depth research I moved on to creating a sensible information architecture. I started by organising the information from user stories and specification. I identified what information could be grouped together, where it sat on the visual hierarchy (high, low) and how to structure it so the user would be guided through the flow.

Course Management

In order to create a new course the administrator needed to first create the modules and assessments. On the course creation page an administrator then could add modules and assessments from the modules and assessment libraries. Based on this requirement, I started creating the architecture for the course creator. I divided the screen into three parts; Course information, course content and assign students.

The first part, course information, is covering basic information regarding the course. This included course title, course description, start and end date, categories (tags) and cover photo.

The second part, course content, is where administrators select content for the course. They would choose to import modules or assessments by selecting these from a checklist. Once the modules and assessments were imported, the order of which they appeared could be rearrange.

The third part, assign student, would be where administrators could add students to the course. This part of the screen needed to provide flexibility, as administrators should be allowed to select individual students or groups of students and also exclude parts of a selected group. By dividing this intro three tabs; all groups, selected, and excluded, administrators could not only search and select students or groups or students and exclude parts, they could also easily get an overview of each area.

Exploring different design 

Modules and Chapters management

This screen was divided into two sections; Module information and Chapter.

The Module information section contains very similar information as the Course information section from the Course Creator Screen, so it made a lot of sense to use the same design for this section as well. The next part of the screen was Chapter. I needed to find a way to guide the administrator through the process of creating a chapter within a module. It was important to keep it as simple as possible and avoid including unnecessary actions or clicks. I also wanted to give the administrator the possibility to easily overview chapters already created. As one module could contain more than one chapter, it was at the same time important to be able to hide the content of other chapters. One of the first designs I created was an overlay where the administrator would create a new chapter and then click save to go back to the module page. Based on feedback from the developers, I changed this design. Instead of an overlay the administrator would stay on the module screen and here be able to expand and collapse each chapter. Between each element of content in a chapter a plus icon (+)  is displayed to allow the insertion a new element of content (text, image, video, bullet list, numbered list).

Assessments and Questions management

This screen was divided into two different sections; Assessment information and Question.

Given that Assessment information has similar requirements to Course information and Question also has very similar requirements to Course Content section, I’ve followed the same process described above. The only functionality that was added to Question was that administrators could choose between importing questions from a bank of questions or creating a new question. When choosing to create a new question they would be asked to input the text of the question, 4 different choices and mark the correct answer to the question before saving it. They could also rearrange the order of the questions if needed.

Trying different design solutions for chapters and assessments

User testing and hand over

Once I had created a first draft of wireframes and prototype I conducted 1 hour long one-to-one user testing sessions. The main focus of these sessions was to find out how easy was to the user to create a course, including modules and assessments. Any feedback considered being high priority was iterated over in the next sprint, while the rest of the feedback was registered in the backlog.

The designed solution was also shown to the client in order to gather their feedback and comments. We did this in bi-weekly meeting over Google hangouts. We always walked the client through the screens, or prototype, explaining the sections and what interactions that was possible. The clients would throughout the meeting comment on the parts they thought needed more work and if it was something that had high priority, we would then address this until the next meeting.

Once the wireframes was signed off internally and with the client, I handed it over to the UI designer. We worked closely throughout the whole process, from when I started my research until he finished the UI. This way he was always up to date regarding the UX Design and I could also evaluate the usability on the UI design. I conducted usability testing on the finished UI prototype to and prioritised this feedback as high/medium/low as well.

When the UI designer finished his work and we also signed off these screens, we arrange a meeting with the developers. We walked them through the design, both showing the screens and the prototypes. We always supported the developers in their work implementing the design by answering their questions throughout the development of the system.

Signed off wireframes

Designing other features

When designing the rest of the eLearning tool and features, I used the same methodology and steps where it was appropriate. For less complex parts, such as admin manager and user profile, I shorten the time I spent doing research and starting sketching much faster. For other parts that needed more research I took the time to find articles, studies and design solutions to make sure I could make well informed decisions when creating user cases, flows and designs.