Be Work Ready Case Study

Project Details

Role: Mobile and UX Web Developer

Client: Faculty of Health and Social Care Department at Edge Hill University

• — Adobe Fireworks
• — Microsoft Forms (Survey Software)
• — Atom
• — Microsoft Word

• — Desk Research
• — High-Fidelity Prototypes
• — User Research (Intercept Survey)
• — Front- and Back-end Coding

Background

Edge Hill is an award winning university based in Lancashire and has been providing higher education for over a century. The university has won many awards, including being ranked as Gold in the Teaching Excellence Framework and university of the year (2014/2015). They have faculties in Health and Social Care, Education, and Art and Sciences, all of which encourage work placements, whether that's voluntary or sandwich placements.

Challenge

The Faculty of Health and Social Care Department provides information about their work placement schemes to their students, which includes information such as pro-active, professionalism, safeguarding, and securing a placement. The information that they have is contained in Microsoft Word documents and PowerPoint presentations. The problem with this is that the information is difficult to access on touch screen devices and would potentially have to download the files to their devices just to access their full functionality, such as embedded videos. To solve this, I conducted some UX work to develop a responsive and progressive web app.

Desk Research

I started off by researching the latest trends in UX, more towards, mobile, that I could apply when creating the high-fidelity designs. I found trends including navigation, typography, and the minimalist design. From the desk research and experimenting, I found that the design should be around the content and not the content around the design. This mean't that if I place the navigation at the bottom and doesn't provide a stronger focus to it, then the students would be able to focus on the content more without making the navigation inaccessible.

High-Fidelity Designs

After going over the latest trends with my supervisor, I began working on the visual design of the web app. I used a mobile first approach as if students need to access any work placement information while out, they need to be able to access that information quickly. I used a peach colour scheme and contained the most relevant navigation options in a bottom tabbed navigation to provide a visual design of power. The problem with this is that when reviewing other informational sites, such as BBC News and Daily Mail, they not only placed their navigation at the top and used white as their background colour, but used a hamburger navigation style instead of a tabbed one.

To make all the content also accessible via navigation, I used the hamburger, while making the background colour for both content and navigation white with a black border between them. This prevents the navigation from being the main focus until students need to access other content.

Prototyping

When designing the web app, I came across an issue with the transition of the main content when interacting with the hamburger navigation. I was wondering whether the navigation should push the content over or whether the navigation should slide over the content. I needed to test this with current students who are on the applied health and well-being programmes. Before I could test this, I needed to bring the visual design to life. This is where InVision came into play. This was probably my favourite part of the project as I have never used InVision before and found it fun bringing my designs to life using it.

I experimented and applied the features InVision has. They include hotspots, partial templates, fixed headers, and device skins to provide an experience that makes users feel that they are actually on a mobile or tablet. Once completed, I downloaded them as websites, ready for testing.

Intercept Surveys

Once I got the prototypes completed, I had to figure out how I would test them and how I would capture how effective they are for navigating on, especially when transitioning from the content to the navigation on mobile and tablet devices. To get an idea as to what UX method I should use, I checked out an article by Christian Rohrer on the Nielsen Norman Group website. The article stated about the different types of user research methods and their context or product use when collecting data using the methods.

I created intercept surveys as I needed the students to explore the prototypes first before describing their experiences. The questions included their experiences of the different versions of the prototypes, which version did they prefer, and why they preferred one version of navigation over the other for each device type. I then arranged a date and time with one of the Faculty of Health & Social Care lecturers to conduct the intercept surveys on the students.

Results and Execution

Just over half of the responses were positive saying that the prototypes were easy to use and were accessible. There was one experience where the writing was a bit small on the tablet versions, while the other responses were mostly "N/A". This was most likely because some of the students were using the smartphone and tablet versions of the prototypes, while others were using the desktop versions. I was a bit surprised that I only got 5 responses from the intercept surveys. Although most responses preferred the navigation to slide over the content, I contacted the lecturer to try and get more students to partake. I got a response back saying that the additional 15 students that they asked all agreed that they preferred the navigation to slide over the content as they are use to how their virtual learning environment operates.

I then developed the web app using HTML, SCSS and JavaScript, as well as an API that outputs the pages content. The API was developed using an open source project called OctoberCMS. The CMS allows content to be created and updated for students to access through the web app.