Please see below my research Figjam board for this assignment

 

Planning Phase- Project Goals

 

UI/UX

According to Reload UX,  “Invest in visually appealing design elements that align with your brand identity. Use high-quality images, well-chosen color schemes, and typography that is easy to read. Aesthetically pleasing layouts with proper spacing and visual hierarchy can guide users’ attention and create a positive impression.” (UI UX Design for Improving User Retention – Top 7 Best Customer Retention Strategies – reloadux)

In this project i am going to do a complete brand conceptual redesign for the Rooted In Hull website, using colour, composition, typography, information architecture to create graphical hierarchy, and improve the ease of information digestion and aesthetics when visiting the website, as well as making the site memorable with better UI/UX; as well as possible animations such as parallax, and button movements, to make the website feel more pleasant and memorable to use, thus hopefully creating returning users, and sparking interest about Rooted In Hull.

 

 

Branding and Colour

(Purple Planet (N.D) The Psychology Behind Colour in UI and UX Web Design [Blog Post] Purple Planet. (N.D) https://purpleplanet.com/blog/the-psychology-behind-colour-in-ui-ux-web-design/ [Accessed 26/11/2024]

I will undertake a design rebrand, which will revolve around the apiary, bees, and how selling 

honey could be a good donation source; and will undertake this via colour and logo, making the website more conceptual and marketable. To do this i will choose a new limited colour palette for the website (soft, light honey yellows, and light browns, with burnt umber brown text, to make it more aesthetically pleasing, as well as implementing a new conceptual honey themed logo which has more of a focus on the selling points of the organisation (the honey from the apiary), which could improve conversion rates of donation though selling honey, whilst still staying true to the meanings of Rooted In Hull.

 

 

Ethics

(Justyna Weronika Łabądź (2023) Sustainable Web Design. Why And How To Create a Sustainable Website? [Blog Post] Dodonut. August 24th. Sustainable Web Design. Why And How To Create a Sustainable Website? | Dodonut [Accessed 26/11/2024])

I will also implement an ethical audit of the website, reducing pictures,  optimising them so that they use less energy, as well as aiding storytelling and narrative by using illustrated vector infographics and heroes.

 

Accessibility

Ramotion states about accessibility and UX, “needs of users always take center stage so that their lives are made easier. In the field of UX design, diversity is appreciated, and a product is successful only when it sticks to this standard.”  (Accessibility in UX Design: Guidelines and Key Principles | Ramotion Agency)

This means that the information on the website should be made more readable; i want to achieve this by making the typography, font, and size, as well as the information volume per section, more accessible through the implementation of an “accessibility button interface” which can offer certain amendments to the UI such as mouse size, and font size; as well as compartmentalising the information to avoid overwhelming those in the Neuro-Divergent bracket, aided with the use of infographics and pictures. Furthermore I will also implement a cookies icon which can expand to show cookie options in a way that is more easy to understand and manageable for people. 

 

E-Commerce

Hallam states that donation integration should be an easy and seamless experience, allowing people to donate easily online; i want the website so have these extra pages so users can easily purchase urban honey, after reading about the mission of Rooted, helping them raise funds, and receiving something in return that could create returning users and donations for the future; they state 

“One of the most important things for a non-profit is how visitors donate online. Including donation integration and designing the experience so it is seamless for visitors to use is super important. You don’t want a lousy experience design to block visitors, making them give up and give their money elsewhere. ” ( Designing for impact: unique features of non-profit websites — Hallam)

I will add pages for purchasing urban honey, as well as a checkout feature, and a basket icon, so that people can buy honey straight from Rooted In Hull and have it shipped across the country, in order to raise funds for the organisation, furthering their goals, which is to convert more shipping containers, and host more events where they can feed and entertain people. 

Their sentiment on needing more donations can be seen on their website, stating, 

“We have received funding for our work over the years from a number of organisations including the National Lottery, Comic Relief and The Rank Organisation.  These funds are highly sought after and due to the current economic climate, are grossly oversubscribed. Whilst this situation is not ideal, funding organisations are currently our main source of income, and writing bids that accurately represent the work we do at Rooted is still an important and time consuming process.” ( Social Enterprise – Rooted in Hull)

 

 

Initial Sketches And Nav Flow Diagrams

 

 

Mobile

 

Desktop

 

 

Mobile First Wireframes

For my initial sketches, I have started with the design of the mobile website, as I want to design using “Mobile First” technique, as this has significant benefits for the uniformity of implicating the design across platforms, making it a more responsive design choice. 

According to Webflow, it is important to acknowledge the rise of the use of web browser over desktop, making it a more sensible choice to start the design process with: 

“Mobile-first design starts with optimising the user experience for mobile devices before scaling up the design to larger screens, such as laptops and desktops. 

With this approach, developers and designers recognize the increasing prevalence of global mobile users. 

They strive to create websites and applications that captivate and function well on smaller screens so they can offer users seamless digital experiences regardless of the device.” (https://webflow.com/blog/mobile-first-design)