Harrow school would like to refresh their Enterprises website and whole brand image. To promote its commercial services, lettings of Harrow School’s facilities, provide holiday courses, run the sports, tours, and retail elements of the school and offer many other commercial services.
When we (that includes me, the developer, our design director) work with Harrow team in Nov 2017. The demands of the website had summaries by the in-house team. As a UX&UI designer, it was my role to work alongside the team to design the user experience of the beta product and have it ready to be shipped within one month.
Scope
- UI&UX Design
- Web Design
- Strategy
Making start
They still would like to keep the original looking and feel, but with more corporate style. After finish the rebranding, we are moving to change their old website to a modern web stack.
Harrow School Enterprises website was built on an old WordPress theme that had been hacked to death over the years. There is no actual shopping experience lived. Updating pages was a pain and the user journey wasn’t seamless either. We decide to use this launch as an opportunity to rebuild our website using a modern web stack.
Targeted
Personas
Miss Kate
Bride to be, looking for a wedding venue.
Mr. Joe
The Father of two kids, looking for a kid swimming school.
Directer Wong
The film director, looking for a film scene.
Project Challenge
Pain point
The current website is voluminous and the level of content and number of services available can be quite overwhelming and confusing to users.
How to get messages across, and provide intuitive navigation whilst covering all the products and services?
Analyse the current site-map
Suggested sitemap
Solutions
visual
Enhances visual hierarchy, by using sizes and scales to pull focus. Using color contrast and white space to make objects stand out.
Give elements more important than others and help draw users’ eyes toward a certain area.
Features
Using CTA can help generate hype about a product or service, grab users’ attention, and encourage them to seal the deal.
Online live chat, helps users get to answer questions, support challenges, resolve issues, or direct users to the specific solutions they need.
Starting with wireframes
Before
Incorrect colour usage with tiny and
even confusing typography.
New
Clean and fresh look, easy to navigate, and finding information.
Useful, Useable, Accessible
We packed up that info, explored lots of design directions, revamped the site, and in late 2017 launched the first website that truly sought to position as a solution to the last-mile commuting problem.
I led all of the design work, and collaborated with the Harrow school enterprise team, and our director manager Richard with the designs. I also led the project with an external development agency to build the pages and launch everything on time (and within budget).
Looking forward
The complications of this whole project are unique. When done right users don’t notice how complex things are. There is still a lot to be improved on this website. The past few months have been scrappy, fast-paced, and challenging. That being said, I’m proud of everything we’ve learned so far in a short time.