Redesigning the mobile layout of a web page to increase conversions and clean up design.
My goal was to redesign an existing page on shmoop.com to increase conversions to their pricing page. Upon review, I added the goal of cleaning up the design on mobile, as there were numerous flaws that I believe need to be addressed. Please note that I own none of the assets from Shmoop, this was an exercise to develop my skills and educate myself.
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 2: Keyword Research
Upon reviewing their current website, I also determined that the goal of the page was to reach out to teachers to entice them to use Shmoop's services. With this in mind, I wanted to at the very least alter their headline to allow Google to better understand what the page was about. By letting Google understand the purpose of the page, it will filter search results more accurately in Shmoop's favor.
Stage 3: The Battle Plan
The analysis of the site lead directly into the creation of the battle plan or outline. I screen-capped the original layout (seen here), and made a marked up version. Because their current style and branding were recently redone, I did not want to stray too far from that vibe. With this in mind, taking what they had and treating it like I would review a mockup before sending to production was a strategy that I felt was most effective and time-saving.
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.
Stage 5: Future Planning
Time constraints meant that I could only accomplish so much in the end, but what I did want to prepare for was future thinking about this design. A strategy for the future that would make an impact is starting A/B testing on the page. The first test that could be conducted is by making an anchor link section that could take the user directly to the information they want to know about. This could lead them to the goal of the page faster and increase conversions.
Stage 6: Self Review
This redesign is far from perfect. I don't know of a design out there that doesn't have room for improvement, especially in the ever-changing world of web design. That being said, the current layout of this page on mobile is not categorically acceptable in my eyes. If the page looks like it's just been adapted from the desktop layout in a quick and unorganized way, I don't believe the goal of the current page has yet been met.
One area I could have improved on was the copy on the page. I completed the keyword research and changed the headline in hopes of Google better recognizing the page, but I only edited small parts of the rest of the copy. In order for the page to rank and be successful, a further deep-dive into the copy will be needed. Related to this, the image alt tags would also need review to guide Google towards a keyword-rich page.
Overall, I am happy with my end product. Reorganizing and redesigning the page in a way that makes more sense to the user was a fun and interesting challenge for me. I learned more about keyword research and defining goals for a project.
If you're interested in speaking with me more about this project, or would like to consider hiring me, contact me on this page. If this case study didn't sway you, don't worry, I work to improve my skillset and abilities every day.
Credits:
Hero image by Marjan Grabowski