PhrendlyHomepage-ProjectBanner-min.png
 

Overview

My Role

As we progressed with the launch of Phrendly we decided we would like to take a different approach on the home page. The original homepage we were using lacked vital information that a new user would be looking for when first landing on our website which might lead to confusion.

Goals

As we progressed with the launch of Phrendly we decided we would like to take a different approach on the home page. The original homepage we were using lacked vital information that a new user would be looking for when first landing on our website which might lead to confusion.
 

Original Design

Here is the original home page we had for Phrendly. As you can see, there isn’t much information other than the typical sign up field you might see on a dating website. While it is simple and fun to look at, it didn’t tell the user much about the product, or what they would be signing up for.

 

INITIAL WIRE-FRAMES

After we decided on our goals for the homepage, we started building out wire-frames for the new design. Overall we wanted to break the page into easily digestible sections of content so the user could get a better understanding of what Phrendly is without getting overwhelmed.

Starting at the top we added a floating navigation bar that would follow the user down the page as they scroll. Underneath that we have our hero image that would support our sign up field to the left. We still wanted to have a similar style sign up form, but we also added in a bit of copy to give them a short introduction to the product.

Beneath that we have the “How it Works” section. This is where we start getting into a little more detail about what the product is and how it works. Additionally, if a user wanted to learn even more about the product, we added a CTA that would lead them to our full About page.


Following that we have the iOS app call out section. We decided to go with a large full width image that would feature our app in use with a call-to-action leading the user to download our app. We also wanted to design this section in a way that if we ever wanted to change out the content to something like a video, it would be easy to do. This essentially is our “Featured Content” section.

Next we have our testimonials section which would feature reviews from users. This allowed potential users to get a feel for what others are saying about the product.

Finally we have our last call-to-action section leading the user back to the signup flow, followed by our global footer links.

 

Final Design

After some tweaking to the initial wire-frames we began our final designs. As you can see, our final design stayed true to our initial wire-frames with only minor changes.

We choose to go with a clean, minimal approach to the design with clear defined sections. This allows the users eye to flow from section to section without getting distracted by unnecessary information. I feel the final execution was a great success and addressed all of our goals going into the project.

 

Challenges

A big challenge we faced with this project was managing how much information we were delivering to the user and making sure we were delivering it in an easily digestible way. There is a lot of information that we wanted to surface on the home page, but we also wanted to only add information that was absolutely necessary to keep the copy short, and to keep the users attention. With the final designs, I feel we managed to get enough information across in a clear manor to help the user understand what we are offering.

Details

Client: Platphorm
Project date: Sept 2017

Contribution

UI / UX Design
Wireframing

Tools

Adobe Illustrator
Balsamiq