Crafting design concepts in Figma for the evolution of the 10 year old site to be more creative, modern and in line with best practices
|What I did:|
Wireframe in Figma
Homepage Design in Figma
As part of the interview process, Kat Marketing have asked candidates to complete a task to present at second interview!
The task is to redesign the homepage for a client of theirs, Rural Community Council of Essex (RCCE) which they have recently done and is now in development.
I decided to approach this as I would any redesign. It is missing team collaboration which we would have done in reality but I hope Katie and the team like the direction I took!
The brief was very defined so the discovery for the project has already been completed, client specifications defined. Knowing nothing about the client though, I did a bit of research into who they are and what they do to get a feel for how I believe they would like to be perceived to their users and what information would be important to their users.
They are a charity, they want to help people, they want to help build sustainable futures. From the placement of the button on the example, from the sitemap, their intro text etc, they want to increase membership and have a stronger voice to support their causes in the community.
I looked at other charity websites, Nespresso, web design inspiration, placement of information on the brief and current website and came up with a few ideas and a couple of questions (notes can be viewed at the bottom of the page)!
Examples include adding the search back into the design, sticky navigation, ways of adding animation/micro interactions and selective responsive navigation (later shown in the tablet version of the design).
I broke the page down into sections to show layout options for each of them and sketched different placements of content and components (examples can be viewed at the bottom of the page).
After what would usually have been a conversation with the team, I selected what I thought would be the best layouts and created a single wireframe in Figma with a desktop, tablet and mobile breakpoint.
The Figma Wireframe can be viewed here.
I searched for some stock images on Adobe that were related to the rural theme, created a placeholder icon from one of the icons used in the example concept and as RCCE don’t have any brand guidelines used colours from the concept and introduced a couple of contrasting colours to the second option.
I created a desktop, tablet and mobile option of the homepage concept in Figma and have added hovers to show some of the different UI states.
Presentation to the team on 21st May 2021 for feedback!
Pen & Paper
Homepage Ideas, Research:
Projects and News Wireframes
CTA and Footer Wireframes