Designing a new home page

Doing a redesign takes a lot of thought, prioritization and iterations. When we decided we were going to update the home page, we went through the following steps:

1) High level brainstorm: Before designing a new home page, it’s a good habit to take a step back and have a high level discussion about the product, the messaging, and the strategy behind conveying this to potential users. There were also several obvious improvements we wanted to make from our current version.

a) Better “Call to actions”: meaning that we give people clear direction to “Sign up” or “Sign in”. Our current home page was a bit confusing, as you had to sign up and sign in with the same button (if you used Facebook or Linkedin to create an account)

b) Tell the product story: our current page gave a brief overview with some copy. In our new version, we wanted to get into the details, provide some screenshots, demo videos and more.

c) “Show” and “tell”: rather than just explaining everything, we wanted to bring it to life by showing real outings, users and photos from the platform.

2) White-boarding and paper sketches: Taking notes from a high level discussion, we start with sketching out ideas on paper and white boarding together.

paper sketch

3) Online wireframes: This is where Jesse takes over and uses one of his many useful tools, Mockflow. After we have the wireframes into Mockflow, we do a few more brainstorms as we team, take some feedback from real people outside of the company, and make a few iterations.

Wireframe

4) Final html: In some cases, there is a step between 3 and 4, where a designer will hop into photoshop and mockup the page with real images and content. However, we’re lucky and Jesse is a skilled designer AND front-end developer. So, he goes straight into the code and brings it to life. Here’s the top half of the real page:

home page full

It’s Finished! (but not really)

Although we are “finished” with this version, the home page and user interface is never complete. As Jesse says “It’s a living breathing organism that is constantly changing”. Now that we have finished this version, the real work starts. It’s time to send golfers to the page, A/B test, and see how real users respond. We learn from that and then it’s on to the next version. (We also want to add some background videos, to spice things up a bit.)

Let us know what you think! As always, we’re happy to take your feedback.

Until next time…

– Clint

clint golf head shot

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s