The Goodwill Excel Center Landing Page
In 2017, I took an HTML/CSS course to strengthen my coding skills and better my communication with our team developer.
For my project, I focused on redesigning The Goodwill Excel Center website and creating a responsive site to make it more accessible to students who may not have access to a desktop computer.
The Goodwill Excel Center
Coding Exercise
front-end / Prototyping / Branding
Role Front-End Development, Prototyping, Visual Design | Client The Goodwill Excel Center | Deliverables Concept, Final Coding Project
In 2017, I took an HTML/CSS course with General Assembly to strengthen my coding skills and my communication with our developer. For my project, I focused on redesigning and making a responsive homepage for The Goodwill Excel Center site.
Role
Visual Designer
Front-end Development
Tools
Adobe Illustrator
Github
Atom
Deliverables
Fully coded responsive landing page
The Problem
My first attempt at redesigning The Goodwill Excel Center in 2015 website did not go as planned. It was one of my earlier projects and although the design (left) was approved, there were limitations that the CMS that left the live version (right) wanting.
Although I had taken a coding class or two in college, I wanted strengthen my communication with our developer, and in 2017, I asked and was approved to take a General Assembly HTML/CSS course. As we were able to choose our final project, I decided to come back to this original site and make this my case study to learn the some language I could use to help build future sites with our developer.
Spoiler Alert… we’re still friends to this day!
Overview
CHALLENGE
Our biggest focus was to get more increase the amount of students applications. We would need to simplify the application process and put future students in touch with our counselors as soon as possible. One small apply now button at the bottom of the fold was not going to cut it.
SOLUTION
A majority of the people interested in enrolling did not have or were unable to access a computer. I created a responsive site and used a mobile-first approach so the vital site information could be accessed at the smallest level for future students who don’t have regular access to a desktop.
[define]
Project Goals
A large focus of the project was looking into how the current mobile experience could be improved for users. The Goodwill Excel Center had just opened its doors for the first time in fall of 2014 to 150 students and the goal was to keep more students coming in every year. The website needed to be accessible in every way, no matter what device a user so they could learn more about the school and in turn apply. We had limited time in the course so I decided to put my efforts towards the homepage and set a few goals:
Build mobile-first, exploring how the site would act at different breakpoints and build clean code
Create a clean and mature website for adult high school students. The average student was around 29, a single parent looking to be an example for their children. I wanted to use the brand palette in a more serious manner, so that interested parties knew this was a serious life-changing endeavor.
empathize
What we’re working with
The Goodwill Excel Center provides a very useful services in that it allows adults to earn their high school diploma. However, when landing on the page, the prospective students were overwhelmed with a multitude of colors and fonts and copy, only half of which was useful and the rest hidden behind navigation.
for most visitors to the site, a mobile device was their first if not only option.
The current manner in which the website was show was unacceptable and had a high bounce rate. In order to increase student enrollment, we would need to take a mobile first approach and build out. That way potential students had the ability to research and enroll no matter what device they were on.
solution
Wireframe
Since the objective was to make the site accessible to future and interested students who do not necessarily have the means to use a desktop computer, I working within the constraints of a mobile device to create a series of wireframes to ensure all important information was visible and easy to access. I kept the two main CTAs, Apply and Explore above the fold. And below there are additional opportunities to learn about the school or read stories from alumni.
Define & Ideate
START SMALL
Since the objective was to make the site accessible to future and interested students who do not necessarily have the means to use a desktop computer, I worked within the constraints of a mobile device and created a series of wireframes to ensure all important information was visible and easy to access.
Original design
A lot of notes to ensure everything was labeled correctly when I began coding. This design was successful in mobile form, however I corrected a few design choices due to how elements looked at different breakpoints.
Prep Time
A previous design for the homepage, I was working through the hierarchy and labeling everything in preparation for the actual coding.
“Excel in Learning. Excel in Life.”
— The Goodwill Excel center
prototype
Revisions
To make the homepage a bit move inviting, I changed the main typeface and created a bit more whitespace throughout. I still kept multiple links to apply above the fold and used the wireframes of the mobile version to help me determine what each breakpoint would look like.
lessons learned
It doesn’t have to be Klingon. Put forth the effort to speak a common language
This new design of the website never went past the folders in my GitHub, but my boss was very impressed by my initiative and from then on I started leading all of the digital endeavors for all lines of business - landing pages, banner ads, registrations etc and working closely with our developer to create more useful experiences for everyone who visited the site.
It doesn’t have to be Klingon. Put forth the effort to speak a common language
Taking this class provided me opportunities to learn to alternative ways to speak to my team and get even better results than before. What was once a rectangle is now a container and this title, now an H1. This allowed me to justify my design decision with more clarity to coworkers and executive stakeholders alike.
Not only did improve our other pages going forward, being able to have fruitful discussions on opportunities and limitations led our developer to get excited about possibilities and empowered them to bring their concerns and solutions to the table as well whic led to productive conversations and
What I learned
It was a great exercise in learning that sometimes what you think is a great design, might not always be great for the user. And whether technical terms or just trying to explain an idea, it definitely helped me in talks with every developer I’ve worked with.