Hack Your Course — a responsive web redesign (UI)
Hack Your Course is a tutoring service that connects tutors with the students who need them. They have been operating in west Vancouver for just the past half a year. In our kick off meeting our client indicated that he values making tutoring services accessible to everyone who needs it, not just those who have the money to spend. This, however, is a difficult task to fulfill since the company is currently in the red. Our client came to us so we could redesign his website so he could attract more students and hopefully make his company profitable.
The Current Site
The current website for our client was designed by our client himself. While it does contain all the information a user would need it has several areas that can be improved:
- Too much copy — Important content is lost in all the words
- No hierarchy — Fonts are used without purpose or order
- Inconsistent visual style — There is no consistent use of colors and the Logo seems out of place
Through the course of our design process, we set out to fix these issues. The UX side of our team worked to improve the flow and to enhance the prominence of the important information on the site, while the UI set out to create a more consistent visual style.
Client Interview
Before we began our visual rebranding we first interviewed our client so we could discern how he wanted his company to be perceived. Throughout the course of the interview, it became apparent that our client deeply valued fair treatment of both employees and students, claiming that he did not view students and ‘money bags’ but rather people who needed help. He also lamented the fact that a lot of tutors are taken advantage of by their employers, and so he wanted to treat them fairly too. From this we created central “why” for our design:
Lift the community to new heights
This reflects the altruistic intentions towards both the tutors and students, as well as reflects the nature behind education in general.
Gut Test
Before we began on our art directions we first preformed a gut test on our client and his wife, where we showed them 20 different webpages for 20 seconds each and had them rate each one on a scale of 1 to 5. After the rating was completed we compiled the scores and selected the top 3 highest rated so we could interview them on why they chose the ones they did.
The top left image scored highly based on the colors and the playful design, but our client did not like how busy it looked. The top right scored highly based on the clean aesthetic as well as the blue color, however they thought it looked a but too simplistic. The bottom picture was rated highly for the naturalistic look, but our client found the colors too harsh and dark. Our goal based on this was to find a design that fit in the middle of all three designs. Not too cluttered but not too simplistic, not too colorful but not too dark.
Art Directions
Two separate art directions were created based on our ‘why’ and with the results of our gut test in mind. The first direction was based on academic achievement.
Reds and blues combined with straight edges create an academic focused theme, reminiscent of books and school. The font emulates an educational atmosphere, such as what you would find on a school bus or text book
The elements for the webpage would consist of straight lines with a slight drop shadow to emulate the look of a book cover. Sans serif fonts maintain a modern, academic look while being easy to read.
Summer yellows and greens along with turquoise blues create a vibrant and fun style, full of compassion and understanding. This direction focuses more on the caring nature good teachers must posses as well as the fun that comes from good learning.
This art direction contains softer shapes that emulate tabs in a book. The fonts used for the headers was inspired by the font used by crayola, a educational toy that focuses on fun. The serif font used in the body was chosen to convey a storybook look.
When the two art directions were showed to the client he showed a preference for the Heartfelt style. However, he was concerned that the font choice was a little too juvenile, and may turn away older students, such as those in high-school and university. For this reason the fonts form the Academic style was used.
Logo Redesign
When we asked our client why his current logo (the alien showed above) was chosen originally, all he could tell us was it was made for him for free. He admitted that he did not like it originally, but as he used it more he eventually grew to accept it.
The main problem with it is that it does not reflect the brand. When we set out to redesign the logo we tried to keep the theme of education or science in mind.
Some of the very early logo redesigns started out using classic education imagery, such as a ruler or apple. We quickly decided that this direction was a little too stereotypical. Next we moved on to exploring a calligraphy style representation of the Hack Your Course initials, but again we did not like the direction it was going. We kept exploring numerous abstract ideas until eventually we came across the ‘globe’
The early concept for the globe incorporated the ‘H’ in Hack Your Course into a classical globe stand. This represented both ‘lifting the community’ as well as had roots in education. From this point we experiment with different typefaces and styles to create a logo that was both symbolic and legible.
From all of these iterations we finalized on an easy to read font that had a sight tilt on the axis on the ‘H’ this opens the symbolism up to not just a globe stand, but also other sciency things, like an atom, or a ringed planet
Design
Greens and blues were used in the final high fidelity screens as the main body of the site, with greens being the main base, with blue acting as a highlight and also secondary buttons. Main call to actions had an orange color so they would pop out form the rest of the page elements and grab the users attention. Custom icons were made to mirror the soft and curvy nature of the page elements.
Oswald was used as the header font, since it was bold and easy to read, while Lato was used on body text since it was easier on the eyes.
The color pallet changed slightly from the original art direction to contain more blues and muted greens, this gives the page a much more calming look that is more appropriate for an educations setting while still maintaining the verdant, summery fun, and compassionate atmosphere.
The mobile pages had the top navigation bar collapsed into an easy to navigate hamburger menu while the logo was simplified to just contain the ‘H’
Other elements were scaled accordingly while a call to action ‘Call Us’ button hovered on the bottom of the page as the user scrolls.
Final Words
The work we did on this project successfully brought a consistent visual style to a previously disorganized website. Throughout the website we used two fonts in different weights to create a consistent hierarchy. These two fixes combined with the reorganization of the copy that was completed by the UX team has created a very organized and easy to read website.
To view the desktop version of the site, follow this link:
To view the mobile version, follow this link:
