Section 6 – Prototypes and User Testing

Wireframes

In the early stages of wireframing and prototype development hand-drawn wireframes were created to explore the basics of the functionality, and layout. 

Fig 1 – Early app sketches

User Testing – Prototype V1

The prototypes used for user testing were mid-fidelity, the individual screens were created using Adobe Illustrator, and the interactive prototype was created using InVision.

The platform chosen for the app was Google’s Android operating system. 

You can view the prototype here.

There was a total of three iterations, all based on user feedback during testing, and to address issues in the test script. Read On >>Section 6 – Prototypes and User Testing

Section 2 – Problem Statement

Problem Statement

We have observed that there is no current means of sharing a user’s experiences. This is preventing others from accessing and benefitting from that knowledge. We plan on improving that by producing an app that will allow users record related written, photographic, audio and video media, easily, and by making it easliy accessible by others.

Section 1 – Problem identification/Ideation

1. Project Background

This project is part of year two of the PgDip in User Experience Design, in the Institute of Art, Design, and Technology in Dun Laoghaire. The project context is:

The project requires students, working individually, to design a high-fidelity interactive prototype to address a need of their choosing. Each student should also test their prototype design to evaluate it in terms of user experience and usability. The design process should be iterative and evidence of the evolution of the design should be provided.

Read On >>Section 1 – Problem identification/Ideation

New York Connects, Resource Directory

Responsive, accessible public portal

New York Connects Resource Directory is portal, designed and built for the New York State Office for the Aging. It allows users source unbiased information about long and short-term supports in New York State, for people of all ages, and with any sort of disability. Information can be found via a keyword search, a guided search, and by browsing categories. A logged-in section allows registered users save searches and download personalised support plans. 

This portal is built to AA accessibility standards, and is fully responsive.  

I was responsible for all UI artwork and design, accessibility design, responsive design, front-end and CSS coding, and the management of the successful accessibility audit and certification of the portal by the Shaw Trust.

PS: Some design elements, such as the purple used throughout the site, the white navigation bar at the top of the page, and page footers were required by New York State branding guidelines. 

You can visit the New York Connects Resource Directory here

CareDirector v6 UI / UX Design

Background

CareDirector v6 login screen

v6 is the latest version of CareWorks’ core product, CareDirector. CareDirector is a system for Community Health, Mental Health and Social Services. It enables clinicians and social workers to record details, processes and outcomes, of the care they provide.

Originally built on Microsoft Dynamics CRM 4.0 in 2008, running only on Microsoft Internet Explorer, for v6 it was decided to completely rebuild CareDirector as a standalone, browser-independent product.

Work began in early 2018 and the first release of CareDirector v6 was in April 2019.

As the UX designer I was responsible for all UI artwork and design, user experience design, accessibility, responsive design, front-end, and CSS.

Below are various screens from CareDirector v6.

Read On >>CareDirector v6 UI / UX Design

AuPairIreland.ie

AuPairIreland.ie is a responsive, HTML5, CSS-based website.

Primary users were female, aged between 18-43 and the majority of visitors accessed the site using mobile devices. With this in mind, it was designed using a mobile-first approach. The existing PHP powered site was deconstructed, old HTML markup and CSS removed, and it was rebuilt using the Bootstrap framework to manage the layout, components and utilities.

I was responsible for all aspects of the rebuild, including design, accessibility design, responsive design and front-end (HTML and custom CSS).