NCAD Redesign

 

The NCAD website is an important touchpoint for the college, yet it has limited functionality.
As a team we were tasked with discovering the specific issues with the site. What works, what doesn’t, what is expected and most importantly; what is needed.
Through thorough research and synthesis we could begin to design creative and worthwhile solutions.

Assess the existing site via user testing and semi structured interviews.
Report research findings and recommendations back to the client.
Develop and test concepts that address those recommendations, via rapid prototyping and testing.
Develop a high fidelity prototype using Figma.

Timeline

5 weeks

Skills

Research, observation, interviewing, wireframing, Figma prototyping.

Year

2021

 Discover

UI Heuristics.png

Heuristic Analysis

The first stage of the project was to conduct a heuristic analysis of the current NCAD website.

This was very rapid research conducted by the entirety of the group; if someone saw a problem they highlighted it. This allowed us to get a good, general sense of the issues we might encounter and allowed us to think about formulating research questions.

From the beginning we noticed some recurring issues:

  • Large, indigestible bodies of text.

  • Lack of imagery and/or imagery out of context.

  • Confusing information architecture.

  • Nav bar titles vague, could hold anything.

Comparison.png

Competitor Research

We universally deduced St Martin’s to be a valuable comparison site due to similarities in subject matter and glaring dissimilarities in content hierarchy. We also looked at other sites early doors to start discovering working patterns.

We wanted to find out if certain aspects worked better, or perhaps worse, and why exactly that might be.
This allowed us to draw parallels and distinguish between what tends to work and what doesn’t.

From this analysis we were able to confidently move on to formulating a discussion guide for interview.

Research objectives

  • Assess how prospective students are using the site.

  • Evaluate user expectations.

  • Provide recommendations for improvement

Research questions

  • How easy is it to navigate the NCAD website?

  • Can prospective students find answers to their questions?

  • How do the overall aesthetics of the site resonate with the users?

Interviews.png
 

Interviews

9 interviewees were professionally recruited from a range of demographics.

Discussion guide

Once we gauged what the objectives were, we set about creating a series of tasks revolving around our objectives.

The interviews were split into 4 main topic segments:

  • Background questions to establish personas.

  • Finding a course of their interest.

  • Finding out about student life at NCAD.

  • Finding a course of their interest in St Martin’s.

 Quotes

“I didn’t even know the grad show site existed.”

“I’m looking for events and societies… I have no idea where to go.”

“I’m dyslexic, so when there are a load of words on the page like that I get overwhelmed.”

 Define

Synthesis 

We had a host of fascinating insights to move forward with, and so began to affinity map.
Working as a team we had a huge amount of data, and so we went through multiple iterations to get items in just the right space.

We wanted to discover themes, recurring issues and overarching feelings.

Key Findings

  • Overwhelming/irrelevant information.

  • Tutors/Student life not well represented.

  • Student work not easily accessible.

  • Visuals unappealing and unrepresentative.

We looked objectively at every issue and asked ourselves three questions:

What does it mean? Why is it important? What can we do?

We were able to include this in our research report to gain an appreciation for the issues and implementable steps for fixing them.

ScmETv3MdHMUizUUfpx6WR6CYOs1tfTg6cX8El8j7UMzVdpGHjedhj1ZeC2a_OQBN3vfwWiPkFBpdWDksiHTY39lFv0PDV3zZyXwF4_9i3OeOr5HqzEJmuGlGuSpuzorA4D7VQ7F5QM.png

Persona

We created a persona, James, to encompass our findings and allow us to have a reference; to understand the user goals and to stay on course.

 Develop

Untitled - Information Architecture.jpg

IA & Taskflow

We started to look at how the different elements of the site came together; how sections should be accessible, how they might link from other parts of the site etc. This gave us the solid foundation to go forward with our higher fidelity wireframing.

Wireframing

We began loosely sketching out wireframes and designing how individual sections would look and feel.

At this point of the project we diverged and started to focus on individual flows, mine being student work.

We took forward our user goals to define exactly what each page needed to achieve.

We built the wireframes around 4 key topics…

  • Specific requirements.

  • General Principles.

  • Components.

  • Validation.

Screenshot 2021-05-28 at 15.36.27.png

Through user feedback and further iteration we proceeded with adding more detail and finish to the wireframes.

 
Screenshot 2021-05-28 at 15.54.31.png

Style Guide

We created a style guide for consistency across the board. The visuals had to clear and simple, but still maintain the personality of a college such as NCAD.

image (6).png

Final Design

Through testing and constant iteration of wireframes, we came to a consistent, fitting solution. Through our research findings we knew it had to be clean, simple, consistent and highly visual, and the final design represents this.

Previous
Previous

Light Loading

Next
Next

Thorn - Accenture Collaboration