Responsive Redesign

Decreased bounce rate by 45%

|

Improved SEO by 9%

|

Decreased bounce rate by 45% | Improved SEO by 9% |

About

My UGuide is a college consulting company for high school students and their parents who would like to find the best possible fit for college. 

Challenge

Redesign the existing website to make it responsive to smaller devices usually used by high school students and parents on the go and create a responsive, professional-looking website that appeals to the intended market and instills confidence in the service provided.

My Role

UX researcher and web designer

Tools

Figma, G-Suite, Google Trends, Optimal Workshop, and GoDaddy website builder

Timeline

8-week design sprint, 2 weeks for implementation

DISCOVERY

The title page of a research findings presentation.

By the Numbers

  • Most parents surveyed revealed the most important factor in choosing a college consultant was the consultant’s background. Trust is more important than cost. Users also want to see a track record of success.

  • Half of users generally look to Google for guidance when they have questions about the college admissions process. 25% go straight to a specific college website while the other 25% ask friends and relatives for advice. Having a professional deliver individualized college planning is not the norm for most families planning for college.

  • High school students are not usually proactive. Less than 25% of the students surveyed had sought the guidance of counselors at school for questions about college.

I conducted a heuristic evaluation on the current website. I found no real critical problems so my focus will be on consistency and aesthetics.

Considering the market analysis, I recommended rewording the call to action and adding some iconography to convey familiarity to the user.

To establish trust, I proposed filling out the bottom fold of the landing page, which is currently empty, with social proof of success such as customer testimonials or business statistics.

The current website was built on GoDaddy using an older version of their website builder template and is not responsive to smaller breakpoint devices such as tablets or mobile.

user personas

  • The Cool Mom

  • The Driven Senior

  • The Ambivalent Sophomore

INFORMATION ARCHITECTURE

Creating a flexible grid was a top priority for the redesign

The “should haves” consisted of updating current features to make them more user-friendly including adding an actionable CTA to “Schedule a free consultation.”

It was important to update the site navigation and add visual elements to text-heavy pages. A logo redesign would be nice to have been not urgent.

I also wanted to add some interactive features like a checklist and events calendar but those features were given lower priority.

SEO

As I was thinking about the user, I wondered what exactly were the keywords that people who frequent college consulting sites use. Using a free keyword search generator, I found that most people are searching either for a specific university or for financial aid information. The blog posts on My Uguide’s website would be a good place to incorporate both of these themes. Then I went to Google Trends and input several specific phrases that stuck out to me in the keyword research. Unsurprisingly, about 1/3rd of the searches were for scholarships; however, 33% of the 5 terms searched were actually Stanford. I tested this theory with several other terms and found that people are looking for specific schools a large majority of the time.

Tree Testing the Site Navigation

After performing an unmoderated tree test with ten people, I discovered that users were having some trouble finding the financial information most typically seek when exploring this type of site.

Task #1 “Can My UGuide help me get scholarships?” resulted in 67% of participants clicking resources first instead of services. The solution to this will be to add a button on the resources page leading them directly to this specific service.

Task #2 “When is the next ACT?” had a success rate of 50% This type of time-sensitive information could be displayed as a widget on the landing page.

Design

I began by creating quick sketches of the landing page and selected the best one. I then translated this sketch into wireframes for different screen sizes to visualize the design's breakpoints. Next, I developed high-fidelity mockups in Figma before implementing the designs on the live site.

Usability Testing

I conducted three in-person usability tests using the Figma prototype, which validated my design. After making some adjustments, I implemented the design on my client's GoDaddy website.

TAKEAWAYS

Function over form

I was tasked with implementing my design on the existing website builder, which presented several challenges, including a non-customizable contact form. Ensuring the site's optimal functionality was crucial. To address this, I incorporated a countdown widget for the upcoming ACT date and a clickable phone number through custom HTML coding.

Visual communication

The initial website contained valuable information but lacked engaging visual elements to captivate the user. My emphasis was on crafting a narrative using photography, icons, and color. However, I faced challenges in finding cohesive elements, and time constraints prevented me from designing custom icons.

The challenge of being concise

As a seasoned writer, I faced the challenge of maintaining clarity and conciseness in the website's microcopy. Crafting distinctive and clear calls-to-action for each of the pages proved to be a formidable task.