Sign Up Page Refresh
One of my first projects at Get Schooled was to update the sign up page. This project was a great introduction into the Get Schooled audience, the custom CMS and the content files available to the team.
Goal: For the sign up page to be more consistent with Get Schooled’s brand and voice
Tasks: Update the design, Pick an image that feels fresh, Consider mobile screens, Answer the question: “Why should I sign up?”
Constraints: Could not change page code, form had to stay the same
Time frame: Two weeks
Mobile and Desktop views
Starting the Process
At the time, I was still fairly new. I needed to: know the audience/users, the constraints of the CMS (what could be changed - text, pictures, code), and get familiar with the thousands of Get Schooled pictures.
Assessing the Original Sign up page
“Why Join” text box is grey in mobile, yellow in desktop
Images get cropped
Too much text
Images are set as a background of div and do not resize nicely, 3 separate divs.
Conclusion
Design with one div
Research & Analysis
I looked at different sign up methods of other companies to take the best elements from each.
This example had positive message, one image with minimum colors, and icons.
I liked the use of icons followed by words underneath to deliver the value propositions.
This one had a half-page image, the words “gain access” and an example of a piece of content.
I liked the bold image because it represented the example content, and the words “gain access” because the words sounded exclusive.
This example had a new shape, bold colors, and “fun” messaging.
I liked the shape because it was different and eye catching. The yellow is also a main GS branding color.
First design
First Design
One image - The image will resize better in mobile and can be easily updated.
A new shape to frame the image - Bolder and stands outs
Brand colors - Bolder and more visual branding
“Join Get Schooled to gain access to” wording - Impression of exclusiveness
Icons and minimal text - Visual and word messaging
Feedback
Too much yellow
Logo isn’t needed
Image should be stronger
Current sign up page of Get Schooled
Iteration after feedback
One bold rectangular image - I was able to find a more fun image that was more consistent with the GS brand. Though the circle image was different, it was a little too different.
Bold colors used as accents - A full block of yellow was too much color so I used it to accent and punctuate the messaging in the image.
“Join Get Schooled to access:” wording - I shortened the copy and accented it with yellow.
Icons are in a separated section - The icons are easier to see on a white background and given a section of their own.
Reflection
This project was a great way to become familiar with the pictures in the Get Schooled database. I developed a connection with our audience and what Get Schooled wants to do. Through this process I realized how important: it was to choose the “right” image, word choice, and being familiar with the audience. The final image feels alive, and connects fun and education. All the words in the image add value and stays consistent with the tone and voice of Get Schooled users -your education is in your hands and here’s how we can help (the value propositions).