CEO
Keeping the doors of learning open
Redesigning website UI to create a more homogonous user experience. Removing clutter and providing consistency throughout
Website
UX/UI Redesign
Freelance
2 Weeks
My Role
Redesign the user flow and refresh the user interface in order to incorporate the brand identity throughout.
Who's the target?
Current information architecture is over saturated and lacks clarity. Navigation lacks continuity and flow.
Brief
Redesign company website in order to create a more succinct customer user experience.
Who They Are
In the UK, around 950,000 young people aged 16 to 24 are NEET (Not in Education, Employment, or Training).
CEO (CIC) prides themselves on opening the doors of learning to those who are ostracised in our communities.
What They Offer
Providing courses and qualification, propelling those who they serve with increased opportunity of employability.
Courses are focused around careers within the construction industry.
Who They Serve
Accommodating all ages from KS4 (16-18) students to asylum seekers and refugees (all ages)
Current Website
Analysing the current state of the website provided a platform to build and start the website redesign. The current website was built with the growth of the business and in turn information pages and programmes were added without adjusting the previous experiences. In turn there is a lack of consistency in both the UI and there is a wealth of mixed information across pages.
Story
Landing page lacked narrative which explains and exhibits the good work which the company completes. The narrative for a non-profit is essential; it is what visitors need to buy into to and support their work.
User Flow
Finding information on particular courses is extremely hard. Completing a full task often leads to multiple pages which are not relevant to what the users desired outcome is.
Brand Identity
Lack of consistent branding throughout the site. The site has multiple images and colours which cause clashes with legibility issues.
Previous Website
User Testing
User testing provided both insights from the current employees and external parties on the areas of the website which they found most difficult to understand.
Asking them to complete a task and observing the steps that they took started to form an optimised user flow for the website. Allowing the redesign to reposition information and create pages which users are able to access multiple key pieces of information from.
Mid-Fidelity Prototyping
Filtering through current pages and extracting the essential information in accordance with the company allowed me to start reforming key pages.
Focusing on creating a story with what work the business does and how it can benefit both the users and wider society. Creating clear headings and consistency with brand colours and font was of initial importance. Using images alongside text which provides clear evidence of their work and how the visitors can get involved.
About Us
Booking Courses
Course Infromation
Courses
Wireframes
Brand Guidelines
Creating brand guidelines which could be used across both social platforms and the website was essential. The colour scheme is bold and strong; emotions the company wants to embed in all of their students.
I wanted to pick strong yet simple fonts which were easy to understand and straight forward. Being in the education and the construction industry; honest and direct communication is expected.
Wireframes
Final Redesign
The final design focused on producing clarity in colour, headings and images. Merging the 3 to create a story of what work the company enacts on every page. Optimising the possible user flows and creating and overall experience which focuses on directness and understanding.
Landing Page
Before
Initial page promoted purchases without explaining the impact their work completed. While the navigation bar was oversaturated with options making it harder to navigate.
After
Utilising key terms to guide users to points of interest creates clarity and ease of navigation.
Forming a narrative from issue to the impact the company has creates a key vision of what the visitor is buying into.
Getting Involved
Before
Heavy in text which lacks contrast, making it hard for users to understand how to get involved with supporting the company. There is also no obvious way of donating other than through direct bank transfer.
After
Bold titles make it unmistakable the ways in which you can get involved. While donation section provides immediate options to make an impact with option of frequency.
Programmes
Before
Lacks information on each course is about. While colours are within brand guidelines it doesn’t present the options in the best manner.
After
Titles provide information on what type of people each course serves. While short sharp description provides visibility on what users can expect.
Vocational Courses
Before
Learn more button adds an additional step to understand what the course entails, while background and font creates an overload of information.
After
First view of page provides key information on what the user should expect, who it is for and the price. The courses are now bunched and can easily see the ways in which to book.
Outcome
Client Feedback
“The use of fonts is a great, the information is a lot clearer especially with the plainer background”
“I like how the colours are very consistent and clear. They really go well with our brand colours and the energy we want to present”
“The front page story line is really good, it really explains what we do well”
Next Steps
Website is currently being implemented, the company needs to ensure all SEO is correctly set up.
Optimising website for phone resolutions. Currently the information is too small and spacing doesn’t imitate the original design. The business currently uses Wix as a hosting platform; the design will be adjusted to fit.
I wish to focus on the current course formats and improve how the user experience both in the booking process and execution.
Explore More
