Moving the Homepage Forward

Introduction

During my time as a brand designer for the early stage fintech startup, Moves Financial Inc. (Moves), I took ownership of the marketing website design. With a rapidly evolving product that provided financial help for gig workers, the website and brand needed to be able to communicate these changes to the user in a straight forward way. As the design for the product was planned to go under major change, I took on the responsibility of redesigning the homepage in time for the new product release.

Why the redesign?

Going more granular, the old homepage was originally created when our main offering was the Moves Business Cash Advance (BCA). Since then, the product has expanded into a Spending Account that tracks gig incomes week to week. The product team started working on a project that changed up the user flow, and overall it just didn’t make sense for the homepage to only be focused on the BCA, when we have so many other features out. (Old design below.)

Originally, members were able to apply to a BCA without opening a spending account. This new product update added more steps to the flow:

Only then, would users have full access to Moves features. Obviously, this creates more friction in the process to get a BCA, and users would potentially be frustrated. So the website redesign also had to be built to help remedy that.

The User

Through listening to user interviews and reading stories they submitted, I identified 2 different potential users:

The Problems

Keeping the types of users in mind, I looked at the old designs and spoke to the stakeholders. These were the problems I determined that needed addressing:

  • Moves has evolved, but the Moves website is still currently focused on the old offering. It lacks a narrative and the content is spread out quite randomly throughout the page. It doesn’t align with our current product marketing positioning and messaging
  • The original website was built to drive sign-ups for the web app, but now it needs to drive conversion to the mobile app
  • Our current branding motifs are limiting and don’t have much meaning towards our brand behind the design

The Objectives

Understanding our problems, I came up with a few objectives for this project. I wanted to make something that:

Besides the major objectives, I had some goals in mind for customer retention optimization. I kept these values in mind while designing:

  • Increase desire, decrease labor and confusion
  • Test options with customers when you can
  • Create a fully responsive site (obviously)

Messaging

To provide further context, I took a look at the updated tagline and positioning statement.

Wireframes

After aligning on problems and objectives, I went ahead and started wireframing the structure of the site on Figma. This was to organize and communicate how information was going to be prioritized. I was working closely with the growth manager at this point, who was writing the copy on the site, to stay aligned on our vision.

There was some discussion while designing, which led to the creation of 2 different versions that we ended up A/B testing using Google Optimize. The reason for this is to see what kind of social validation (“trusted by” logos or quotes) would resonate the most with our members.

Design

Once the wireframes were approved and finalized, I started on the actual design. I took a look at competitor sites for inspiration. I wanted to design the homepage to be spacious, with a lot of breathing room so the user can focus on one thing at a time. I felt that doing this would allow each section to create a bigger impact.

In order to reduce friction with this new flow, I wanted the page to tell a story through the imagery. I took them through the steps of accessing all of Moves’ features, ending on the debit card and a call to action to download the app. Then, after learning about all the features, they can check if they qualify and read further if they need more social validation and information on how Moves can help. Finally, ending in another call to action to really reinforce that downloading the app is the next step they should take. While designing, it was important to me to keep the flow simple and easy to understand.

Through feedback rounds, I realized there were very split opinions on what we thought would resonate with members in terms of social validation, so we decided to go with 2 designs to A/B test.

In terms of motifs, I kept our old rounded squares motifs but introduced a new angle motif that reflected the angles in our logo, creating movement. This brought more meaning into our imagery, since it reflected back on a core piece of our branding. Placing the angles horizontally on the site also was utilized as a way to encourage users to keep scrolling.

Challenges

Alignment: Since the homepage is pretty much the face of our company and had to reflect the new product flow, I had a large number of stakeholders that needed to have eyes on the project and be aligned on the direction. This, along with the company being fully remote, led to the challenge of creating visibility for everyone.

I knew I couldn’t hold virtual meetings with everyone because with that many people and opinions, it would be very easy for the conversation to go off the rails. Instead, I created a video series that explained my design thinking and prompted stakeholders to either leave comments in Figma or start a discussion in the thread. That way, I also would always have a record of all the feedback given. In the next video, I would summarize all the feedback and show them how I incorporated it into the next version of the design. This system worked really well and resulted in alignment and happiness amongst all stakeholders.

SEO Placement: In order to optimize for search engine optimization, we had several paragraphs of text that had to be placed somewhere on the page. The challenge for me was to find where to place it and strategically design it so that it didn’t take up too much space on the page.

In the end, I designed a slider that broke the information down into sections to reduce scrolling. I also placed it in the middle of the page after the main narrative, so it can act as supplemental information, but not get in the way. I felt that this was a nice, clean way to reduce the amount of clutter that extra copy brings to a page.

How It Influenced The Brand

In a fast paced start-up and with this new flow having a hard deadline, I was not able to sit down and develop brand motifs and studies before starting the design. So, I worked backwards and designed new motifs onto the website and then did a brand guidelines overhaul afterwards, which gave me time to specify how these new motifs could be incorporated into the overall brand. After the deadline, I had more time to do deep dive studies into CTA designs and colors. I think it was important that I took my time with these studies and didn’t rush them to be part of the website release, because these were important design elements that had to be well thought out. Once these studies were finished, I made small changes to the website to reflect the updated designs. Definitely unconventional, but this system worked best for the situation. For a more in-depth look at my work on branding, click here.

Next: The Sign Up Flow

As we began using this new homepage, we started noticing drop off within a certain spot in the sign up flow. To look further into it and find a potential solution, I laid out user flows and it was immediately apparent that there were some issues with it. There were multiple flows, which made it confusing to track. However, the biggest issue was that regardless of if the user was on mobile or desktop, it took them to the app download page (and obviously if you’re on desktop, you can’t download through desktop so that’s where the drop off happens). Overall, there was just too much friction.

Once I identified these problems, I identified some objectives and constructed a consolidated proposed flow. This new flow would utilize a QR code for the desktop version so that users would be prompted to pull their phone out and download the app immediately. We built out the flow in Google Optimize and ran an A/B test, while tracking how many conversions each flow led to.

After a month of testing, we found that the new flow led to 25 QR code scans and 15 installs, while the old flow only led to 1 install. Therefore, it was greatly apparent that this new flow would drive more conversions. We then ended the testing and applied the new flow as the permanent one.

Conclusion

The homepage is ever changing, as is the product. I am continuously looking to improve pages throughout the site to reflect our current vision and branding, as well as optimize for conversion. I’m proud of how far its come since the first days and I’m excited to see where it can go from here.

I love talking design, get in touch if you would like to hear more about my design thinking for this brand or just to simply chat.