Summary
My Role
UI Designer, Front-end Developer.
Team
Graeme Konundrus (Project Manager) Devika Prashad (UX Designer)
Tools
Adobe XD, Adobe Illustrator, Drupal CMS, VS Code.
Duration
3 Months (January 2021 - March 2021).
Skills
Web Design, Prototyping, Web Development, Design Research.
About
The McLuhan Global Village Square is a proposed five year development strategy for the McLuhan Foundation in support of Digital Media Literacy (DML), aimed particularly at children and youth. The Foundation is committed to furthering the legacy of Marshall McLuhan by leveraging his probative insights in rethinking approaches to understanding the impact of media and digital technology.
This project is the first Phase of the McLuhan Foundation website development. The website developed at the end of this phase will be expanded to include multiple new initiatives and features such as video content, chat rooms and interactive spaces. The branding and site developed by myself and team are robust enough to carry through to the next phases of development. The site is set to launch in mid April, 2021.
Objectives
- Rebranding (New Logo, colours, design system).
- Develop Website in Drupal CMS.
- Revise concepts with client.
- Design website landing-page.
Research
- Benchmarking Evaluation (Competitive Analysis)
- Colour Testing (Accessibility)
- Sitemap (IA)
Benchmarking
Competitive analysis can also be referred to as benchmarking. It helps companies set a line of minimum features, products and services to offer in order to serve customers.
Benchmarking Continued : https://drive.google.com/file/d/1w0ieTuNjpVHUT3s29fHCinIQQK-2Tx1A/view
Sitemap (Information Architecture)
Competitive analysis can also be referred to as benchmarking. It helps companies set a line of minimum features, products and services to offer in order to serve customers.
Design System
- Brand Color
- Color Testing
- Logo Design
- Branded Icon Set (Custom)
- Typography
- UI Kit
Brand Colors
After proposing three sets of colors the client wanted to go with blue and yellow, we designed this colour pallet based on some feedback that was given by the client.
Color Testing (Accessibility)
After determining a colour pallet some slight edits were made to make sure the colors associated with the brand were accessible and visible. After testing the pallet we found that there was no conflicts found and that it was made color blind safe.
UI Kit
Competitive analysis can also be referred to as benchmarking. It helps companies set a line of minimum features, products and services to offer in order to serve customers.
Concept
Homepage Mockup
Here is the final iteration of the homepage design based on the research done and feedback from the client through three rounds of UI iterations. all images as well as a background video for the landing page banner was provided by the client based on previous projects by the McLuhan Fondation.
Live Prototype
Visit Website
