There wasn\u2019t much information in the client brief for the design of a brand new online learning package, but it did spell out a few things that the package had to have:<\/p>\n
- \n
- the FSSI brand<\/li>\n
- minimal navigation<\/li>\n
- a modern design that was professional and suitable for all genders between the ages of 17-40yr)<\/li>\n
- the ability to embed into any learning management system (LMS) like Canvas, Moodle, Blackboard, etc.<\/li>\n<\/ul>\n
<\/p>\n
<\/p>\n
<\/p>\n
The design of the course package was down to me and I was given total creative freedom \u2013 this can be the best and fun, but it can also be very challenging.<\/p>\n
The Goals<\/strong><\/p>\n
My main goals from a visual design point-of-view were to make it beautiful, striking, to suit the students\u2019 age group and current digital literacy, and to match current web trends without it looking outdated in the next few years.<\/p>\n
\nStage #1: Nice to meet you \u2013 Understanding FSSI style guideline<\/strong><\/p>\n
I went to the FSSI website first to understand their organisation\u2019s visual personality and culture. Their website is very simple with not much colour except black, white, and green.<\/p>\n
![\"\"](\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2019\/03\/FSSI-website-1.jpg\")
<\/p>\n(FSSI website)<\/p>\n
\nStage #2: The start is hard, give it a go<\/strong><\/p>\n
After reviewing their branding guide, I did my first design mock-up in Adobe Illustrator.<\/p>\n
I had been really inspired by designs with clean photographs combined with large typography and I wanted to bring this into the FSSI course package design. Big size typography makes the information stand out. Photographs sometimes speak louder than words and image details can keep it interesting.<\/p>\n
The image below was the very first design concept.<\/p>\n
![\"\"](\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2019\/03\/FSSI-first-login-design-2.png\")
<\/p>\n(First FSSI login design)<\/p>\n
![\"\"](\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2019\/03\/FSSI-first-course-dashboard-design-3.png\")
<\/p>\n(First course dashboard design)<\/p>\n
![\"\"](\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2019\/03\/FSSI-first-banner-visual-style-design-4.png\")
<\/p>\n(First banner visual style)<\/p>\n
\nStage #3: Tidy up your room! \u2013 Minimalise the interface<\/strong><\/p>\n
After a few more meetings with the client, we had a better understanding of how the client would be using the course package. The course packages would be embedded in different LMS and clients needed to be able to freely move and rearrange individual modules within a course.<\/p>\n
To avoid confusion in navigation, the FSSI course interface had to be as clean as possible. To achieve this, I removed the traditional side navigation menu and added two buttons to the top right corner. The first button\u00a0
![\"\"](\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2019\/03\/full-screen-view-icon.png\")
allows users to change from Canvas view to full screen view. The second button\u00a0![\"\"](\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2019\/03\/hamburger-icon.png\")
brings up a navigation panel so the user can know what page they are on in the module and jump between pages.<\/p>\n![\"\"](\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2019\/03\/FSSI-image-5.png\")
<\/p>\n![\"\"](\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2019\/03\/flip-card-image.png\")
<\/p>\n![\"\"](\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2019\/03\/FSSI-image-6.png\")
<\/p>\n(Course in canvas view)<\/p>\n
![\"\"](\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2019\/03\/FSSI-Course-page-in-full-screen7.png\")
<\/p>\n(Course page in full screen view.)<\/p>\n
\nStage #4: Don\u2019t get lost \u2013 The navigation design<\/strong><\/p>\n
Once the interface design structure was locked in, I continued to develop the colour scheme for the navigation panel. The colour scheme had to balance the interface\u2019s positive and negative spaces.<\/p>\n
After doing design comparisons, mock-ups, and considering the feedback from others, I decided to use the darker navigation panel colour scheme to balance out the white positive space of the rest of the interface.<\/p>\n
![\"\"](\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2019\/03\/FSSI-image-8.png\")
<\/p>\n![\"\"](\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2019\/03\/FSSI-image-9.png\")
![\"\"](\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2019\/03\/FSSI-image-10.png\")
![\"\"](\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2019\/03\/FSSI-image-11.png\")
<\/p>\nTo make the course more accessible, the interface design had to translate well onto other devices like iPads.<\/p>\n
When users view the course on an iPad, they can choose to show or hide the navigation panel using the
\u00a0button. When they tap the button, the navigation panel slides into view from the right-hand side. By tapping anywhere on the page, the navigation panel slides back out of view.<\/p>\n![\"\"](\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2019\/03\/FSSI-image-12.png\")
<\/p>\n
\nStage #5: xoxo \/ The K.I.S.S design principle<\/strong><\/p>\n
This course uses a lot of photographs because images can communicate specific purposes, feelings, and meanings to a broad audience of different backgrounds and languages. This made them a perfect design component choice for FSSI.<\/p>\n
Below are two graphic and image style concepts I developed. I tried to use FSSI\u2019s brand colours to balance out the images, but I felt that they looked too busy.<\/p>\n
\u00a0
![\"\"](\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2019\/03\/Photo-image-2.png\")
![\"\"](\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2019\/03\/photo-image-1.png\")
<\/strong><\/p>\nAfter much experimenting, I decided to keep it simple. As Albert Einstein has said, \u201cKeep it simple, stupid.\u201d Simplicity is a fundamental design principle.<\/p>\n
To keep it simple and straightforward, I selected black and white images and used white and green for text titles.<\/p>\n
![\"\"](\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2019\/03\/photo-image-3.png\")
<\/p>\n<\/p>\n
\nStage #6: We look different but are the same inside \u2013 Reskinning the current interactive activities.<\/strong><\/p>\n
Another essential part of this course package are the interactive learning activities. We have many interactive activities templates built and ready-to-use for creating courses, however, how these templates look didn\u2019t fit with the FSSI world. I had to re-design the visual styles of a few interactive templates to make them match the course package interface.<\/p>\n
For example, the new version of the quiz gives learning designers the option of including images in the design of their questionnaire. Overall, the design looks more elegant and fits with the rest of the new FSSI interface.<\/p>\n
\u00a0<\/strong>
![\"\"](\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2019\/03\/reskin-image-1.png\")
<\/strong>![\"\"](\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2019\/03\/reskin-image-2.png\")
<\/strong><\/p>\n
\nLeast but not last: What\u2019s the plan? \u2013 Student journey (UX)<\/strong><\/p>\n
In addition to the FSSI online learning package requirements, the package also had to meet RMIT\u2019s 14 elements for creating the best student journey. This includes a:<\/p>\n
- \n
- dashboard and select their course<\/li>\n
- course homepage<\/li>\n
- welcome video<\/li>\n
- course information<\/li>\n
- about the badge<\/li>\n
- assessments summary<\/li>\n
- my progression through this course<\/li>\n
- individual modules<\/li>\n<\/ul>\n
\u00a0<\/strong><\/p>\n
![\"\"](\"https:\/\/emedia.rmit.edu.au\/oedvedesign\/wp-content\/uploads\/2019\/03\/UX-journey-mapping.png\")
<\/p>\n(UX journey mapping)<\/p>\n
Bye for now \u2013 Conclusions<\/strong><\/p>\n
It\u2019s been a fun experience designing and developing the FSSI shareable course package. I greatly appreciate the design opportunity and for your attention. I hope you found this journey to be an interesting read.<\/p>\n
Enough typing for me. I will get back to work and keep designing, growing, and learning.<\/p>\n","protected":false},"excerpt":{"rendered":"
Last September, I completed the user interface design of a learning package for a client, Future Social Service Institute (FSSI). Here is the story of my design process, of how the brand new FSSI online course package design evolved and came to life. With so many available online learning and management platforms and different design themes to follow, it can be a nightmare to get started. While I did a lot of design and development versions for this FSSI online course design, I won\u2019t show you every single design I made, nor will I only talk about the final product. This post is about the journey to the final product and all the significant stages of the process. It starts with the client brief. The Brief There wasn\u2019t much information in the client brief for the design of a brand new online learning package, but it did spell out a few things that the package had to have: the FSSI brand minimal navigation a modern design that was professional and suitable for all genders between the ages of 17-40yr) the ability to embed into any learning management system (LMS) like Canvas, Moodle, Blackboard, etc. The design of […]<\/p>\n