Why Research?
Research is absolutely fundamental to the start of any project because it will be the basis for a lot of the decisions made throughout. It is important to gather some ground knowledge of key topics before starting to design anything to make sure criteria will be met accordingly. At the very centre of User Experience design is ensuring that the users’ needs are always catered for when using the product or service in question. The only way we will be able to find out what these user needs are is by executing creative and scientific research methods. Some examples of these are behavioural patterns, statistics of relevant events and market research into the chosen field. Following a talk with a guest lecturer who works at Foolproof UX, Terika, I have decided to start this weeks research by following her methods which are as follows:
Business Objectives – What is the ultimate goal of the project? How are you going to measure success?
The main goal of this assignment is to create a responsive website for an existing business or charity. I’m not sure how I will be measuring the success of this yet as I do not have a solid idea. I will be looking to include requirements and idea guidelines later on.
Project Objectives – Why is the focus on this particular aspect, step, etc?
I have chosen to mainly focus on the front page, menu navigation (information architecture) and layout. My reasoning for this is because the front page is very confusing and there is no clear differentiation between what is being advertised. The call to actions are muddled in with other text and are don’t follow any design branding standards.
The menu bar is cluttered with irrelevant options so the user has no idea what to find where. This falls into Hick’s Law which dictates that if the user is presented with too many options, they will take too long to choose and may end up just picking the middle one, or the one that is most obvious. Lastly, the layout is plain and unengaging. The dark shade of green gives off a depressing feel when paired with the grey tones and blocky menu bar. The design is extremely dated and does not follow any current design trends.
Domain/Industry – What is already known and what do we need to find out?
I know they are a company who is passionate about fighting climate change and who also have a strong interest in the art world. Additionally, because they are a charity organisation they must rely a lot on donations and volunteer work. I also know they have a cafe serving food and drinks, hold organic wine tasting evenings and have a bookshop. They must gain a fair bit of money from this to contribute towards the charity. Some of this information is on the website, but some of it Tigger told me about. I would like to find out in what other ways the public engage with their organisation and see if I can boost recognition.
Current Research – What is already known about this audience, interaction, flow etc? How did you know that this is a problem?
I haven’t done enough user research to determine other people’s views on how the website is run so I can only comment on my own personal experience. When I first logged onto the website I realised a number of problems with the three main areas outlined previously (front page, menu, and layout). All of these massively affect the usability of the site and have a direct hinderance on potential user journeys.
Target Audience – Who is this for?
Tigger lets his business appeal to a very wide age range of roughly 15-70. They all fall into the middle-class category and can be in full or part-time education, full or part-time work, unemployed, volunteering or retired. Each age group is able to contribute to the cause in their own way. For example, teenagers and young adults will enjoy the affordable book selection whereas older people in employment will be able to afford the organic wine tasting. Having said this, the cafe is common ground for all. With all this in mind the website must be easily accessible to everyone, easy to read and have clear information structure so whoever logs on can find exactly what they need efficiently.
Creative Research
To start the research process I created a mood board to display my initial thoughts about the project. At the time of making this, I didn’t know who I was going to choose as my external company, but I did know I wanted to offer my services to a cause I cared about. I have strong feelings towards helping the Earth and looking after our planet and after recently watching Blue Planet 2 the impact of plastic in the oceans was made scarily clear to me. To test whether I could transfer that same enthusiasm and excitement into my studies I compiled some images from various articles and sources relating to the struggles the ocean faces because of humans. I am extremely proud of the outcome and my mini-experiment proved to myself that this is definitely the way I want to go.
Scientific Research
As an introduction to accumulating scientific research, we were asked to find a statistic that relates directly to our project. I chose to include the above graph that displays “The number of smartphone users worldwide from 2014 to 2020.” From this graph, we can see that the number of smartphone users has only been increasing since 2014 and this gives me full confidence to believe that these predictions for the coming years are correct. This greatly highlights the importance of making web-based projects fully responsive as more and more people will be open to viewing it on their phone whilst out and about rather than waiting until they have access to a desktop computer or laptop. This is especially important when considering web traffic and the amount of interaction the site gets from target audiences such as younger generations who are generally more tech-savvy.
Market Research
To get a feel for the sort of thing I should be aiming for I looked at some charity organisation websites. There are many similarities across the board like using a bright colour scheme, having the donate button as an obvious call to action and using a bold image on the front page which spans across the entirety of the screen. I have compiled a collection of a few different website layouts and explained what my favourite bits are about them because I may want to include these design principles in my final product.
I like this front page because the nav bar at the top is clear and provides good information architecture. When the mouse hovers over the tabs, there is a long list of additional pages to the website. This particularly stood out to me because it includes most of the services The Greenhouse Trust provides, especially art to support their cause. I will most likely leave out the e-commerce aspect of the site and try to push the idea of people coming into the shop to purchase books etc. Letting users be able to sign up to the newsletter e-mail is crucial as the owner mainly depends on people reading the e-mails he sends out which include information about art exhibitions and evening events coming up. Having ‘Fight’, ‘Protect’ and ‘Engage’ as big buttons on the home screen is a good touch as well because it instantly urges the user to take action in one way or another. I’m not sure at this stage whether this should be included in my website design, however, if they have the main message they want to provide as a charity then this could tie in well. Having said this, the first impression is that they are promoting a few different things at the same time so I may focus this aspect of the project on the art festival they are contributing to in the summer if their place is confirmed.
Further down the page, I could lay out all the different aspects of how they help climate change in relation to art in boxes like these to boost recognition of the services they actually provide. Right now it is VERY unclear what they are trying to promote and what is most important. These will be in the top menu navbar as well so the user has multiple access points to this information but these boxes are an opportunity to include imagery and a short description. I like the way this organisation has colour coded each topic as well for clear differentiation. The images really grab the users attention and because they show happy and positive people, the user is instantly put into a nicer frame of mind. I could relate this back to the project by include images of artwork from various artists to draw the users attention and relate it back to art.
In this example, I really enjoy the simplicity of the site. There isn’t too much clutter on the screen so the user isn’t distracted and can scroll down with ease. The typeface is pleasant, clean and clear to read. Having said this, the black and white images are dull and the user could soon loose interest. All the menu options are clearly laid out and categorised nicely into relevant categories. One thing that was immediately confusing about the menu bar was the ‘Donate’ button. The red colour they have assigned to this option is the same as the hover colour of the rest of the menu options. After I scrolled down to the bottom of the page and then scrolled back up, I instinctively thought I was on the Donate page because it was highlighted red. I assume they have done this because they want to draw attention to it and urge people to donate money to the organisation, however, I just got confused and clicked on the home button again, assuming it would bring me back home, only to be greeted with the page reloading.
This is how the above website is displayed on my iPhone 7. It scales well and nothing is shifted about too much, however, the buttons may be too small for users on a smaller smartphone. The main black and white image could be made full-width and the text to the right of it pushed down to the bottom in order for the text to be bigger. The ‘Tweet’ and ‘Share on Facebook’ buttons on the top right of the page are extremely small on mobile and I had to zoom in quite far to be able to click them properly.
Lastly, I love this homepage for Recycle For Norfolk. The colour scheme is vivid and engaging to highlight the key points they are trying to deliver, however, the simple menu structure lets the user know there is more information if needed. When a user hovers over the menu items there is another tier of information and this is a great way to have a lot of information on one page. Having an accessibility and language option helps this to appeal to a wider range of people. This is crucial when trying to convince more people to get on board with an initiative. Using a carousel as the main feature is something I’ve always been on the fence about but the way they have used it here seems to be effective. Other sites use a simpler version where they have header images sliding across automatically with arrows on either side for the option to do this manually as well. Alternatively or additionally they have 3 circular selectors at the bottom. An example of this is shown in the carousel image below.
What stood out most to me about the Recycle For Norfolk carousel is the tab feature at the bottom. This unique tool is a great way to show the user which item they are looking at any given moment. It eliminates the need to flick through a number of images to find the one that is relevant to their interest. However, the downfalls of this method are the amount of space it takes up, it only works on desktop and I speculate that if there are more than 3 options to choose from then it can get confusing and messy. The home page does scale very well though and that extremely important in this generation of web development.
Conclusion
To conclude my first unit of research with this amount of knowledge is a positive step in the right direction. I have learned a lot about various new research methods and am looking forward to applying these to my work. I predict I will mostly be using scientific research methods to back up my theories however it will be interesting to see whether I can incorporate creativity at any point.