The Curly Code

Creating an affinity map helped me consolidate and analyze the findings from the user interviews.

From the competitive analysis and user research findings, the redesign should have a clear way to scan program benefits.

The first thing users saw on the old website was the headline "You have entered a store that does quite a lot." Off the bat, it's confusing - is this an educational program that will help my student get into college? Or wait, am I buying something instead?

To reorient the site to be more informational, I reduced the number of navigation items. The new items (What We Do, About, Shop, Resources) are ordered by importance.

Also, I converted the Contact Us link into a CTA button since that's the primary action we want users to take.

In Figma, I created mid-fidelity wireframes and placed relevant content in scannable chunks.

As a remote team, we held internal and client meetings via Google Meet. During our next client sync, I presented the user research and mid-fidelity wireframes.

The client approved the design direction and the lead graphic designer and I started drafting the Squarespace website.

The client was delighted to see the site come alive. One change she wanted was using a form on the Contact Us page. The old site used a 2-page Google form that she wanted embedded on the new site. I mentioned that direct contact info (ex. an email address) is more user-friendly but the client insisted on the form. I decided to choose my battles and accept the request to keep the project moving forward.

We knew that school administrators need to quickly find relevant information when they're reviewing potential student programs. The initial design meant extra work for them to learn what the program entails. They'd have to navigate to another page to do this. After discussing this with the client, we collapsed the homepage and the What We Do page for simplicity.

The Shop section maintains the old site’s e-commerce feature but it’s not the primary function now.

Our deliverable was the first iteration of The Curly Code redesign and the client was pleased with the redesign. Due to the constraints of using a Squarespace template and the images available for us to work with, there are still some design improvements to do. For instance, the navigation could be more visible. We also noted that the client-provided copy could be more succinct. The client is aware of this and will tackle them as she maintains the site.

We transformed the old website into one that better markets and engages potential clients with The Curly Code.

Also, I helped convert the client into a proponent of user-centered design. In the beginning, the client only prioritized the website's visual aesthetic. But after learning about the research findings and through our discussions, she realized UX's value.

The client wanted to use an existing two-page Google form instead of showing direct contact information. But, she realized that as a former teacher herself, even she wouldn't fill out a form, never mind a two-page one. We left the user-friendly direct contact information in. This was a lightbulb moment for her and exciting for me knowing I helped shape how the client appreciated the UX process.