Video.
Social media.
Website.
Website (Phone)
Category: Advanced Web design
Figma File Link – https://www.figma.com/design/3HvLrOex30yR6SLeXsKW5H/Cornerhouse-low-fid?node-id=0-1&t=3oySk14lfXXlRUhz-1
Planning Phase.
My main goal when starting to design my website was to improve the navigation throughout the site and make it as user friendly as possible. This is because youths are the target audience so simplistic navigation throughout will keep the user engaged and will not get frustrated. Thinking about the user’s needs, they are primarily looking for information on the website. So, to improve the time taken for the user to find the information, a menu bar with core subjects could be created, replacing the drop-down menu. In addition to this, a search bar could also be included in case the user had something specific they needed to find.
Accessibility is crucial for a community website like this one, so I will have to plan for inclusivity. This could include contrasting the text with the background making it easier to read for visually impaired users as well as using buttons and icons for users that struggle to read text. Another goal to improve the website was to include more Imagery as the current Corner House website has hardly any. Including enough Imagery within your website not only grabs the viewers’ attention but it also supports accessibility as some users prefer visual learning over reading. Imagery can be used anywhere suitable on the homepage as we want all the content to stand out.
When moving onto information pages Imagery isn’t as important as the text is what the user wants to read. 3 images max can be used to break the text up as well as large heading boxes on certain sections to emphasise their importance. Having UI/UX elements is a must for this website as the target audience is young, so animations and other elements will catch their attention and make them stay on the website for longer. UI/UX elements also help improve the navigation throughout the website because for example, an infinite photo carousel allows users to see various parts of the website right on the homepage.
Initial Sketch/Low Fidelity.
I went into my low fidelity design focused on the goal of making the site user friendly, making sure I used the correct layout to optimise my goals. Having large boxes across the whole of the landing page allows for enough space for content to be placed and viewed with full clarity. This combined with having large text boxes for headings to be placed will allow for an affective but simplistic design layout. On the current Corner House website there is an option to hide the website quickly to give the user discretion if anybody walked by. I decided that this feature should be kept in the new design as it gives the user closure, to know they don’t have to worry about people looking. I also made the decision to move the social media buttons to the top of the page rather than the bottom. This makes it more noticeable, and the user doesn’t have to scroll to the bottom, improving ease of access and navigation. At the very bottom of the homepage, I have created a wider layout, for the plans to have a carousel that show latest news posts for the user to see. This is at the bottom of the page because users tend to only look at news in something they are interested in, and it is secondary in importance to everything that will go above it. Users will only scroll that far down if they have decided to stay on the website.
Below are sketch examples of what the information pages plan to look like with different layouts.
Logo Design.
I spent a lot of time designing the logo for this website and had a lot of different varieties.
First, I tried to play with the words ‘corner’ and ‘house’ to create a corner perspective in the logo. I really liked the concept and the way it looked but it doesn’t show what the organisation is about and looks too formal. I then tried it with different typefaces to see if I could make it look like it fit in a community website, but it didn’t work. Then I also tried using the initials to create a corner house but again it would not present the organisation that well.
After that, I moved away from the perspective idea and tried to design the logo around a house I had created. I used Helvetica as it didn’t seem as bold as other typefaces I tried, and it has a simplistic neat look to it. I used a pastel colour pallet on ‘house’ and alternated it on the letters to try and give it more of a childish look. I do think that this combined with the house makes it look like the logo represents some sort of charity. As a result, I liked the colour scheme of this logo as it was different, but there was no sense of community in it.
I decided to have a final go at using shapes to create a house of some kind. In the end I managed to create this shape by combining two squares together. I added a window at the top of the shape to make it clear the user that it represents a house. Gradients seem to make things look outdated in 2024 but when I experimented with this gradient, I believe it made the logo look a lot better. I used inspiration from the current Corner House website and tweaked it slightly to give it a fresh look. The sense of community still felt absent from the logo, so I started to experiment trying to fill that space with people. After different variations I found the one I was most happy with.
The next step was to find a typeface that complimented the rest of the logo. After much experimentation I found the typeface, I wanted to use. Gambado Sana Forte is a unique typeface as the letters are slightly out of line and rotated. This gives the logo the youthful and playful look I was looking for, and when you put the full logo together, it is clear to see this is an organisation that focuses on the younger generation.
A last-minute swap was made to the logo before I could call it complete. I thought that the window at the top could be replaced with something that would hold significant importance or signify something. This is when I created a flower like shape to take its place. Flowers bloom because of care and growth, which symbolises hope and new beginnings. They are also central to symbolising happiness and success, so having this symbol in the logo gives it the significant importance the organisation supports. As I had created a lot of logo variants it was important to get feedback on which one my fellow course mates liked best. Fortunately, the majority agreed with the one I chose. One person said they ‘really liked’ the house concept as it gives it a ‘unique look’ and someone else really liked the typography used as it ‘adds a lot of character’ to the logo. One thing that I got told I could improve on was the ‘placement of the text’. So, to fix this I moved it to the side instead of underneath which looks a lot better.
Mid Fidelity.
Moving onto my mid fidelity I focused on organising where things will be placed. For example, putting the projects at the very top in a particular order and then other important information below that. These were placed in this order from being most important to least important, creating a type of hierarchy. The font that has been chosen will be used as the main font throughout the website. The main reason I chose this was because it’s the same font that I used to make the sub-text in the logo, October Devanagari. The typeface is rounded and uses curves to make it look sleek but also playful, which can be visually appealing for younger audiences. Using the same font for the logo and the website not only strengthens brand recognition but it also enhances visual harmony. Having lots of different fonts on a website can look unprofessional and increases the users cognitive load which can result in them leaving the website, whereas one font allows the design to flow smoothly.
Throughout the website I decided to use curved corners on boxes, buttons etc. This is because curved boxes can reduce visual tension, which can lead users to have a much calmer experience when visiting the website. Creating a calmer environment allows the website to become more inviting and friendly which is something that is very important when your audience is of the youthful generation.
The headings in the menu bar are mostly the same as the ones in the drop-down menu on the current Corner House website. Having them spread across the top of the landing page means it’s the first thing the user sees, which will result in faster search times. I added the ‘How to find us’ from the current website onto the menu bar as well because as it is a form of contact, it’s a vital part of the website that should be available at the user’s fingertips. Some people like to speak about their matters in person, so to have it at the top, it means they don’t have to scroll down just to find the address like the current website. I gave the donation button its own space as this needs to stand out differently to the rest of the sections so the user can donate with ease if they wish to.
Thinking ahead for my high fidelity and my UI/UX elements I used the underline tool to highlight the page the user would be seeing, with each section having this feature. So, when it comes to prototyping and animating, the underline will smoothly move to the next selected section and vice versa. Although even without the animation the underline still makes an impact, improving the user experience as it provides feedback and confirmation to what the user has pressed.
There is one slight change that has been made from the low fidelity to the mid fidelity. At the bottom of the homepage, the one button has now been split into three. I did this because there was some information embedded deep on the website that I thought should be displayed on the landing page, for users to have quick access to. These being ‘Work with us’ about job vacancies, ‘Local events’ which displays upcoming events, and ‘History’ which tells us how the organisation started. I’ve kept the layout of the footer the same as the current website, just making a few tweaks like the round corners and adding the new logo.
The rest of the pages are information focused meaning I have left Imagery to the minimum. This allows the user to read and find their relevant information quicker rather than scrolling through images they don’t need to see. At the top of the information pages is a content holder, which will be filled by an image relevant to the section as well as a title heading. This not only gives the user clear confirmation on what they have clicked on but helps to bring a small dose of imagery into the information pages without causing distraction.
My plan with the boxed headings is to do something similar, and that is to add content in the background and then have the headings overlap them. I thought this would be a clever way to implement imagery again without causing distraction because as it’s a heading we want it to stand out from the rest of the text anyway. Visual elements like photos can help guide users through the site, which improves navigation and usability.
Before I moved to my high-fidelity version, I wanted to see how the menu bar layout would look with a gradient. As this is my mid fidelity, I used greyscale, but I think it might be a good addition to have in my final website design.
High Fidelity.
Moving into my high fidelity my focus was to bring the content into the website and colourise it. I decided to keep the gradient on the menu bar and matched the colours to the gradient on the logo, to strengthen the brand identity. Due to the vibrancy on the gradient the black text did not look aesthetically pleasing. So, to fix this all the text was changed to white. This gradient has been implemented onto certain things across the website e.g. the buttons, which makes the user be drawn to them faster. I decided to set the purple from the gradient as the primary colour used on the website. This includes text and some headings.
The large box at the top has been filled with a selection of content that will switch automatically between, when prototyping is finished. The ‘Welcome to Cornerhouse’ message is very large on the current website, so I thought it would be a good idea to do the same because a warm message sets the tone for the users experience and makes the organisation/website feel approachable and user friendly. I created an illustration on the right, using photos to show what the organisation supports. I think this was a good thing to add because it not only fills the white space around the text, but it shows the user that the organisation is inclusive and is all about support. All the photos I used were downloaded from Unsplash.
The other two slides to this section follow a different layout. On the current website there is a ‘latest post’ section, but it is squished to the side, which does not look aesthetically pleasing. The current website also does not showcase their YouTube videos which not only reduces the content the organisation provides but results in missed engagement opportunities for users that prefer watching videos. So, I took the opportunity to improve both problems. As the content is the primary focus on these slides, I moved the text to the side to allow for a clear look for the user. Most of the text stayed the same in terms of size and boldness. However, a new sub-heading was created to show what the content is about. This needs to be clear to the user, so I made sure to make it bolder than the paragraph text but not enough to overpower the title. Both Images used were taken from the current Corner House website.
Moving down there has been a change in layout in terms of the headings. Instead of them being central in the middle, I made a decision to move them to the far-left side of the page. This is because it results in everything being in line with each other which reduces the user’s cognitive load. Each box section follows the same design principles apart from having a different image that is relevant to the topic. For example, ‘Flipside’ is about sitting down and having interventions with young people, so I chose an image of two people having a serious talk.
All the box sections will behave the same when they are hovered on and will reveal a short summary of what that section includes so the user doesn’t have to leave the homepage if they don’t want to. I used a ‘Latest News’ post as an example.
The ‘Latest News’ section brings the use of buttons into the design that were not in the low or mid fidelity. This is because I realised that if the news was on an infinite scroll it would make it hard for the user to read and keep track whilst it was continuously moving. Once Prototyping is complete these buttons will be used to seamlessly animate over to the other stories and vice versa.
The information pages have changed from the crossover of mid to high fidelity. The Flipside page for example is now full of colour and looks a lot better. I’ve used the same image that represents Flipside because after prototyping this should allow for a smooth transition. One problem I did face is that the title heading didn’t stand out enough against the background. To fix this, I applied the same gradient used on the menu bar and decreased the opacity to still let the image come through. The combination of this, adding a drop shadow and making the title heading bold, improved the readability of the text.
For this same reason I decided against adding imagery in the heading boxes. Instead, I filled it with the primary colour to highlight that these sections were important. To make sure the other headings still stood out, I made it a different colour to the body text and made sure they were underlined.
After the problem with the title heading and the background, I decided to follow the same procedure on the other pages, as we can see on the ‘Parents and Guardians’ page.
This page has a different layout to the other pages. It is because there’s a lot of information on this page, so it must be presented in a way that the page isn’t too long, but the information isn’t squished together either. That’s the problem with the page on the current website, as the information looks too cramped together leaving no room for Imagery.
In the end I settled for a banner layout that will expand when clicked. The banners follow the same design as the title headings with the gradient and the relevant imagery. I’ve used ‘Sexuality and Gender’ as an example of how everything will look when it opens. I had the issue again where the text was unreadable with the background behind it. So, to fix this problem I had to make the background darker and give the text a drop shadow to make it easier to read. Once prototyping is complete the different sections should smoothly swap out when they are being clicked on.
High Fidelity Mobile.
The final version of the website should be responsive meaning the websites can adjust to different sizes. To give an idea what this will look like I created a high-fidelity mock-up of the landing page and one of the information pages.
In terms of layout all the text has been centralised on the landing page. I thought this was a good idea as phone users focus on the centre of the screen more than anywhere else. Instead of being in a row horizontally the boxes were flipped to be in a row vertically. Keeping as many as the same elements from the desktop version allows for a more seamless transition for the user. Which is why instead of adding lots of new elements I tried to reorganise the ones we already had which I though was a good decision.
One Problem I faced with the transition was the menu bar because If I added one to the mobile version, it would have to be that small that it would be hard to read the text. As a solution I decided to create a drop-down menu like the one on the current website. This allows for the user to see the text clearly and makes the site look more professional due to nothing looking cramped.
The three buttons at the bottom of the website have also been added to the drop down because it prevents the user having to scroll down to the end if they want quick access to one of those buttons. As it’s a phone the width is narrower so it’s a longer scroll whereas on desktop there’s a larger width meaning the buttons at the bottom are fine on desktop.
The socials and the donate button are grouped together by a banner that will stay in the same position throughout the mobile site. This is because they are both important interactives with the socials leading them to more content when they have finished on the site, and the donation button being always there to entice them into clicking it.
I kept the ‘latest news’ the same but with only one post showing at a time as this keeps all the content in line and keeps the user’s cognitive load to a minimum. The information pages stayed much the same, only did I expand the heading boxes to stretch across the whole screen. This helps break the sections up and makes it easier for the user to read.
Sustainable and Ethical practices applied.
Throughout building the website I have thought and considered a few sustainable and ethical practices. One sustainable practice was that I used digital tools to design my sketch and fidelities instead of printing and using paper. This was more time consuming than pencil to paper, but it was much better for the environment. Another sustainable practice is building the website on your own because if you had a team that were not local, people would have to travel to meetings etc. contributing to co2 emissions. I tried to keep animations and script use to a minimum and only where needed to encourage digital minimalism. The landing page has the most animations as it needs to be eye catching to the user to keep them on the site. The other pages make up for it though because all they have are a few feedback animations. Animations and scripts increase data transfer but also energy usage. So, reducing heavy elements like animations results in a more energy efficient website.
Categories
Research Blog
Post 1
Non-Profit organisations have been significantly transformed from the way they operate, innovate and solve problems, all from the help of the web. The internet has enabled these organisations to address challenges in ways they could not do before. For example, expanding their access to information and enhancing collaboration and creativity.
The web has opened new avenues for non-profits to source ideas and solutions from a global community. For example, platforms like CrowdRise and Kickstarter enable non-profits to engage with people from all over the world to fundraise, gather innovative solutions and collaborate with one another. UNICEF’s ‘Wearables for Good’ challenge is a great example. UNICEF https://www.unicef.org/innovation/ used the web to launch a challenge that invited innovators worldwide to design wearable technology to improve lives of children. Using the web, it allowed people from diverse fields like technology, design and health to contribute solutions to social issues.
The Web has made it easier for non-profits to run campaigns etc. on a global scale. This is with the help of social media platforms (Facebook, Twitter, Instagram etc.) and online petition websites e.g. Change.org have become vital tools for raising awareness, mobilising supports and driving change. For example, the ALS Ice Bucket Challenge in 2014 was a viral social media campaign that raised over $115 million for ALS research https://www.als.org/research. The challenge encouraged individuals to post videos of themselves dumping ice water on their heads and challenging friends to do the same. The web enabled this campaign to spread rapidly across the world, engaging millions of people and significantly boosting donations for ALS research.
Post 2
I worked with Mik and Jess to look at how sustainable the ‘Rooted In Hull’ website was. We all decided to dive into different sections of the website independently and then come together at the end to conclude what we thought. I analysed the websites UI/UX interface and the features it provided, and how it could be improved. I created a mind map that was split into four sections. This made it easier for me to pinpoint on what to improve on. For example, for the design of the website I found there to be a lot of white space. White pixels on certain screens generate a lot more energy than darker colours because it uses more power when pixels are bright. To improve this, we could minimise the white space on the website and add a dark mode toggle to improve the electricity usage. We all presented our work through the same Figma file, which was great because we could always see what someone else was doing and jump in to help one another if needed.
I enjoyed this group activity because we all decided what each of us was going to do and made sure we all had equal parts in the project. Everyone contributed equally and it didn’t feel like anyone was the team leader which meant we all worked to the same ethic. When it came to speaking about what we had produced, everybody took a turn speaking about what we had found individually and how it contributed to the project. I learnt from this collaboration that the three of us work well as a team together and that splitting into individual tasks to present together at the end is a great time effective method. Group work and collaborations will be a future part of my work life wherever I go. So, this collaboration project has taught me how important it is to communicate with one another. For example, ask if you need help or if you need assistance on one of your tasks. Keeping a positive mindset throughout the team reflects on the quality of work created. This is something that I learnt from the team I worked with and is something that I will take into future projects and teams I work with.
Post 3
Creating visually appealing, functional and user-friendly websites is essential in modern web design as all of these improve the users experience and there are certain key approaches that are essential to making this happen.
Responsive design is the first key approach that ensures websites function and look well on different sized devices, from desktop computers to smartphones. This happens by using fluid grids, which are flexible grid layouts that adapt to the screen size. This is useful if the user wishes to minimise the window to one side, the content on the website will adapt to the new window size. If a website did not have a fluid grid and the user wanted to make their window smaller, they would lose information and only half of the website would be accessible. Based on the different screen size you can apply different styles, change the orientation and layout plus images and media will adjust to fit. Fluid grids allow you to choose what components transition to the other sizes and what don’t. For example, if you had a logo and the name of the company on the desktop version, but when you minimise it to the mobile size the text looks cramped together, then you can deselect the text, so it doesn’t show in the mobile size. This enhances the users experience because it prevents elements from overlapping and prevents the user from missing information or finding it hard to navigate the page.
Responsive design also improves SEO and creates a seamless experience across devices without having to create separate sites. Grid systems provide a structure for organising content and its elements in a way that is user friendly and aesthetically pleasing. A grid system enables modular design which is a principle that breaks down a system into smaller parts that can be independently modified. This allows developers to add, remove, or rearrange content around the page without disrupting the overall layout. This is a great thing to have on a website because it means you can update and improve your website all the time without having to reconstruct the entire site. When certain elements are in the same grid layout it means we can align them in a cohesive way, making it easier for users to navigate and search content. Another key approach is mobile first design. This is a strategy that prioritises the mobile design process first before scaling it up for larger screens. This allows developers to start with the essential content and optimise it to fit smaller screens before adding enhancements and other extras for larger screens. This means that the mobile design will not be too cramped with too many elements as the grid layout is designed for the phone size, so it will always be optimised. As it’s only the essential content being loaded it results in the asset size being minimised, increasing the performance on mobile devices and improving the user’s experience. Mobile devices are often where most of the web traffic comes from, so mobile first design ensures a great experience for those users.
Accessibility is another essential approach because it ensures websites are suitable for people with disabilities, including those with visual or auditory impairments. Websites can optimise a high colour contrast throughout their website between the text and the background as this improves readability, particularly for those with visual impairments. Screen readers are also a great tool for visual impaired users because it turns text into speech. This enables these users to interact with the website but by using a voice to navigate them. This is why it is important to include alt text under images or different media because it then provides context to the users who rely on screen readers. Including all these accessibility elements improves usability for all users which in result increases the sites audience reach.
Post 4
Digital marketing allows for non-profits to spread awareness, engage supporters and create donations. Key concepts like SEO, social media strategies and email marketing help this happen.
Search Engine Optimisation (SEO) involves optimising a website to increase its visibility on search engine result pages e.g Google. SEO will help non-profit sites because it will attract people who are searching for causes to support or information about a non-profit organisation. This is because it identifies relevant keywords that supporters might search for such as ‘animal shelter donations. SEO also looks at on page optimisation. Meaning that it targets keywords in page titles, headers, meta descriptions etc. to help search engines understand the page’s purpose. SEO also looks for keywords in blog posts, articles or resources on topics related to the non-profits mission. An example of a site that is SEO optimised is the non-profit Charity: Water. It is ranked high for having keywords related to clean water initiatives by consistently publishing about their work and posting guides for people that want to be involved. This drives traffic and builds credibility and trust.
Social media platforms help engage supporters, amplify the non-profits message and build a community. Different platforms help non-profits reach different audiences, for example TikTok has a young audience and LinkedIn has a mature professional audience. These different platforms allow non-profits to reach a variance of audiences. Social media allows non-profits to share stories of various experiences including impactful stories and voluntary work, to emotionally connect with followers. Platforms like Instagram and Facebook can help connect with followers through visual storytelling. This can be done by posting photos or short videos to the platform. Hashtags are a great way to increase visibility especially if there is a challenge attached to it. For example, #TrashTagChallenge for an environmental clean up would most likely encourage participation and make the challenge go viral. Platforms like Instagram and Facebook support live streaming, meaning non-profits can use them to create virtual events, Q&A sessions and fundraising drives. The American Red Crosshttps://www.facebook.com/redcross/?locale=en_GB are a good example of an non-profit that use one of these social media platforms (Facebook) to update followers on emergency responses and encourage donations.
The World Wildlife Fund (WWF) https://www.instagram.com/wwf_uk/?hl=en uses Instagram to showcase captivating wildlife photography, invite people to support their mission through donations and share success stories. Instagram posts are highly shareable as it only takes two clicks, so this helped WWF with their message reaching a global audience.
Email marketing allows non-profits to keep in direct contact with their supporters. It keeps the supporters frequently up to date on campaigns, events etc. and encourages them to take action. Non-profits can also share milestones or volunteer work highlights to keep supporters engaged with the organisation. Having a strong email list with active supporters is a great asset as it enables non-profits to create loyal relationships over time. The design and the structure of the emails are very important because if the content doesn’t stand out then supporters won’t read on. The use of personalised greetings and tailored content based on the subscriber will encourage supporters to read on and will keep them engaged. The tailored content could be segmented by interests chosen by the subscriber when signing up or by the subscriber’s donation history.
The email list can also be segmented. For example, you could have one for past donors, volunteers and first-time subscribers, all with different tailored designed emails. These emails need to have a call-to-action button whether it’s encouraging donations or volunteer sign ups. This is because buttons or links with clear call to actions e.g ‘Donate Now’ makes it easy for readers/subscribers to act. Sending Thank you emails to donors, including impact reports showing how their contributions are making a difference is a great way to keep them encouraging to donate and to take part. These emails should include strong visuals to show the reader the importance but also personal stories from people their donations have affected to keep them a consistent doner.
There are many different companies that you can create and design an email list and the contents in it, but one example is Mailchimp. 88,511 websites in the United Kingdom use Mailchimp and 1,149,047 use the service currently worldwide. This shows that Mailchimp’s tools can be trusted and work well and effectively. The non-profit organisation ‘Charity: Water’ is a great example of a website using Mailchimp.
After signing up to the email list, you are greeted with a welcome email. The welcome email starts by presenting us with a large photograph of a child smiling to show our gratitude. A warm thank you message is followed below to the subscriber for joining the cause. This sets an immediate positive tone and makes the reader feel valued and appreciated. The email then follows with an impactful message that entices the reader to read on and donate. There are two calls to action buttons, one to donate and one to watch a short film. These call-to-action buttons contrast with the background and are in a large clickable box. This is so they stand out to the reader when they scroll so they cannot miss it.
The structure of the email is cleverly done because every bit of content makes the reader scroll down. For example, the image of the smiling child makes you feel that you can make someone else feel like that, so you scroll to see how.
References
Wearables For Good Challenge. (n.d) UNICEF. Available Online: https://www.unicef.org/innovation/ [Accessed 5 Nov. 2024]
ALS Ice Bucket Challenge. (n.d) ALS Research. Available Online: https://www.als.org/research [Accessed 5 Nov. 2024]
Responsive Vs Adaptive Design. (Image) Daniel Swanick. Available Online: https://danielswanick.com/gifs-explaining-responsive-design/ [Accessed 6 Nov. 2024]
Search Engine Optimisation. (Image) Wordstream. Available Online: https://www.wordstream.com/seo[Accessed 6 Nov. 2024]
The American Red Cross Facebook. (n.d) Facebook. Available Online: https://www.facebook.com/redcross/?locale=en_GB [Accessed 6 Nov. 2024]
The World Wildlife Fund Instagram. (n.d) Instagram. Available Online: https://www.instagram.com/wwf_uk/?hl=en [Accessed 7 Nov. 2024]
ALS Infographic (n.d) Hubspot. Available Online: https://blog.hubspot.com/agency/charting-impact-als-icebucketchallenge-infographic [Accessed 7 Nov. 2024]
Mailchimp Usage Statistics (n.d) Trendsbuiltwith. Available Online: https://trends.builtwith.com/widgets/MailChimp#:~:text=MailChimp%20Customers&text=We%20know%20of%201%2C149%2C047%20live,websites%20in%20the%20United%20States. [Accessed 8 Nov. 2024]
Proposal Post
Cornerhouse mission and target audience.
The non-profit organisation that I have chosen is the Cornerhouse https://www.wearecornerhouse.org located in Hull. Their mission is to ‘provide a compassionate and inclusive space where individuals can access trauma-informed health and wellness services.’ They focus on supporting young people as well as vulnerable groups by providing the necessary resources and support to make informed decisions and take positive steps towards improved well-being. Their team is committed to deliver personalised care and promote healing and growth in a safe and supportive environment. They have several projects which support young people with a range of issues:
- Flipside – supports young people who may be at risk of entering the criminal justice system using a trauma informed approach. Including:
- One to one support for young people at risk of child exploitation
- Support for boys and young men around healthy relationships ‘Break the cycle’.
- Reachout – street based outreach project covering the city of Hull.
- LGBTQIA+ – Support for young people around gender, sexuality and identity, including the Step Out group.
- Training for professionals and parents/carers
- Relationship and sex education in schools or any other youth setting
Initial design ideas and inspiration
The layout of the landing page lacks a strong visual hierarchy, which can make navigation confusing. Information is scattered everywhere, and the user must scroll down to find other sections of the website as well as their socials. This and the unclear sections can lead to a frustrating user experience. To improve this landing page, I could remove the boxed layout and create an improved grid layout that will take advantage of imagery and have clear headings and subheadings to make a more seamless user experience.
Images are sparse across the website and are not user friendly when it comes to accessibility. This is due to there being no alt text available on the images so visually impaired users may find it difficult to fully engage with the website. The website uses icons on headings etc. to help impaired users e.g. dyslexia to correctly identify the part of the website they want to navigate to. This is great as it improves accessibility and will most likely stay in the new designed site. The site could also be compatible with screen readers and have an accessibility page with options for resizing text and a colour contrast adjustment.
The websites typography varies with different font sizes and styles that do not always complement each other making the site feel inconsistent. As well as for accessibility, all capitals can make text harder to read, particularly for those with dyslexia or visual impairments. This is due to the lack of ascenders and descenders as it reduces word shape recognition, which results in slow reading speed and discomfort for some users. The colour palette across the website has some vibrant colours for the different headers on the landing page. This helps with the contrast from the dark blue background which results in high accessibility due to it being more readable. Although, some of the headings do have similar colour shades which can confuse and make the user experience more difficult for those who are visually impaired. To fix this I can make sure that I adopt a high contrast colour palette that will make sure all the headings stand out from one another to make the website more accessible and engaging. Across the website user interaction is limited, as the site does not offer many interactive elements like a search bar or an FAQs page. If these were included on the website, users would not only be able to find information more quickly but also find relative support more effectively. The UI/UX of the website is very outdated as it doesn’t use many interactive elements to provide feedback to the user on what they have clicked on. For example, a simple change of shade in colour when a section is hovered on, gives the user feedback on what they are going to click on. There is potential for the grid layout to work if we improved it by adding UI/UX elements. For example, if when we hover on the Flipside section, it would be great if the card would then flip around and give use a preview of information for the user to find their relevant information quicker.
Objectives for the multi-channel marketing strategy
A multi-channel marketing strategy involves the use of different platforms to communicate with an audience. This includes social media, email marketing, video and image content on a website etc. Cornerhouse are most active on their Instagram https://www.instagram.com/wearecornerhouse/ and Facebook https://www.facebook.com/wearecornerhouse/?locale=en_GB pages. The twitter Icon is a dead link as it says that the account does not exist, so this will need updating on the website. The current web presence for Cornerhouse isn’t consistent enough. For example, the Instagram and Facebook logo are not the exact same and they both have different bios. Also, a lot of their posts don’t follow a template or theme, so everything looks out of place and doesn’t look like it is from the same account.
If I was to redesign the social posts, I would make sure every post matched the same theme so it would not only look more professional, but every post would send the same message across. Cornerhouse do have a YouTube channel that they post on, but do not decide to showcase it on their website. They should implement this into their website as it is a way of emotionally connecting to the supporters and it will encourage people to take part in future events. They have a news page on their website, but it seems they don’t have any type of mailing list. So, another objective could be to implement Mailchimp and create a mail list for donors, supports and volunteers etc. This will create a more consistent fan base for Cornerhouse as more people will be engaged in the organisation.
Key features and functionalities to be included in the new web presence.
As I discussed in the research blog, the Cornerhouse website lacks a lot of UI/UX elements. This includes animations and user feedback. These animations will only be subtle and will be used to look like the website ‘flows’ and has a more modern style to it. Examples of animations that I might use include the ‘slide in’ or ‘slide up’ animation or the ‘fade in’ animation.
User feedback can be improved by changing the behaviour of elements when they are hovered over. For example, hovering over a tile like on the current landing page could change colour so the user knows what they are about to click on. I previously talked about making the tiles interactive and making them flip like a postcard which could also be included to really increase the amount of interaction on the site.
References
Cornerhouse Website (n.d) Cornerhouse. Available Online: https://www.wearecornerhouse.org [ Accessed 9 Nov. 2024]
Cornerhouse Instagram (n.d) Instagram. Available Online: https://www.instagram.com/wearecornerhouse/[Accessed 9 Nov. 2024]
Cornerhouse Facebook (n.d) Facebook. Available Online: https://www.facebook.com/wearecornerhouse/?locale=en_GB [Accessed 10 Nov. 2024]
Slide Up Text Example (n.d) Stack Over Flow. Available Online: https://stackoverflow.com/questions/73966913/css-animation-fade-out-and-translate-text-and-fade-back-in-but-with-larger-font [Accessed 10 Nov. 2024]