Independent Pixate Project

Methods used: High fidelity prototypes, sketches.

Project Overview


In recent months, the number of prototyping tools that are available to UX designers has multiplied. While the main prototyping tools when I was in grad school were Axure, Balsamiq and Invision, now there are a multitude of tools such as Pixate, FramerJS, Origami, and Form. Because of this, I decided to do a project using Pixate. I chose Pixate for two reasons. The first one was that I wanted to gain more experience with Pixate and utilize different interactions, such as scaling, rotation, and hiding elements. The second reason was that I have predominantly used Axure, and while Axure is good for desktop prototyping, I wanted to gain some experience with a tool that was clearly designed with mobile usage in mind. I decided to split the prototype into three parts, with each part having a different function.

Part 1


The first segment of the prototype was based upon a social media newsfeed. It has scrolling capabilities, and upon pulling the content container down past a certain point, a refresh indicator will show. When clicking on the first post in the prototype, the user's profile will come in from the right and the post will slide down to its location on the user's profile. It is then possible to scroll up and down to view posts on the profile. The hamburger menu changes color and transforms into an arrow. Clicking on the arrow will cause all movable elements to return to its original place, and the arrow will turn back into the hamburger menu. Clicking the hamburger menu will bring up a profile page, and in order to return to the newsfeed, the user can click on the X in the upper left hand corner.

Viewing the hamburger menu.

Bringing up a profile by tapping on a post in the newsfeed.

Part 2


The second segment of the prototype was modeled after photo browsing apps. One main difference is that there are caption bars underneath each photo preview. I had always wondered what this could potentially look like in a tile format, and there are photo apps such as Microsoft Onedrive that let you add captions to photos. Clicking on the first picture will enlarge the picture and show the rest of the text. Long pressing on the brown picture will result in a menu with 3 buttons: copy, share, and delete. Pressing the copy button will result in a duplicate picture being created. Pressing the delete button will remove the picture. When long pressing on the green picture, the same menu will show. Clicking on the share button will bring up a screen that represents sharing the photo to different social networks. After selecting the networks to which the photo should be shared to, the user can click the button to share the photo, or click the X in the upper left hand corner to close the window.

Viewing a single photo.

Long press on a photo, and selecting the copy option.

Long press on a photo, and choosing what networks to share it to.

Part 3


The third segment of the prototype is modeled after Yelp. The initial screen contains the different listings and a searchbar with a text entry area and a button that will switch the view to map mode. If the user scrolls down, the searchbar will hide, and upon scrolling up it will show. If the user clicks on the map icon, the map will slide into view, and the icons from the first five list items will move down to the bottom of the map screen. When the user scrolls left or right on the bottom bar, the picture of the listing that is in the center of the phone will scale up in size, and the corresponding map marker will also scale up. When the listing picture moves away from the center of the phone, it scales back down to its normal size, and its corresponding map marker also scales back down to its normal size. I wanted to prototype this feature to see how it would look and perform due to the fact that whenever I activate the map mode in Yelp, I forget what number corresponds to each restaurant, and I wanted a quicker, easier, and salient way to identify what icon on the map corresponded to what restaurant.

Scrolling through a list of options with a collapsible header.

Viewing a map of all items in the feed with map icons expanding when the corresponding entry in the horizontal scroll area is centered on the triangle.

Conclusion


The third segment of the prototype is modeled after Yelp. The initial screen contains the different listings and a searchbar with a text entry area and a button that will switch the view to map mode. If the user scrolls down, the searchbar will hide, and upon scrolling up it will show. If the user clicks on the map icon, the map will slide into view, and the icons from the first five list items will move down to the bottom of the map screen. When the user scrolls left or right on the bottom bar, the picture of the listing that is in the center of the phone will scale up in size, and the corresponding map marker will also scale up. When the listing picture moves away from the center of the phone, it scales back down to its normal size, and its corresponding map marker also scales back down to its normal size. I wanted to prototype this feature to see how it would look and perform due to the fact that whenever I activate the map mode in Yelp, I forget what number corresponds to each restaurant, and I wanted a quicker, easier, and salient way to identify what icon on the map corresponded to what restaurant.


© 2017 Jonathan De Heus