UX School

We’re reshaping online education forever, but we need your help!

Platform: Desktop

Project brief: Redesign online education from a User Experience standpoint. ‘Design the Monzo of eLearning’.

Skills: UX Design, UI Design, User Research, Illustration, Information Architecture, Interaction design, Content Design.

Project Goals

Design Toolkit

User Research

Before jumping right into designing how my screens were going to look, I wanted to conduct some User Research to give me a greater understanding of what the actual problems with eLearning were. I felt that through actually going and conducting this research, it would outline what aspects of existing online educational platforms frustrated users (and what worked well). These pain points would then be the main areas I would exercise all my focus on — so that I was able to design a system for my users.

Lack of Support
Impersonalised Profiles

Customer Reviews

After reading some of these customer reviews, I created my own survey on Survey Monkey and asked my users ten questions that I felt would tease out what could be improved in online education.

After the results from my ten survey questions, I had formed a really good idea of what exactly it was that the users wanted. I wrote down a variety of different features that I felt would all improve eLearning in their own way if they were incorporated into a design. Then using my survey results, I began card sorting my features into what my main priorities would be to focus on, down to the less important priorities in my design.

User Personas & Empathy Maps

Now that I knew the key design areas I had to focus on, I wanted to create some user personas and empathy maps to give me a better idea of how a typical user I’m designing for might think or feelings they might be having.

Megan User Persona
Megan Empathy Map
Jamal User Persona
Jamal Empathy Map

Idea generation

After culminating all of my user research, I began sketching different interfaces and aspects of my system out to give me an idea of how Humanize might look, work and feel. I did this on paper for time efficiency purposes — so as to not be ‘too precious’ with my ideas. Sketching all my ideas down onto paper was useful because it was far quicker than the length of time it would have taken me to create these wireframes digitally, it also meant my concepts were interchangeable and allowed me more freedom in my generation.

When I started finalising on how I wanted the interfaces and features to look, I created some mid-fidelity wireframes (I had already done low-fidelity before this I just chose not to show them here) showing where elements would sit on each screen to give me a real feel for the visual aspect of my design. I then put these wireframes into a user flow and explained how users would interact with my system and navigate their way through it.

After my idea generation, I felt it was then time to move onto designing my interfaces digitally (I did this using Adobe Illustrator). First of all I digitised my user flow shown above and coloured the elements using the exact hex codes from my colour palette to set the tone for the design.

Avatar Design

In my problems with online education I mentioned earlier, it was sad to see how many existing eLearning platforms (nearly all) represented their users by using simply their initials or just basic block shapes. How boring is that? I actually felt this was very impersonalised and dehumanised, and so, to eliminate this feeling, I began to design my own Humanize avatars using flat character design.

One of my main focuses after all my research, was to put a massive emphasis on building a close-knit, eLearning community. I planned a number of different ways to achieve this. Then I started to envision how online education would be be so much more humanised with the addition of users very own personalised avatars! I knew then, that this was going to be a really strong feature in my design and set to work..

I felt this was my USP for my UX School and so wanted to tease it out a bit more. I conducted a lot of research on brands who use avatars to represent users such as Snapchat’s bitmojis and Xbox One’s Live avatars. This is what sparked my idea of users being able to create their own avatar throughout the on-boarding process. I thought if every user was to create their own avatar, they could be used to represent one another and all join together to form a warm, close-knit community.

Final Screens

Avatar Creation Interfaces
Home & Course Finding Interfaces
Course Overview & Dashboard Interface
Progress Tracking & Leaderboard Features
Live Lecture Screens & Live Chat Window

Prototyping Animations

Featured Learning Curve - Rounded Corners

Whenever I was checking out some User Interfaces online, one thing I noticed was how many designers were using rounded corners for the elements in their design -but why?

Anyone can appreciate the aesthetic beauty of rounded corners, but not many people would actually be able to tell you where this beauty comes from. I learnt, the answer to this is actually a scientific one which comes down to the fovea, located in your eye.

The fovea is located in the centre of the retina and is responsible for sharp central vision, which is necessary for humans for activities where visual detail is of primary importance, such as reading and driving. The fovea is fastest at processing circles and so, rectangles with rounded corners are easier to process because they look closer to a circle than a regular rectangle.

Some experts say that rectangles with rounded corners are easier on the eyes than a rectangle with sharp edges because they take less cognitive effort to visually process. Scientific research done on corners by the Barrow Neurological Institute found that the sharper the corner, the brighter it appears. And the brighter a corner appears, the harder it is to look at.

Reflection

I was super pleased with how Humanize turned out. I have been told by my lecturers, but I feel myself as if I am constantly improving and I feel that this was my strongest piece of work to date. I researched and analysed a LOT of user interface design during this project, which I feel strengthened my UI skills and enabled me to build really user-friendly, straightforwardly structured interfaces for Humanize.

Another thing that turned out really well for me was my whole avatar aspect - I felt as if this was my USP for this design and so wanted to tease it out as much as possible. We are social animals. We relate to other human beings and are influenced by their opinions and suggestions. That is why, using characters in this way can be more impactful than a chunk of text; it can give our audience something to visualise and hold on to in the midst of all the information they are being bombarded with.

I used flat character design to create these avatars, which I wrote all about in a more depth in my Tumblr - feel free to have a read here!

How I would improve

Apart from the open-ended refinements that can always be made, one thing that I know I should have carried out was usability testing. Usability testing is definitely your friend, as well as generating direct feedback from (a selection of) the exact group of people who are likely to be your end users, this type of testing lets humans use the design with a fresh set of eyes and can shine a light on aspects of the design that are perhaps unclear; which may not have been apparent to us as designers.

This piece of work was created to solve the problem of existing eLearning having such poor User Experiences. I felt I provided the perfect solution for this problem through Humanize; a design that encompasses aesthetically pleasing interfaces, strong information hierarchy, high functionality and an engaging User Experience overall. However, this was not designed for me, it was designed for my users and although I actually fit into the bracket of my target audience in this case, I know that usability testing would have allowed me to improve my finished prototype even more.

Due to deadlines, I ran out of time, which was the reason I was unable to carry out usability testing. With this being so important, I plan on managing my time better throughout my next project and definitely incorporating it to better my work and in turn, me as a designer. Finally, I think carrying out as many master apprentice exercises as I can this summer, will really help me sweat the details of UI design and take me to the next level.

Prototype Link

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store