UX Study

Personal Work.

Analyzing blogs and offering different solutions. Very quick studies mocked up in InDesign.

Blog Meets Tinder

Personal Work.

Analyzing blog basic requirements and combining it with the function of Tinder. A user is pushed information first by subject, then by likes vs dislikes. Like or dislike buttons are meant to customize information that is more relevant to the user.

ux-study

Notes: Desktop
1 – Subject links are filters for different categories of content
2 – Main image/header of the article post
3 – Like v. Dislike button. If a user likes the article then more articles related to the current article will be pushed. If dislike button is clicked then articles similar in nature are dismissed. Articles have certain attributes when posted that designate how articles are filtered.
4 – Article content. Section is flexible in height
5 – Comment section. Replies to comments are subset over to designate hierarchy
6 – Next button dismisses the article, not putting it in one category of positive (like) or negative (dislike).
7 – Back to top button appears after user has scrolled down.

ux-study2

Notes: Mobile
1 – Menu Icon drops down menu from under the header.
2 – Mobile Menu Icon in the sticky header. Top posts is the designated main section when page visited.
3 – Main Image/post turns into a link that goes to the full article. Article length is shortened to give brief description.
4 – like dislike button are a sticky footer
5 – share links turn into buttons for easier use by the user
6 – Comments are contained in a toggle. User clicks to load the comments.

BuzzFeed Meets Netflix

Personal Work.

Analyzing the hierarchy of buzz feed and how the home page is set up. Breaking it down from a high-level, then modifying it to have similar features as Netflix Functionality.

ux-study5

Notes: Desktop – current site
1 – Categories of articles that users have rated
2 – Scrollable right/left series of articles. Images roll over with article title with mouse
3 – Featured image/article with title overlay. all clickable link to full article
4 – Section one that is filtered as top posts. Images do not have rollover
5 – Section 2 with images spanning column. links and post tile are clickable
6 – More button filters to that section which is related to the main nav sections. ~ 10-15 posts max
7 – Tertiary sections that have a couple of posts with a more button that takes to the particular filtered field.
8 – Back to top button.

Content has no end, when scrolling down, more articles are retrieved.

ux-study6

Notes: Desktop – New
1 – Categories and navigation remain the same – sticky header that compresses and reveals more when scrolled up
2 – Icons that designate search (when clicked reveals a search field) and sign in icon/account name when registered
3 – Scrollable right/left series of articles. Images roll over with article title with mouse. Lower tiered sections follow same principle of revealing new info right to left.
4 – Main section with top article and tilte overlaid on top. Subsequent articles to the right top & bottom format. When arrow is clicked articles slide to the left revealing more by a one column at a time
5 – Top & Bottom particle posts with images and post title links.
6 – More button filters to that section which is related to the main nav sections.
7 – Footer has follow buttons and buttons to get the mobile apps for their respective devices.

ux-study7

Notes: Mobile
1 – Menu Icon reveals the navigation from the left. Main sections, Trending buttons and more links are listed out, followed by legal and other tertiary links.
2 – Sticky header keeps the header on the page when the user is scrolling back up the page.
3 – Swipe right button reveals the information from right to left, similar functionality to the netflix app. ** Possible problem: Users want to scroll top to bottom instead of rolling right to left.
4 – Second tier images are removed and only post titles are kept
5 – Category icons are added in to help discern the type of article
6 – Section has two columns, when swiped two more posts are revealed.
7 – Last tiered sections are to only have images and clicked once reveals the post title. **Possible problem: whole sections may get passed over because information is missing and may not know to click — Solution: putting post title under image.
8 – Links turn to buttons for easier clicks by user. These two would open up the respective apps for their devices