UX from concept to code

5050.ly is a video entertainment website that aggregates the best of social videos and presents it to the user in a fun and interactive way.

The Method

Before the design and development of the product, I needed to make sure I had identified the larger stages to help track progress of the project and save time overall.

  1. Conduct a competitive landscape
  2. Conduct user research
  3. Create an actionable persona
  4. Sketch-out wireframes in Balsamiq Mockups
  5. Design a visually appealing mockups in Adobe Illustrator
  6. Establish which technologies will be needed for the project
  7. Develop the product
  8. Establish means of feedback and improve the product

Competitive Landscape & User Research

Firstly, a competitive landscape was conducted in order to understand the user’s demographic and expectations. I was able to identify that most of our content would be aggregated from JukinVideo and FailArmy. We utilized the analytics provided my ChannelPages to get a better view of the audience. We were able to gain the following information on our target audience:

The Takeaway

JukinVideo ChannelPages Statistics
JukinVideo ChannelPages Statistics

Geneder: 92.7% Male
Age: 69.5% 18-35
Location: 24% United States
Special: Users like to submit videos. Less than 1% of users share videos with their friends. Almost 2 videos are expected to be uploaded a day.

Create an Actionable Persona

The next task was to create an actionable persona. This persona helps me answers questions about end users tasks and goals so that I can better make decisions about the development and design process.

JukinVideo ChannelPages Statistics
JukinVideo ChannelPages Statistics

Balsamiq Mockups Wireframing

To get a better understanding of what the website should look like, I created a few wireframes in Balsamiq Mockups. The wireframes were put together in a few minutes to help guide the design process for the rest of the project.

Balsamiq Mockups Wireframe 1
Balsamiq Mockups Wireframe 1
Balsamiq Mockups Wireframe 2
Balsamiq Mockups Wireframe 2

Adobe Illustrator Mockups

Next I designed some visually appealing mockups in Adobe Illustrator CC. This makes the development process a lot faster and easier trying new ideas quickly instead of trying to change CSS styles repeatedly.

Adobe Illustrator Mockup 1
Adobe Illustrator Mockup 1
Adobe Illustrator Mockup 2
Adobe Illustrator Mockup 2

Establish Technologies Needed for the Project

  1. HTML5 – Content Markup
  2. CSS3 – Content Styling
  3. Object Oriented JavaScript/JQuery – Animations and Real-Time Styling
  4. AJAX – Asynchronous Loading of Videos and Connection to MySQL Database
  5. PHP – Session/Cookie Handling, Form Processing
  6. MySQL – Storage and Management of Video Library Information

Get Feedback & Improve the Product

5050ly offers multiple ways for users to give feedback. There is a built-in contact form on the website, a Facebook fan-page, and a Twitter page.

5050ly User Feedback
5050ly User Feedback

See it Live!

If you would like to see the live implementation of the design you can check it out here!