Case Study: Move.org Redesign

Defining the problems

Discovering problems from research

After realizing it was an opportunity to improve the site visually, I tried to learn about its current state. I was absent from the team for a year to work on the new platform. The team members and the editorial strategy had changed. So, I looked through the current site in detail and asked questions to the Content Strategist and the Managing Editor. Then, I gathered the possible problems to tackle.

• The site added a few components from other sites without style adjustments.

• The articles use more components, and it looks busy overall.

• It seems challenging to skim where each section starts and ends.

• The call-to-action buttons might not be standing out.

• The color palette was limited to green, black, and gray colors, resulting in many green colors on the page.

• I was questioning whether the primary illustration style is a good direction or not.

Deciding which problems to tackle

I asked the team members what mattered to them and the site. The majority of their comments landed on those two.

• Increase the clicking rate to the affiliate links

• Make the articles easy to follow

Then, I decided to tackle those problems.

• The call-to-action buttons might not be standing out.

• It seems challenging to skim where each section starts and ends.

• I was questioning whether the primary illustration style is a good direction or not.

Defining my goals

After defining the problems that I wanted to tackle, I set my goals.

• Follow the new platform's guidelines and frameworks and create a style guide design file for the Engineering team

• Make the call-to-action buttons stand out more

• Make it clear where each section starts and ends, so it's easy to follow the content

• Find a better direction with the imagery style

Working on call-to-action buttons

The original design style had a limited color palette. As a result, most of the components had green hues, and there were many green colors on the page. The call-to-action buttons had enough visual weight to be noticeable, but I thought they could stand out more.

The new platform's framework allows having primary, secondary, tertiary, and gray colors. If I introduce another color to the style and use it for most components, it could save the green color only for the buttons and the logo, which could differentiate the buttons from the rest.

I went through a couple of rounds of color exploration.

[Screenshots of color exploration mockups]

After having discussions and getting feedback from the Design Manager and the Creative Director, we landed on a set of colors of gradient green and blue.

[Screenshot of the mockup with the decided colors]

Making the headings to stand out

The articles use the comparison table, the pros and cons card, and the callout cards. Those components add more visual interest, and they are more effective in displaying the information than a chunk of text. However, each piece seemed to have enough visual weight to overwhelm the headings. With a header, readers can understand what this section is about and decide to read or skip. Since the article seemed busy, I strongly felt that we could reduce the visual weights of each component and make the section heading stand out more.

I reduced the visual weights of the often-used components.

The editorial team is fond of callout cards. I've found an article that uses 15 of them. The card has a heavy gray background. I changed it to white background and redesigned the icons with flat colors. The colored icons appear to bring enough attention to the information on the card. The lighter tints of the colors seemed softer and approachable. During this exploration, I found out I liked the color combination of blue and pink, which I often used for other visuals.

I had to change the font to Google fonts from Proxima Nova. I was looking for a typeface with a heavier weight that won't easily blend in the page.

I tried a few rounds of font explorations.

[Screenshots of typography exploration mockups]

After having discussions and getting feedback from the Design Manager and the Creative Director, we landed on the typeface of Nunito Sans fonts.

[Design mockup of the typography with Nunito Sans typeface]

Finding a better direction with the imagery style

The quality of stock photos relating to moving was always questionable. That's why I went with the Illustration-style. But then, I wasn't sure if the style was narrowing the direction in the wrong way.

[The original image style]

The Brand Partner team told us that the partner companies might provide us with high-quality service photos in the future. Then, I wanted to incorporate photos into the imagery. Using both illustration and photography would keep the style flexible and open. So, I started exploring a style to combine the two.

After a couple of rounds of design revisions, I felt good about the overall direction for the image style.

What was completed at the end of the project?

After a long process and hard work from the whole team, we completed the migration project.

• The whole website with 300 articles transferred to a new platform

• The call-to-action buttons are not blended into the page

• The article feels less busy and has a sense of grouping

• Imagery style has the flexibility

Afterthoughts

It was also a great project that required me a lot of collaboration with team members.

• I had a chance to ask questions, discuss code bugs, and communicate design solutions with the Engineering team. 

• It was helpful for me to learn the vocabulary the Editorial team uses. I felt the communication was better when I started using the same language to discuss the visual styles.

• One of the most challenging parts of the process was running the content check for each of the 300 articles. I've got to collaborate with the Content Strategist and the Project Manager. We had to sync several times to create the guidelines for the content check, sort out the bug report process, and inform the whole group of what type of issues had come up. It was one of the most collaborative projects that I've ever done.

Go back to Case Studies page