Author: burnett2023

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.

An ALS infographic to show the impact Social media has had

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.

A diagram of website improvement ideas made in Figma

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.

what does SEO stand for – search engine optimization

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.

A screenshot of a Red Cross social media post

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.

A screenshot of the WWF Instagram

A WWF Instagram Post

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.

A screenshot of the email – a person holding a glass of water

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.

Screenshot of CornerHouse Website

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.

Screenshot of bottom half of CornerHouse Website

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.

CornerHouse Facebook Bio

CornerHouse Instagram Logo and Bio

An example of some Cornerhouse Instagram Posts

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]

Practical Exercises: Adobe Web

Practical Exercises

Design and Research

https://www.figma.com/board/Ze6fiy8V2hbqJ0AT8W4vQS/RB-FIGJAM-PRACTICAL-SKILLS-AD-WEB?node-id=0%3A1&t=s03sHeSKXkrdqhpc-1

I wanted the colour scheme for the companion app to be a contrast of a high florescent colour with a dark background. This is because the contrast between the colours is useful when trying to attract the user to essential elements. The florescent green I chose was inspired by the Hulu colours as its vibrant, eye catching and creates a sense of energy and excitement, keeping the user engaged. I also took inspiration from Hulu’s content borders using rounded corners and the florescent green for the stroke accents. I chose a darker grey over black as the contrasting colour for my elements as the colour helped always keep the white text readable against the dynamic background. My Personas are very generic because my target audience are gamers who play shooter games. Gamers can be of any age, have any occupation and could all have a separate reason they enjoy gaming. For example, someone could enjoy gaming because they are a software engineer, so they appreciate seeing their job skills implemented into a video game. I researched a few competitor apps and then analysed them to see their strengths and weaknesses. The general outcome was most of the apps did not have a news or a community page that the user could look at. Some apps also had shops, but I wanted my app to be focused on statistics and the community, so I thought not to add that.

User Flow and Wireframe

User Flow –https://www.figma.com/board/Ze6fiy8V2hbqJ0AT8W4vQS/RB-FIGJAM-PRACTICAL-SKILLS-AD-WEB?node-id=0%3A1&t=s03sHeSKXkrdqhpc-1

Wireframe-https://www.figma.com/design/k42B58u2LtCJV0jl57ts2K/Untitled?node-id=84%3A402&t=qQ8i4RN46i3tWbA4-1

When it came to wireframing the app I tried to make it as simplistic as possible, so it becomes accessible and easy to work for any type of user. This is why I created 5 big elements on the home screen that the user can click on with ease to get them where they want to be as soon as possible. Alot of the content takes up the screen on pages like the community page. This is due to the fact I had the idea of making the content scroll up and down the page, so I did not have to sacrifice the size of the content. This makes pages like this more accessible for the older users. I added placeholders for where I would like to put my images across the app. All the images I will use are from the copyright free services ‘Unsplash’ and ‘Freepik’. My user flow map shows the essential user flow of the companion app and the options the user may be faced with throughout their time navigating the app. I developed the user flow map from the very start when the user clicks onto the app. The user either logs in or registers and only when that is completed will the user be greeted with the homepage of the app. The key action on the user flow map is when the user chooses between viewing the News, Progress, Stats, Friends, or community page. This is because every action after that will eventually loop back to that page.

UI Prototyping

https://www.figma.com/design/k42B58u2LtCJV0jl57ts2K/Untitled?node-id=0%3A1&t=qQ8i4RN46i3tWbA4-1

When creating my high-fidelity version of my companion app I wanted to have a lot of UI elements in my design, but I did not want so many that it would start to distract the user. I First started by creating a dynamic background that compiled of a bright and dark green gradient that would flow around the screen depending on how long the user took on the page. As I want my app to be accessible, I made sure that all the call-to-action buttons had some type of feedback when hovered over. Users will also get feedback from the taskbar when they press one of the buttons, to confirm they have done so. The news banner at the top of the homepage is on an infinite loop of scrolling through the different headlines. This gives the user a higher chance of clicking on a headline they are interested in whilst they are on the homepage. When the user clicks on one of the headlines on the news page itself, it has been prototyped to give a smooth animation of the image being stretched out and the text appears below. On the Progress page I made the top element able to switch between different achievements when it is dragged across. I did this because it does not sacrifice extra space on the page, and it also gives the user extra information without having to scroll through the content just to find the information. The community page has a vertical scroll for its content on both pages which was achieved by using auto layout and setting the scroll to vertical. The subheading for ‘Featured’ and ‘Following’ has a responsive green line so the user receives feedback when they press on one of the subheadings. The community page also has a working interactive like button that was created from scratch in Figma. The friends page is similar to the community page as it also involves scrolling, but this time horizontal and vertical. Only a few profile pictures have a green stroke around them, and this is because it represents that person being online so the user can know instantly who is ready to play. The stats page is the page with the least amount of UI elements on it. This is because people that want to view their statistics might be in the middle of a game or in between games, so adding lots of UI elements to the page will slow the process down of them trying to see their records. At the very start when the user opens the app, I created an infinite spinning loading wheel in Figma to give time for the rest of the app to load depending on the user’s internet speed and connection. I used this wheel elsewhere in the app to represent delay and loading times on important and bigger pages.

Adaptation

tablet –https://www.figma.com/design/k42B58u2LtCJV0jl57ts2K/ADOBE-WEB-PROJECT-RB?node-id=117%3A877&t=qQ8i4RN46i3tWbA4-1

Web-https://www.figma.com/design/k42B58u2LtCJV0jl57ts2K/ADOBE-WEB-PROJECT-RB?node-id=150%3A2739&t=qQ8i4RN46i3tWbA4-1

The adaptation from the phone app to the tablet was a subtle change as its very much the same version but adapted to a larger screen. It was a long but straightforward process of making sure all the elements had the right constraints. For example, everything that is in the centre of the page had the constraints ‘centre’ and ‘top’ this ensured that when the frame stretched everything was kept centre. The toughest thing to get to adapt was the taskbar because I needed to keep the icons centre and the same size, but I needed the taskbar rectangle to be able to stretch when its resized. I found this difficult at first as the taskbar was one whole component. But adding a separate auto layout to the icons and the rectangle meant that I could give the elements different constraints, and this solved the problem. On the community page I gave the subheading ‘scale’ constraints which meant that when the page changed size the text and the bar line underneath increased in size and stretched also. Adapting from the tablet to website was a little bit more difficult as some elements had to be increased in size for example the News banner on the homepage. But because I had already set the constraints it made the transition from tablet to website much easier.

UI/UX UI/UX Design Portfolio

Design Portfolio

PDF Download

https://drive.google.com/file/d/1-KTZdK1i457YP-08aBa947Y5Vj62HOeM/view?usp=sharing

Videos

High Fidelity Figma Website Design

High Fidelity Figma App Design

UI/UX UI/UX Development Log

App Design Artwork Development

Post author By burnett2023
Post date April 8, 2024
No Comments on App Design Artwork Development

https://www.figma.com/file/yZEHLxDvtDTtn69VIAav4g/Mid-Fidelity?type=design&node-id=2077%3A110&mode=design&t=isRgc2y4BTKhLD55-1

The first thing I got rid of on the home screen was the two-tone effect on the bars because although it looks aesthetically pleasing it may look confusing for the visually impaired, so I made it simpler. The bars have been given a drop shadow and I made the background darker than the foreground to give contrast and clarity to the users. There are many elements from the website that have been brought into the app design to keep both designs in uniform with each other. For example, the arrows have also been updated for future animation opportunities and the titles and the headings follow the same typographical standards and design. In the low fidelity design I had the call-to-action buttons and then when the user scrolled down there would be further information on the page. In the mid fidelity design I scrapped that idea and instead made the call-to-action buttons larger and made the list fill the screen. This has been done so the user only has their focus on the call-to-action buttons, which will reduce the time for them to buy tickets. This process follows Fitts’s law. Laws of UX (2024), states Fitts’s law is “The time to acquire a target is a function of the distance to and size of the target.” The navigation bar at the bottom has had a detailed change. To help with accessibility I gave the buttons icons, so people who have difficulty reading small print will have an idea of what they are clicking on. To help users indicate what page they are on, I gave the icons an outline and made the text bolder, so it looked slightly different to the rest of the navigation bar. This gives the user feedback as it tells them they have successfully clicked on that page. On the tickets page I kept the theme the same by using similar boxes from the home screen for the different tickets. I did not include any text below the ticket price like on the website. This is because the companion app should allow for a quick express checkout, so only the vital information has been added and if the user needs more information, then they can visit the website. In most of the pages a footer has been added to not only indicate that it is the end of the page but to also add other useful information, for example social media links can help keep the users updated with the festival. The rest of the pages mirror the website’s design just by adjusting the dimensions and the text size for it to be suited for a mobile phone application.

UI/UX UI/UX Development Log

Mid Fidelity Animated layouts (Post 3)

Post author By burnett2023
Post date April 8, 2024
No Comments on Mid Fidelity Animated layouts (Post 3)

Above is a video of my mid fidelity design animations for my website and app. The website and the app are functional both up to the login pages. Both the website and the app function in a very similar way and are just adapted to fit the user’s needs of being on a mobile or on a computer. The process of making a functioning app and website involves creating individual frames that act as the pages and adding elements such as text boxes and shapes to create the look of the website and app. Once the designing stage is done then it becomes time to wire frame the pages. My functioning website and app has a lot of wireframe connections because I made not only the call-to-action buttons function but the navigation bar. These are part of the core functions that need to always work in order for the user to get from the home page to the checkout page, and everything in between. These core functions will be updated and added upon when the high-fidelity version if the website and the app is created. Things like animations would be added. For example, fade in and fade out of some elements and the menu could use a slide animation to be presented when it is clicked. The Gallery is another example of what would be updated as I would animate and make the slideshow function when the buttons are pressed. The arrows used around the website and the app can also be animated when the user hovers over to give them some feedback. This can be done in several ways, one including making the arrow stretch out which can edge the user into clicking the button with excitement and curiousness. I used the logo to my advantage on all of the pages on the website and the app by making it a quick and easy one clicks button back to the homepage. This can be used by all users for a majority of reasons, for example refreshing the page or just needing to get back to the homepage to see an overall of the website again. The design of my call-to-action buttons makes them the most used function across both the website and the app because of how prominent they are and how quick it takes the user to click on them to go straight to a particular point on the website. One thing that needs fixing for the high-fidelity design is the function of the navigation bar on the app to move with the screen and always stay visible when scrolling.

UI/UX UI/UX Development Log

Colour Planning (Post 4)

I have chosen the above colours for the colour scheme for my website and my app. I have chosen the vibrant orange and yellow to be the centre of attention and highlight important things like call-to-action buttons, event details, or featured attractions, guiding the users focus and engagement. The black and white have then been chosen to be used as a contrast of the vibrant colours and will be used as a background colour or serve as a backdrop. Orange adds warmth, enthusiasm, and energy, while yellow adds brightness and positivity, creating an inviting and engaging atmosphere for the users that visit the website and use the app. Black is often associated with luxury, style and authority making it an excellent choice for a car festival website that aims to convey exclusivity. Whereas the white provides clarity and simplicity ensuring ease of navigation for users. White backgrounds also allow text and graphic elements to stand out prominently which improves visual hierarchy and can be used to guide he users’ attention to important content. Due to the orange and yellow being close to each other on the colour spectrum it gives me opportunities to create a gradient. This orange and yellow gradient can portray a sunset which fits in with the theme as the festival will be active when the sun sets. The emotions evoked by the sunset can link to the atmosphere and the experiences of the car festival. For example, sunsets are known for their beauty and inspiring colours, which can evoke a sense of wonder and appreciation for the natural world. Similarly, a car festival displays beauty and craftmanship through automobiles, from sleek modern designs to restored classics that leave attendees in a sense of awe as they admire the vehicles elegance, innovation, and engineering on display. Sunsets can often bring people together to watch and appreciate the beauty of nature. Car festivals also foster a sense of togetherness among automotive enthusiasts, who share their passion for cars and connect with individuals with the same interests. The festival is a gathering place where attendees can create new friendships, exchange stories and bond. In my mid fidelity design you can see the more important or things that need highlighting are in white and the backdrop is a slate grey. The white would be replaced with the orange and yellow with some parts using a gradient for more impact on the website and app. The black will most likely be used for the menu and the top bar, with the white finally being used for the backdrop. Both the black and the white may be used elsewhere to create a contrast to help make any essential information more readable and stand out more. The colour scheme I have chosen considers accessibility and inclusivity for all users. For example, the combination of black with orange and yellow gives a sufficient contrast and ensures that all the elements in the interface remain distinguishable for users that are visually impaired or colour blind.

UI/UX UI/UX Development Log

Typography (Post 5)

Throughout my mid fidelity design I used the face type called Montserrat, using numerous variations with italics and bold typography. One of the features of the typeface is its geometric shapes and clean lines, which gives it a contemporary and minimalist look. The typeface belongs to the san’s-serif category meaning the absence of the serifs adds to Montserrat’s simplistic look. The round shapes of characters like ‘o’ and ‘e’ are slightly squared, adding a touch of modernity to the face and the upper-case letters are distinctive, featuring sharp angles and straight lines that give them a bold and commanding presence. Montserrat has a variety of weights and styles, which is one of the reasons I chose it. The extensive range means the typeface can adapt and can be used for headlines or body text. That is why in the mid fidelity design no other typeface was used. The generous spacing between characters and the clean lines make the letters easily distinguishable, even at small sizes. This is another reason this typeface was used as it improves the accessibility of the app and the website for users were readability for them is essential. The design of Montserrat is influenced by the principles of modernism, emphasising simplicity, functionality, and clarity. This makes this typeface perfect for the website and the app as it links with the UI/UX design principles. Montserrat also delivers global accessibility as it has extensive language support, including Latin alphabets. This means the typeface is great for UI/UX design because it ensures that all the users can interact with my website and my app comfortably. My website’s content is for a car festival. Montserrat’s sharp edges and clean lines convey strong precision that can be associated with the technical refinement of, car engineering and design. Car festivals feature exciting attractions and thrilling performances that need to be reflected in the design and headlines of interfaces. Montserrat’s bold weights are perfect for portraying impactful headlines that catch the user’s eyes and help generate excitement through the website and the app. Everyone around the globe can be attracted to the same cars meaning car festivals can attract tourists all over, making it essential for the website to cater to diverse audiences. As Montserrat supports so many languages, it ensures all users they can navigate simply and effectively around the website and app.

UI/UX UI/UX Development Log Uncategorized

Website design artwork development

Post author By burnett2023
Post date April 8, 2024
No Comments on Website design artwork development

https://www.figma.com/file/yZEHLxDvtDTtn69VIAav4g/Mid-Fidelity?type=design&node-id=0%3A1&mode=design&t=isRgc2y4BTKhLD55-1

I made some significant changes to the design from the low fidelity design. One of these significant changes was the change in how the typography was presented. For example, any text that was used as a heading or presented essential information was capitalized and italicized. Now in the mid fidelity the text is more noticeable, and the italics gives the text a sense of motion. The festival name and the text underneath were replaced with a simple logo I made because it makes the user focus more on the call-to-action buttons first and helps emphasize the law of similarity. The page has been extended for my mid fidelity adding a gallery section and a frequently asked questions section. The gallery section did not take much room up because I created a frame for a slideshow so in the future when the buttons are pressed the images move along. This was to accommodate for the design principle of simplicity; it stops the user from scrolling down the page endlessly to get past the gallery section if they do not want to view all of it. Developed from the low fidelity design is the functioning menu that takes the user to various parts of the website with ease. The menu also follows the accessibility design principle because some people will use the menu to navigate to the tickets etc. and not use the call-to-action buttons because they want to explore the site with leisure. The tickets page was reworked to be less compact and more user friendly by having bigger banners to display the price and information. The arrows throughout the mid fidelity design have been updated from the low fidelity because the new arrows give me a future opportunity to animate them when the user hovers over the buttons. There was not much change to the timetable and travel page as from the survey I created, the responses resulted in them being minor advisories, for example to change the heading to the top so it gives more room for information below. I also gave the heading a drop shadow and bold italics to stand out to the user, reducing the time for them to find the information they are looking for (Fitts’s Law). The Log In page was updated in a couple of ways. The text was capitalised and made bolder for the users to understand the importance of the page. The VIP Login button was moved and remade for it to be seen by all users. I separated it from the rest of the page by putting it in a separate-coloured box to stand out. This sends the message that the box is for VIPs only and may intrigue users to buy the VIP to enter that side of the website. I got rid of the search bar that was originally in my low fidelity design because due to my menu being simplistic and efficient enough to use, I decided there was no need for both.

UI/UX Development Research Blog

Defining the UX for my festival.

Post author By burnett2023
Post date February 20, 2024
No Comments on Defining the UX for my festival.

The festival project will be a car show festival that will display current automobile models, concept cars and classics, and will provide attendees the opportunity to participate in car related activities. I will call the festival ‘HumberCarFest’ and it will be a local festival in Hessle, a town in the city Hull, England.

The usability goals for the festival will be about ensuring the attendees can easily navigate the event grounds, having access to information about different cars on display and engage in interactive activities.

Problem Space.

Ensuring an exceptional attendee experience is vital for the festival’s success. This involves providing diverse car displays, interactive activities e.g test drives, entertainment and socialising opportunities. Engaging with car clubs and sponsors is crucial as it would boost attendance. Providing incentives to exhibitors would help them participate enthusiastically. Essential infrastructure, such as parking and restroom facilities must be provided, along with ensuring compliance with regulations at a suitable local venue e.g Humber Bridge cark park. Marketing and promotion efforts are necessary to boost attendance and attract support from companies. Safety measures, including crowd control and medical assistance are very much needed. Financial management including budgeting and sponsorship agreements, is essential to maintain attendance levels. Additionally, considering the impact on the surrounding community, such as traffic congestion and environmental concerns is crucial for successful event planning.

Requirements Gathering and Analysis.

My audience ranges from teenagers to Middle aged adults, 15 to 50 because any individual that appreciates anything to do with automobiles and their inner workings is called a Car enthusiast.

Stakeholders:

Car Manufacturers
Car Dealerships
Car Enthusiast Clubs
Automotive Part suppliers
Local Businesses
Local Government/council and tourist boards
Sponsors
Attendees

Car manufacturers may see success for them as having increased brand visibility, positive feedback on their displayed models and car sales generated from the festival. They might assume that showcasing their cars will potentially lead to higher sales and that the festival will attract a significant number of enthusiasts who are potential customers.

Car Dealerships would likely consider success, increase in foot traffic to their dealerships, and converting potential customers into sales. They may assume that participating in the festival will allow them to reach potential customers and that showcasing a variety of cars will help attract potential buyers to their dealerships.

Car Enthusiast Clubs’ recognition and appreciation for their members’ cars would be considered a success for them. As well as working opportunities with other enthusiasts and clubs. They may assume that the festival will attract a diverse range of cars and enthusiasts and opportunities to connect with other enthusiasts.

Automotive part suppliers would see success in their increased sales, increased brand awareness and customer engagement with the brand during the festival. They may assume that participating will allow them to showcase their products to a targeted audience of car enthusiasts who are more likely to be interested in purchasing parts.

Local Businesses might measure success by their increased revenue during the festival, any brand visibility and positive feedback from any festival attendees. Local businesses may assume that the festival will generate positive publicity for their businesses and the local area.

Local government and Council/Tourist boards may consider success based on the increased tourism revenue they receive and the positive impact the festival has on the local economy. An enhanced reputation for the area as a host for automotive events would be considered success for them as well. They may assume the festival will attract tourists boosting revenue and assume the festival will be well managed and comply with relevant regulations and guidelines.

Sponsors success would be assessed on their brand exposure and their ability to reach and engage with car enthusiasts effectively. They would assume that the festival would provide them with opportunities to engage with their target audience increasing brand exposure.

Attendees’ success for attendees could be defined by the level of enjoyment and entertainment they experience at the festival, the variety and the quality of cars on display and the opportunities for meeting and socialising with fellow enthusiasts, as well as the overall value for money. Attendees may assume there will be a diverse range of cars and enjoyable activities which would enhance their experience.

Users Needs.

My users’ core needs in this space would be designated spaces and adequate parking for people that will drive to the festival, a simplistic but affective timetable with details on the next events, adequate toilet and waste facilities and fire and medical facilities. Other things that will be the users’ needs are things like food and drink stalls, clear map directions to the festival and a detailed coded map of the festival grounds so people know where to go. My users (the attendees) would consider success as having an enjoyable experience e.g seeing a range of cars and participating in activities. Attendees would also see success as value for their money, opportunities to socialise and make connections, and feel safe and comfortable throughout the festival.

Hierarchal Task Analysis.

After exploring Reddit I reviewed people’s experiences of festivals like Leeds Festival and the Goodwood Festival of Speed.

Users said:

Lots of food and drink vendors – expensive
Parking was free, but it is really busy.
(Goodwood) Supercar parking – people can see high end cars for free and owners have their cars protected more.
(Goodwood) Lots of action areas e.g off road shows
Plan your day in advance
(Leeds) Keep as a group and have a meet up point

Accessibility Concerns.

Reddit also allowed me to gather user experiences of the festival websites and apps. One thing I found common across the festival websites is that there only seems to be a call-to-action button for tickets, so it makes it hard to find information on travel and accessibility information. Goodwood festival users also complained that there was no timetable for the festival events on the website, so people couldn’t plan their day in advance. My website would tackle that by having numerous calls to action buttons for tickets and travel information and will implement a timetable for the festival. I will also make my website more accessible for the visually impaired by providing a contrast in colours, limit the number of different colours in the interface and not relying on colour alone to communicate important information. The Leeds festival website is a good example of using accessible things like these.

User Journey Map.

Personas.

I want my designs success to look like a website/app that makes it an easy and stress-free process to buy tickets, from the homepage all the way to the checkout page. Success would result in visually impaired users having no problems when it came to viewing my website by e.g not relying on colour to communicate important information. People being able to have access to the timetable prior to the festival would also be a success.

My assumptions for my festival include that Car clubs and car manufacturers/dealerships bring automobiles to showcase, that the festival brings tourism into the town, and that there will be enough parking spaces and toilets for the attendees.

UI Principles Applied To My Design.

One design law that will be applied to my design is the Law of Similarity. The website Laws of UX (2024) states “The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated.” This means that my call-to-action buttons will all be the same shape to tell people that they will be directed to a different page. Fitts’s Law will also be in my Design. Laws of UX (2024) states “The time to acquire a target is a function of the distance to and size of the target.” This means my call-to-action buttons will be easy to see by making them distinguishable, so it helps all users find the call to actions efficiently.

I can apply the festivals usability goals to the interface by including a timetable that will show information of what is on and where into the website and app, and having several call to action buttons to help users easily navigate through the grounds and the website/app.

A feature will be included in my design that when the user hovers over a button, the colour changes, which will confirm to the user that it is a clickable button, and there will be a suttle animation for the visually impaired.
There will be a Separate Log in page for attendees and the rest of the stakeholders. The rest of the stakeholders will be able to access things like updated blog posts and FAQs informing them about the festival from an exhibitor’s point of view. It will also give them access to a barcode to scan to get into the VIP and exhibitor only areas.

Rejected Design.

This was a rejected design because of a number of things. To start the ticket call-to-action button isn’t visible at the top of the website meaning some users may have to scroll down to find it, increasing purchase time. The website is full of text in random places and has no pictures which won’t grab the users attention. The menu button is also placed in a position that means the user has to scroll again to find it.

Low Fidelity – Website.

Low Fidelity – App.

One constraint in my Low fidelity design is the fact that the call to action buttons are large and bold meaning they stand out to the user so it prevents them searching around the website endlessly to find the buttons increasing the amount of correct choices the user makes.

I have organised the call to action buttons together so the stakeholders have access to parts of the website with ease. The tickets page has a simplistic but affective layout with an instant price and with information underneath, to give the attendees (stakeholder) a good overview of what to expect. Stakeholders have a good overview of the Log in page as well because it allows the different types of stakeholders to use the VIP log in page.

References.

Fuzzy Math (accessibility concerns) – Accessed on 20.o2.24 Available at: https://fuzzymath.com/blog/improve-accessibility-for-visually-impaired-users/

Laws of UX (law of similarity & Fitts law) – Accessed on 02.03.24 Available at: https://lawsofux.com

Leeds Festival – Accessed 15.02.24 https://www.leedsfestival.com

Goodwood Festival of Speed – Accessed 15.02.24 https://www.goodwood.com/horseracing/qatar-goodwood-festival/?utm_source=google&utm_medium=cpc&utm_campaign=LS-PMax-QGF&utm_source=google&utm_campaign=21063621970&utm_medium=cpc&gad_source=1&gclid=EAIaIQobChMIv57TrL_dhAMVnI9QBh0rGgH8EAAYASAAEgJVpfD_BwE

Development Log

Cover Designs

For my three cover designs, I wanted to use photos that I had taken. Luckily, I went to a Formula 1 museum at Silverstone and got photos of F1 cars and the Silverstone track that hosts the British Grand Prix. So, for my first cover design, the picture of the Silverstone circuit was used. I blurred the image slightly to help make the headlines and the text stand out more. Anton Regular was used as the main font body because of its slim and tall characters it gives the headlines a dramatic and bold look. I used a vibrant red colour for the main headline and then a vibrant yellow for the sub-headlines to help the viewer understand which is the main headline. The main headline is slightly bigger than the other to so people will read that one first. Foundry-monoline extended font was used for the subtext of the headings. I used this font because it is the same font, I have used for my pages, but the bold italics give a nice contrast to the other font used as they appear a lot calmer, which is perfect for the people that want to read the full headline. I added the racing strip across the bottom of the cover to show readers it is about motorsport. I then added black strips at the top and bottom of the cover with some contact details.

My second cover design focuses on an F1 car that I took a picture of. The first process was getting rid of things in the background to have a nice clean canvas to work with. This involved a lot of content-aware fill and erasing. I then added a radial blur around the F1 car to look like it was going at immense speeds. I kept the same fonts and added a new colour to create a cover full of colour. My initial thought with the colours was to go for a neon-type vibe, that’s why I used black as the main body of colour and then used vibrant colours for the outline. I moved all the information to the top of the cover so people can look straight at the top and find everything they need including the issue number. I kept the flag strip but made it more subtle, so people still know it’s a motorsport magazine.

The Third cover is an image of F1 cars in the museum, with an older-era car at the front. This is why I thought I’d change the colours to a retro look. I kept the same fonts again, but this time used pastel-like colours that still looked vibrant and used a white outline to give it that vintage look. For the composition, I had the main headline take the bottom of the cover so I could make the text big for people to see. I put the ‘silver clash’ headline in silver to match, but it looks neutral and retro looking which wasn’t intended. The ‘rising comet’ headline was written down the side so you could see the background of the image, but the vibrant orange still meant it wouldn’t go unnoticed.