Stage 1: Analysis
I chose the teacher page to redesign, because it had two sister pages that matched the pages' style where these changes would also need to take place. This would then have a larger impact on the site as a whole, rather than just doing one page. Once this was decided, I reviewed the page in its entirety on my mobile device.
Stage 4: The Redesign
Now it was time to put all the preparation together and redesign the page. Being on mobile, the biggest focus and recurring issue I came across was getting to the purpose of the page. That is, removing the extra fluff in the form of numerous photos and awkward spacing, and replacing them with a more well thought out and organized layout.
This new layout features multiple Call-To-Action buttons that will take the user directly to the pricing page. So if a certain section of information has sparked the user to want to learn more about pricing, having a close CTA button offers a smaller chance that they will navigate away from the funnel.
My other focus on this redesign was to order information in a way that made more sense. Their current design has information that nearly blends together, due to their proximity. There's even an example of two buttons stacked on top of one another, with no clear purpose for either button. Multiple photos were stacked on top of each other, taking up the whole screen. With the redesign, information that is separate, now feels separate. Modular layouts and dividers are now used to break apart information. Some photos have been omitted or cropped smaller to accommodate for mobile screens.
After accomplishing the first two goals, I focused on what the end-user was seeing. Their current video is a popup that comes from a photo with no title. While this current style fits with their branding, it offers no reason for the user to tap on it while on their phones because they don't know the video's purpose.
The next change I made was to their preheader style. On the current design and throughout the whole website, Shmoop has preheaders that are different colors to the header they lead. Unfortunately on pages like this, that color is the same color as interactable links. So, by removing this color in place of the same color as each header, we remove that confusion from the user altogether.
The last major change I made to this design was altering the CTA button color. Their current style has the buttons blending in with the page. In the redesign, I make these buttons stand out by using a contrasting color. Making CTA buttons stand out draws the users eye to them, making them more aware of the button. This can increase the likelihood they will click on it, thus accomplishing the goal of the page.
I also made numerous small changes to the page, I encourage you to view the full design using the link below.