Tag Archives: web design

Let’s Go App

The Home Page of my Let’s Go Module

Let’s Go is an app designed to teach people with intellectual disabilities the necessary skills to travel and live independently. It is an ongoing collaborative project involving IADT and St John of God’s.

For one of my projects I had the opportunity to develop a section of this app. The section I chose to develop was a body language tutorial.

I have included this project in my portfolio for several reasons:

  • much of my work as self-directed and involved independent critical analysis;
  • this project demonstrates my web design and development skills, i.e. research, sketching & wireframing and design & development (using the 960 grid, HTML & CSS, Photoshop for content editing and Javascript to implement basic interactivity);
  • my work was selected to be tested with the intended user group;
  • I assisted in the user testing which gave me the opportunity to see the next stage in the development process first hand.

 

Development Process

The Research Stage was challenging due to the lack of assistive technology that exists for this user group. Two examples, however, were useful for guidance and inspiration – Money Counts (a website that teaches money management skills to people with intellectual disabilities) and Pesky gNATs (a game that teaches CBT techniques to children).  These applications helped me to realise that images and concrete metaphors would be more helpful to this user group than abstract concepts.

There may be a shortage of technology for the user group, but there is no shortage of academic research. This helped me to:

  • identify foundation level social skills so that I could pinpoint the areas of body language to focus on and how much detail to give,
  • identify a need in the user group to increase confidence so that they could become more sociable,
  • identify the teaching methods that would work best for this user group, i.e. images, prompts and modelling.

 

Wireframe of Listen and Learn Page

The sketching and wireframing stages allowed me to get ideas for the design down on paper and easily refine them. For example, my initial design included a slideshow tutorial about body language with images, voiceover and text – however I reconsidered this after wireframing because I felt that the text might be distracting for the user.

 

Development  and Design built on the skills I had learnt in previous projects. I felt confident in my HTML & CSS skills, so much so that I decided to add Javascript to enable certain features such as audio links and the slideshow. To help me with this I completed an online course in basic Javascript.

Design decisions included keeping to a simple layout so as not to distract the user. I chose to include the slideshow tutorial mentioned already, along with a video to build on the material included in the slideshow, and a game to reinforce learning and allow for user interaction. There was no requirement to pick colours or design a logo and these had already been decided. A resource called Photosymbols was made available which contained images of people with IDs; I used these as much as possible in my design as I felt the user group would more readily identify with them.

 

Pages of my module for Let’s Go

 

User Testing was conducted over two sessions. During each session, four users were observed as they tested various modules of the app. Due to the ethical issues of conducting research with this user group, it was not possible to record the tests. As an alternative, assistant researchers also observed the tests, thereby ensuring accuracy in the data.

My role as one of the assistant researchers was to help some of our participants with their pre-test questionnaires and to record my observations of each person for a specified period of time as they used the app. I enjoyed taking part in this process, particularly meeting the users involved and hearing some of their feedback. The current round of user testing has now been completed and the app is going through another phase of iteration before the next round of testing later this year.

 

Website

The second piece I have chosen to display in this section is a website I developed to coincide with the European Access Network’s (EAN) annual conference which took place at UCD in May 2016.  I have included this project because:

  • it was the first website that I coded myself
  • it is a well-researched piece of work
  • in terms of design I feel it is a reasonably well-presented first attempt
  • it was one of three projects from my class that was selected to go on display at the EAN conference

 

Development Process

Home Page

Research

The EAN aims to encourage wider access to higher education for under-represented groups. My website sought to highlight the difficulties faced by refugees and asylum seekers in Ireland in pursuit of higher education. It was important to research thoroughly to ensure accuracy of content, so this very time-consuming stage was my starting point.

In tandem with the research I was carrying out, I was also looking at websites like dribbble.com for inspiration and guidance  as well as learning HTML & CSS from an online tutorial.

 

Wireframing

Next I drew up wireframes using Photoshop. At this stage I had a good idea of how I wanted to present the content:

  • Home page
  • Stories from refugees and asylum seekers
  • Statistics Page including a timeline of legislative changes that made it more difficult for refugees and asylum seekers to access higher education
  • Information Page  about going to college for refugees and asylum seekers

 

Development

By the time I was ready to begin developing the website, there was a lot of content for the home page. I decided to make another page called Issues which would serve to highlight some ongoing unresolved problems facing refugees and asylum seekers.

I used Brackets code editing software and the 960 grid to build the website. I found the process enjoyable, and not too difficult thanks to the sheer scale of help and information that is available online when stuck on a piece of code.

One design aspect  I especially enjoyed was finding images to illustrate the content and editing them with Photoshop.  I feel the images are important in breaking up the text and communicating the issues to the reader.

 

Graphic Design

In this section you will find examples of my work in graphic and web design which I completed as part of a Year 2 module called Information Design and Multimedia. You can find out more about the process involved in developing these projects on the dedicated pages for each piece.

Infographic


Skills Developed:

  • Research
  • Wireframing
  • Illustrator
  • Creative Design

 

 

 

 

Website

Skills Developed:

  • Research
  • Wireframing
  • HTML & CSS
  • Photoshop
  • Web Design