The Process
The first infographic that will be shown is the eLearning activity. This activity required additional javascript functions in order to reach the final goal. What makes this an eLearning activity is that it does not follow a traditional linear path for students, as it requires additional mathematical equations and functions in order to function as a tool .
The following eLearning activity creates a deliberate and practical simulation of how patients can improve their LDL Cholesterol levels.
Establishing a user journey diagram helps me organise my thoughts and structure the information aswell as create empathy for the user. This enhances my ability to make user-centered design decisions.
After establishing a user journey map I layed out low fedility wireframes in Invision freehand which was then revised by the lead designer. I then reiterate any suggested changes made. After the first iteration I created higher fedility wireframes to give a more fleshed out idea of what the interactive journey will look like. This then gets approval from all stakeholders.
The final product consists of a a web based application that will be responsive for mobile user aswell. This is then hosted on servers and made available to the students via the course they signed up for. Below are some of the screens I designed for both desktop and mobile view.
The eLearning activity for Mobile
This infographic was briefed in as a module component with a branching scenario. Branching scenario's generally refer to non-linear user journeys, so one with multiple different outcomes at the end. This infographic only had certain correct answers though, so the user would generally just be taken back to the first question if they got it wrong.
The following interactive infographic component aims to take the learner through the process of when to diagnose statins.
Establishing a user journey for this application helped a great deal in establishing how the decisions need to be structured. This also enhanced my ability to make user-centered design decisions and making each piece of information digestible for the student.
After the journey map I was able to establish a detailed wireframe which then was revised and improved on before proceeding to the final design and building round.
The interactives were built within Tumult Hype, a no-code web development solution. I have designed both the desktop and mobile screens shown here below.
The interactive infographic activity for mobile.
