#uxeducation

IXD303

Research 

Testing Interactions For UXHive - Scroll

Testing Interactions For UXHive - Notifications

Prototype

IXD304

Research

Initial Prototype - Focusing on navigation

Final Prototype

High Fidelity Mockups - Messaging

This is the messaging system for UXHive. The messages appear as an overlay to the page the user is currently on, so the user doesn't have to interrupt what they're doing to send a message. Users are able to chat, seek advice and talk about course content. They can also send images.

Key Interactions For The Prototype

High Fidelity Mockups - Workflow

This is the Workflow page of UXHive, where users are able to balance their learning alongside their busy schedules. The Workflow page has 3 sections: • To do - This section contains a daily task list, generated by UXHive, to keep the user on track with their learning. Users are able to tick of tasks as they complete them, as well as edit or delete them as they see fit. • Course progress - This section allows the user to see the progress they are making with all their courses. Here they can see if they are on schedule with each course, the percentage of the course that they have completed and the duration of each course. Like with the task list, users are able to edit their courses. • Timeline - This section allows displays all the courses the user is completing on a timeline. This, amongst other things, ensures that users don't take on too much at once.

Key Interactions For The Prototype:

To do

• Course dropdown - users are able to see the tasks for all their courses, or just specific ones • Tick off task • Edit task • Delete task overlay and process

Timeline

High Fidelity Mockups - Video Lesson

This is what a video lesson - the main learning format - for UXHive would look like. Below the video there are three sections: • About - An overview of the lesson, explaining what the user will learn and a breakdown of all the topics that will be discussed. • Teacher - This section lets the user learn about who their teach is, what they do and what they specialise in, hopefully creating more of a connection between teacher and student. There are also links to the teacher's social media and work. • Downloads & Resources - This is where the user is able to download all the resources used in the lesson. For example, if the teacher used a empathy map template, the user is able to download it and put what they've learned into practice. One of the issues that users outlined with the likes of Codecademy was the fact that there were no additional/supplemental learning resources. Therefore, I have added in books that will let users further explore what they've learned and deepen their understanding. There are links attached to these resources that will take the user directly to a site that will allow them to purchase them. Users are also able to interact with each other through the lesson chat which opens up alongside the lesson. This allows users to discuss lesson content, ask and answer questions and generally support each other in their learning.

Key Interactions For The Prototype:

Video Lesson

High Fidelity Mockups - Course Page

When a user selects a course, they are taken to this page. This course page contains an short overview of the course and all the lessons the user will complete within a particular course. The lessons are sorted into modules to make the amount of content feel less overwhelming and more approachable. Users have to finish each lesson to access the next.

Key Interactions For The Prototype:

High Fidelity Mockups - Course Categories

These are the main Course Category pages within the Courses section. • Course Category page - This page allows users to find courses within specific areas. The colours used in the course cards are coordinated to a specific category, for example a wireframing course would be purple as it falls under the Prototyping category. • Course Category content page - When a user selects a course category, in this case Code, this is where they will be taken. This page collates all the courses that fall under Code, enabling users to locate specific courses easier and faster.

Key Interactions For The Prototype:

Specific Course category page

High Fidelity Mockups - Course Browse

This is the All Courses page of the Courses section, which allows users to browse and explore courses.

Key Interactions For The Prototype: