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 researchthoroughly 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.
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.
This project brings together students from the two streams of the Applied Psychology course (psychology with technology and pure psychology) to work as a team on production of an IT solution that is underpinned by significant, credible, research-based psychological knowledge and understanding.
NutriClear Logo
This project is still ongoing and culminates in the development of a prototype and it’s showcase at an Interactive Display in May of this year.
I have included this project in my portfolio because it brings together many of the skills I have honed during my degree and applies them in the development of a proposed solution to an identified user need, from the idea stage right through to the high fidelity prototype.
NutriClear
A Scientifically-Researched User-Friendly Nutrition App
The Team consists of four students, two from the pure psychology stream and two from the technology stream.
As one of the two technology students, the skills I brought to the team included:
an understanding of user-centred design principles and their application
knowledge of the process of user testing and iteration
experience compiling low and high fidelity prototypes, using software like Photoshop, Illustrator & Axure
The Idea – Various ideas were discussed in the early stages. One area of common interest between team members was nutrition – specifically the fact that there is a lot of contradictory information available which is confusing for the layperson, plus there are some important areas which are not sufficiently highlighted.
In spite of the huge number of nutrition apps that are available, or perhaps because of them, we felt strongly that there is an existing need for a user-friendly app that provides unbiased, clear and scientifically-researched information to help users in making healthy food choices. Some possible features we discussed included:
a barcode scanner which provides nutritional information in a traffic light system so that users can easily make informed choices about the food they buy
information about the food pyramid illustrating to the user how many portions of the various food groups they should aim to consume
information about how diet affects health, with a special focus on mental health and immunity
clear scientific information about various popular diets, e.g. gluten-free, paleo, vegetarian, vegan
link to a website that would go into more detail
Background Research – in order to investigate this further we researched a number of existing nutrition apps.
One of the most relevant to our proposed IT solution is Fooducate. This app includes a barcode scanner with traffic light system for displaying nutritional information, and it gives feedback on quantity and quality of daily consumed calories. However the mobile app is not available outside of the United States.
Another nutrition app that we researched was My Fitness Pal, this app allows users to keep track of their diet and exercise patterns in order to help them loose weight. Although this app had some similarities to our proposed solution, we felt it was aimed at people who are actively seeking to loose weight while our vision was an app that would educate users about food and health.
We decided as a result of researching many more nutrition apps that it would be useful to include recipes appropriate to foods that the user scanned, as well as a feature to save favourite recipes.
Identifying a Need – at this stage we decided to carry out a survey to ascertain the level of interest in our proposed solution. A ten question survey was compiled on Survey Monkey and circulated via social media. Results of the survey showed most interest in 2 areas: the barcode scanner and information on how diet affects physical and mental health. Due to the low level of interest in the various diets (gluten-free, paleo etc) we decided not to include this in the prototype.
Developing IT Solution – the first step in development was to put ideas on paper. We drew up paper prototypes and user tested them as a mobile app using POP and received some very useful feedback which was incorporated into the high fidelity prototype. Some of these suggestions included
link the barcode scanner with the food pyramid so that when a user scans an item, the user receives feedback as to where it belongs on the food pyramid
record daily calorie intake and compare it with recommended levels
clearly explain nutritional jargon
include a section on weight in the health section and explain the effects of being overweight on health
navigation was confusing and needs to be more consistent
include a search function so that the user could search for recipes / health content
These suggestions were implemented into the design and work began on the high fidelity prototypes, which are currently being developed. Some of the high fidelity screens can be seen above.
Skills Developed:
