Of a Feather – UI/UX Designer

Description

Of a Feather is a prototype dating website created as a project for a UI/UX class at Champlain College. The dating site was meant to cater to an incredibly specific group of people and I chose people who actually thought that the Atlanta Falcons were going to win Superbowl 51. The goal of this product was to make a site for those that felt that they couldn’t find love as easily as others and to connect them with others who felt the same via a common interest, namely the one stated above.

The Production Process

When I was originally given this assignment, my first task was to figure out exactly which group of people I wanted to focus on. Knowing how much I love the NFL and enjoy football, especially given that my favorite team is the New England Patriots, I figured I would focus on the upcoming Superbowl 51 game. Again, given that my favorite team was the Patriots, I figured I’d focus on Atlanta Falcons fans, specifically ones that thought they [the Falcons] would win said Superbowl.

In order to figure out how I should put my site together, I decided to put together an empathy map using a faux persona and no, it’s absolutely not Samuel L. Jackson. I was able to build this empathy map after having interviewed real Atlanta Falcons fans from around the country and even some on the campus here at Champlain College.

persona

The faux persona I created with UXpressia.

Empathy Map - New frame

An empathy map for my faux persona that is totally not Samuel L. Jackson.

As you can see, most of the Falcons fans that I spoke to seemed to think about nothing but football, especially about the upcoming Superbowl game. Overwhelmingly, I also seemed to find that many of the Falcons fans that I interviewed said that red was their favorite color, which is one of the main colors of the Falcons team.

Having come up with an empathy map for a possible consumer for the site, I decided that the creation of a journey map would be beneficial as well. The journey map basically takes us through the customer’s experience starting at the “research” step all the way to awaiting responses to messages on the site. Again, this is not for Samuel L. Jackson, I swear. UXpressia was a fantastic program to use for this, as it helped me quickly create a journey map without having to draw out boxes in paint or photoshop.

journey_map

The journey map for totally not Samuel L. Jackson.

Research and Planning

In order to make an effective dating site, I first needed to do a good amount of research on the competition. Knowing this, I decided to take a little adventure around the web taking a look at different dating websites. Before all of this, though, I first created a usability research plan for the product, which can be accessed via the link below:

UXUsabilityResearchPlan

Many of the examples that I found were exactly the same, which told me that there is one real formula or set up that just seems to work for dating site layouts. Check out some the examples that I found, which influenced my design, below:

This slideshow requires JavaScript.

Looking at some of the example landing pages, a common theme appears in how they show off user profiles. Basically all of them show square pictures with a little bit of information about the person like name, location, when they were last online and how long they’ve been a member. Seeing this pattern, I decided to do the same thing, giving out the same information for each person.

DesktopListPage

The desktop layout of my dating site.

There were a couple of other UI/UX choices that I made based off of some of the example landing pages shown above as well as what we’ve learned in class this last semester. However, my research didn’t stop at the desktop versions of dating sites, as I also thoroughly researched different mobile dating apps in order to also create a mobile version of my site, which can be seen below:

This slideshow requires JavaScript.

MobileListPage

My mobile dating app layout. Inspiration from the above mobile apps can be seen.

Menu Options

The user should definitely have options and the ability to travel throughout the website as they see fit. This isn’t just the case when it comes to dating sites or solely dating site users. In fact, every website has a menu bar and every web user wants to be able to see their options in front of them. I also used the system visibility heuristic that we learned about to choose my menu’s placement.

This slideshow requires JavaScript.

 

As you can see, the user gets a clear view of the menu bar options with them directly at the top of the page in large enough text. This follows the example set by a lot of other dating sites (and general websites) and it always shows the user what’s going on as well as shows them their options, verifying the system visibility heuristic. When it comes to having a menu available on a mobile app, things change around quite a bit. The menu should no longer be visible at all times, as that would clutter the screen too much and users don’t like that (according to research done).

In order to fix this, I used a colloquially known menu icon (3 horizontal bars) in the top-right corner of the menu bar (which can seen above). Pressing the menu icon will instead make the menu appear on the screen, while pressing it again will make it disappear from the screen. This frees the screen of over-cluttering and allows the user to focus upon the other user profiles being shown in front of them.

Moreover, the “Details” button on each profile shows the user that that they have the ability to learn more about any other user that they are interested in, which also serves to verify the system visibility heuristics. For the mobile version, I changed the “Details” button to an arrow that the user can tap to view more information about that specific profile.

This slideshow requires JavaScript.

Mobile Buttons

In the slideshow above, the mobile version of a profile page can be seen with a few buttons that aren’t present in the desktop version. After thorough research, I found that matching on mobile apps usually used a heart icon that could be tapped to match with someone. On the flip side, the “X” button is used to get rid of a profile that the user doesn’t have any interest in. As for the middle button, it is an easily recognizable icon version of the message function for the site.

The Search Function

While this kind of function isn’t exclusive to dating websites, it is these sites that use it in a specific way. When one uses a site to find love, they want to be able to search for people within a certain area or distance from them that are also within a certain age range. So, I developed a search area of my own, mimicking a lot of what I’ve seen from other dating websites:

search_bar

A big problem that I found with several dating sites was a lack of profile pictures for many profiles, so I decided to add a filter to the search bar that also narrows results down by those who have pictures.

Font and Color Choices

Choosing my font for the website layout was actually quite easy. Given that my target audience we’re all Atlanta Falcons fans, I decided that specifically using the Atlanta Falcons font for all text would be a great idea. I wasn’t wrong either, as people to whom I showed my website specifically commented that the font choice was awesome.

As for the color choice, if we look back at some of the audience descriptions, we’ll see that the majority of the audience members favored the color red over most other colors. Going off of that, I used red as a major color in the layout with the rest of the colors used filling out the entire Atlanta Falcons color pallet. These color and font choices were selected long ago during the development of the style tile for the website, which can be seen below:

FalconsStyleTemplate

The style tile for my dating site. The font and color choices can be seen here.

Outcomes and User Feedback

I received a fairly decent amount of feedback from the people that I interviewed both during the research and production phases and after showing the final product. For this data, I used surveys made with Google Forms. Check out the surveys I used below:

Research Intro Survey

Usability Survey

The feedback I received basically said that most of the people that were rooting for the Falcons used dating sites but were also having trouble meeting people with the same beliefs and interests outside of the web-dating world. Getting these answers is actually what pushed me to move forward with the site’s production.

End of Production Survey

Layout Survey

With this survey, I found that a lot of people didn’t like a ton of clutter, especially when it came to the mobile version of these sites. This is what lead me to make the menu a button in the mobile version instead of an ever-present bar at the top. I also found that my interviewees believed that I had used enough visual information in the profile mockups to potentially interest them in checking out a profile even further. Moreover, I also found that many of the interviewees were able to both recognize the mobile buttons and understand what their functionality was without having to be told anything. Many of them referenced Tinder and OKCupid as reasons for having recognized said buttons, both of which were sites I used as reference for my mobile app layout.

Postmortem

I quite honestly thought that this project not only helped me to become a better UI/UX designer, but also to become a better game designer in general. It may have been a lot of work, but I would say it was definitely worth it for all of the experience I got with new programs and with UI/UX design in general.

That said, there are definitely a few things that I would change if I could go back through and do things again:

Desktop Page Filling

Though my testers thought that I used enough information, I still think that I could have provided at least a little blurb or something on each user profile (for the desktop version). Just as well, if we reference the image of the desktop layout above, then we can see that there is a large amount of empty white space on the right side of the screen. The reason for this empty white space was literally just because I couldn’t think of what else to put there that would have come in handy and also would not have created redundancy. Still, I would like to fill out that white space with something useful if I were to go back and keep working on this project.

Mobile Page Filter

I intended to have the search and filter function contained within the appearing menu for the mobile version of the site. However, that doesn’t come across as well as I’d like it to, I feel. When looking at other mobile dating apps for reference, I sometimes came across examples that had a filter (funnel) icon at the top to specifically bring up a search and filter menu. Quite honestly, I would like to add that icon to make the search and filter function more easily and quickly accessible for users.

Research Plans 

I don’t have a lot of experience with usability research plans when it comes to UI/UX stuff so my current research plan doesn’t really seem like a professionally made one, at least not to me. If I were to go back, I would do a bit more research on how to write up a research plan more effectively.

Other than those things, I’d say that I’m pretty damn happy with how everything went and I’m excited to pursue further UI/UX endeavors and projects!

 

 

 

Advertisements

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