D.E.T Victoria App
Needs Analysis Reflection Tool

Client:

Wavelength

Role:

UI/UX Consultant

Project type:

Contract

Year

2021

Responsibilities:

UI Design specifications, heuristic analysis, wireflows, high-fidelity prototyping, stakeholder engagement

Background

The Department of Education and Training Victoria

This project was sponsored by The Department of Education and Training Victoria (D.E.T) which offers learning and development support, services and resources for all Victorians. Designed for adult educators (men and women aged between 28 and 60) who posses a high level of education and a number of years teaching experience already under their belt. This web app will be hosted on a .net core api with an Postgres database, the app will be built using angular 10, html5, scss and typescript.

Non-disclosure agreement

At this stage the content for this web app is not allowed to be disclosed.

Capability ilustrations

Project scope

General goals

  1. Provide a quote based on this project brief
  2. Interpret existing low-fidelity wireframe
  3. Conduct design critiques in Zoom meetings
  4. Creation of user interface components for various system functions
  5. Provide functionality rationale for the training, assessment questions, and results dashboard areas of the app
  6. Deliver product designs within a 2 week timeframe
  7. Illustration work for capability pathways (6 in total)
  8. Visual Design for aesthetic style

Goal mapping

System transparency

My user interface design was based on a set of user interface components accompanied by a product tour that demonstrated how to interact with the user interface on desktop and mobile. This helped users to navigate the web app and gain familiarity with the system.

When providing users with an optimal user experience, their journey must flow well, which can often be a common pitfall with some digital products that do not involve the user in a tour of the product features. I focused on these four questions when mapping out user goals:

  • How do users know their goals are attainable?
  • How do users know what to do?
  • How will users know they’ve done the right thing?
  • How will users know they’ve attained their goal?

Onboarding

Product tour

The main features of the user interface is designed to reduce the time and effort required for users to access information by providing them with results and insights. I aimed to support users actions or task completion through welcome messages, product tours, progress bars, checklists, hotspots, action-driven tooltips, deferred account creation, and persona-based user onboarding.

Product tour

User interface

Components

Alert box Form components

UX Consultation

Remote work

Each day consisted of a discussion with Wavelength's Chief Learning Designer (based in Melbourne). Being well prepared to discuss specific user flows via screen share provided me with an opportunity to improve my hosting skills. Virtual meetings involved demonstrating my ideas and having an open discussion about each component and providing heuristic analysis on the user interface design at a granular level – such as the way a potential users actions would be integrated into the results dashboard (i.e. accordion drop-down or modal functionality). I was also added to the Wavelength Slack group for follow-up and maintained a Trello board to provide progress updates to other internal stakeholders.

Creative process

Design critiques

To start with, I was given a link to an existing low-fidelity prototype to make sense of the design specifications and provided a quote for my time based on this desktop version below.

Original wireframes

The survey engine did not record users answers with an overall score or percentage. The fact that components related to each question in an assessment track made it more important users were presented with a multiple choice question. This was achieved by creating a dashboard that collated the users answers and provided development resources for their professional development for each capability pathway.

Empathy

Understanding the users needs

Site abandonment will consistently be higher on sites which are confusing and hard for users to use. In order to reduce the potential for error – and the resulting negative emotions – it is best to consider the significant possibility whether the design will lead the user to draw and act upon inaccurate conclusions. You can be sure that most users will want visual cues to get around your app or website regardless of how complex the product is. Therefore, it is important to consider how icons and other user interface elements compare with conventional standards of visual design and functionality (such as pattern libraries or components). In an interaction design sense, this is relevant to visual design elements on a screen. Conventional methods of interaction generally develop over time and subconsciously become easier as the users proficiency increases. In this case the target audience would have a good range of computer skills and their relative level of skill would belong to the early majority in the technology adoption life cycle.

  • "I want the best advice I can get to improve my teaching skills"
  • "I want to create a plan to discuss with my Principal"
  • "I want to create an account"
  • "I want to know how long this (course) will take to complete"
  • "I want to be reassured"
  • "I want to inspect my results"
  • "I want to save my progress"
  • "I want a retest"

Investigation

Quelling curiosity

One particular user flow stood out to me as being more complicated than it originally seemed. Knowing with certainty I could complete the final product within timeline I decided to take advantage of being my own boss and indulged my own creative curiosity by crafting a quick, low fidelity wireflow prototype, which enabled me to solve a couple of problems I had understanding the complexity of the scoring system. The wireflow design (below) presents one question at a time across a sequence of screens instead of all questions and interactions being present.

Try it now

After receiving some feedback we decided to stick to the original format, because we wanted to reduce the time and effort required for users to access information. The morale of the story is even if you think there might be a better solution, you have to be absolutely certain it is worth spending time developing different solutions because it is risky not sticking to the original wireframe you were provided with. My role was to design and develop a beautiful, minimal visual design for this web app within an 8 day timeframe.

Client satisfaction

Testimonials

 It's been no easy feat getting it to this point - congrats to you, Mike, and the team. It was amazing to see the tool come to life and it was clearly reflected of the time spent in the initial co-design phases. Matt and the Wavelength family have created an empowering tool that will connect positively with the hearts, heads, and hands of learning specialists and other stakeholders that may be privileged to experience it.  – Samantha Ferguson, Senior Learning Experience Designer at Wavelength

 The design looks like it's expensive! They (Victoria Education) loved it; they're really impressed with the design. Great job!   – Matthew Nash, Chief Learning Designer at Wavelength

 Congrats to those who've been working hard on it - a great milestone to reach!  – Program Lead at The Department of Education and Training Victoria

Effective design logomark

Shay Grantham
UX Designer

Let's talk today!

Shay Grantham
UX Designer