Menu
We met with VAC to discuss the design brief and clarify their objectives for the website design. Following the design brief, we reviewed VAC’s existing website. We concluded the existing site lacked high quality images and needed more brand elements to enhance the design and create a better and more engaging user experience. There was very little information on the website, and it was difficult to navigate. The site had multiple menus and lacked breadcrumbs or any way to journey back to your starting point, which often left visitors feeling lost and unable able to access the pages they were looking for. VAC asked us to analyse the current site map and suggest ways to simplify the navigation, combine pages together to slim down the number of pages and create a more user-friendly way for visitors to access information. They also wanted us to implement their new brand identity in creative ways, adding more brand elements to keep users engaged.
VAC are advocates for equality and inclusivity, so they explained that it was very important that their website was fully accessible. Some of their members have disabilities like visual impairment, so they wanted to make sure that the design we created for the website would include features that would help people with disabilities to use and navigate the site.
VAC wanted the website design to feature a new membership portal that they wanted to help them increase their membership. The portal will allow members to log-in to a gated section with access to content only available to members. They wanted the members portal to include features that would allow members to publish posts, access member-only pages with content restrictions for different membership levels, and access custom dashboards and account pages.
We began by creating a site map as a starting point. We analysed VAC’s current site navigation and identified areas where we could consolidate pages and present information in more creative and engaging ways to break up text and allow for smoother navigation. We presented our new suggested sitemap to VAC, allowed them to see how they could modify their content and update their information.
While VAC revised their website copy, we began by creating a wireframe design of the website. The wireframe showed a bird’s eye view of the website on both desktop/laptop and mobile. This allowed us a clear overview of the navigation as a whole and showed how the branding designs are linked throughout the pages on the website. These initial design stages enabled us to solidify the theme and revise elements like buttons, images, and layouts, before we committed to the development and build.
We used VAC’s colour scheme to create section differentiation throughout each page to group information and allow users to easily navigate between sections. We experimented with layout idea, and used colour in image overlays, text boxes and information sections. We added animated image slideshows with bold text and entrance animation to the hero headers on the home page, to create impact and page engagement, and we included a combination of text, bespoke icons, appropriate images, and buttons in the other page sections.
Once the wireframe for the website had been approved, we began work on building the new design. As part of the preparation stages, we collated all images, ensured they were resized correctly, and uploaded all brand assets to the website media library. We collected, organised, and planned out the new content and text VAC wanted to include on the site.
VAC’s website was built using WordPress and was bloated with inactive, out of date and unnecessary plugins that were affecting the speed of the site and had often caused errors in the past. We reviewed these plugs in and removed the ones that would no longer be needed when the new website design had been fully developed. VAC want their website to be active during the development process, so we created the new pages in the back end and arranged it so that we only published the new pages once the site was ready to launch.
We focused first on rebuilding the home page. We used the wireframe as a guide to make sure the design was consistent, the navigation was simple and intuitive, and that the site remained true to VAC’s vision. We designed theme sections like headers, footers and section styles, and hero banners and calls to action. We also organised effective layout designs and created a section for contact details and a form that directly links to VAC’s email contacts.
Once most of the development was complete, we could begin to add interactive elements, motion effects and animations to create a unique and engaging user experience. On the hero-sections, we added slow fading slideshows as a background, and overlaid coloured text boxes for impact.
We designed floating brand elements, including VAC brand icons and responsive shaped graphics that move in different directions as the user scrolls through the pages. We also arranged and animated text, images, and icons to guide the viewer to the information they are looking for while creating a dynamic feel against the usual static wall of text and images.
For the membership portal, we began by designing a log-in landing page and a member’s dashboard for members to use as their main landing base once they log in. From their account dashboard, members can navigate the portal, access member-only content, and make changes to their account and profile. VAC wanted to create a sense of community in their portal, so we also created an online forum where members can post threads, adverts, topics and reply to other members posts and comments. The portal consists of pages dedicated to resources, member posts, a community forum, and offers members the ability to book available training courses.
VAC offer two different membership packages: ‘VAC Member’ and ‘VAC Member Plus’. ‘VAC Member Plus’ membership comes with additional benefits beyond the standard membership, including access to ‘VAC Member Plus’ posts and extra content and resources. We created user roles to distinguish between the two member packages and created content restrictions to provide a barrier between the two. To encourage ‘VAC Members’ to upgrade to ‘VAC Member Plus,’ we included a feature that would allow ‘VAC Member Plus’ content to be previewed by the standard VAC Members, with a ‘Log in to Read More’ button.
Throughout the process, we kept VAC’s team up to date with the design and development stages. Once we had completed the development and UX design, we focused on testing the website. Testing involves checking all permalinks, monitoring website functionality on multiple devices and browsers, internal and external linking, site health, performance, and navigation. Once the website had passed all tests, we met with VAC to present the website and secure their final approval for the design and build. The new website was now ready to launch.
We provide VAC with an ongoing web maintenance service to ensure their website performance and security is optimised. Through regular error checks and website updates, we minimise downtime, prevent malicious hacks, and ensure that the website is secure. VAC’s website is created through customising WordPress. This involves using certain plugins necessary for the site’s functionality. These plugins require regular monitoring for available updates. We monitor regular news reports about plugin vulnerabilities and manage updates to ensure compatibility and that the website never experiences fatal or critical errors or breaks in layout or design. As part of VAC’s web maintenance package, we also manage regular text and image changes, and adding additional pages or sections to their website. We also provide daily backups to give peace of mind that if any errors do occur, the site can be fully restored.
“Grinning Graphics has completely modernised our branding and website for our main charity (VAC) and our quality assurance standard, Quality 4 Health + Wellbeing. The whole experience with Grinning Graphics has been great; Their knowledge, talent and creativity took our brief and delivered above and beyond what we imagined. The websites are not only visually engaging but so easy to run, edit and maintain as an admin. We have received so many compliments on our new websites and branding and that is largely thanks to Grinning Graphics!”
Emma Worsley - Communications Manager
Copyright 2023© Grinning Graphics All rights Reserved. Gold Rabbit Ltd T/A Grinning Graphics
