The Frick Lightbox

Our latest project was tasked by the Frick Collection. Please see below for details. Thanks.

Frick_Lightbox_Book

Goals

To create a functional online lightbox tool that allows art historians and others to examine

images on a computer, similar to that of a physical light box. Currently, there is no such

working tool, although Pinterest may be the “closest” to this ideal.

• Image compilation into one main photo manipulating environment.

• Ability to dynamically categorize, rearrange, edit and save groupings of photos that a user

• Selection tool for selecting specific parts of images for annotation.

• The ability to zoom into multiple images, at the same time.

• A magnification tool that will magnify at the same specific spot on all images at the same

• Creation of a dynamic overlay function for comparing multiple images using the Iterative

Closest Point algorithm for functionalities like selection of specific shapes across all images

at the same time.

• Making image compilations shareable and editable in order to afford collaboration be-
tween different users.

• Including meta data for each image in a way that isn’t obtrusive to the viewing experience

• Adding the ability to save work in light box and return to it later. As well as the ability to

export image groupings with or without annotations.

Frick_Lightbox_Book3

————————————————————————————————————

Competitive Analysis

We researched five different websites that had similar functionalities to our lightbox to

compare their functionality to ours. After card sorting, we found nine different functions

that users wanted on their Lightbox websites and used these categories as the basis of our

Frick_Lightbox_Book4

————————————————————————————————————————

 

Heuristic Analysis

According to the Frick Collection, we found that the website with the closest functionality to

their needs was Pinterest. We thoroughly examined Pinterest’s functions and compared it

to our redesign of the Frick Lightbox to figure out what was lacking or the same from both

Frick_Lightbox_Book5

————————————————————————————————————————————————-

Understanding the User: User Personas

We developed 5 user personas based on types of people we thought would use the lightbox. Their descriptions are below.

Frick_Lightbox_Presentation5

Isaac Turner

In house photographer for Burlington Coat Factory & Artist

BFA in Photography, Parsons

As a lover of art, Isaac often likes to find inspiration for photo shoot development by searching museum

databases for quality images of different artworks. He thinks this makes the product photography work that

he does more artistic, dynamic and entertaining because the look books of traditional art that he compiles

affords him and his staff to have interesting art conversations about capturing the essence of a work of art

and portraying that in modern day product photography. He also is a big fan of trivia, and loves reading the

information about the photos and artists that he doesn’t know.

Isaac currently uses shared pinterest boards and google docs to share images and look books. However, he

finds the process of migrating images to docs cumbersome and he finds the inaccuracy of user categorized

images of pinterest to be distracting and frustrating.

• Image searching tools that don’t remember his search preferences.

• Image searching tools that don’t let him share images he has chosen.

• Feature creep, he is easily distracted.

• Categorization that does not account for microscale searches. Example: if he searches for blue horse, he

doesn’t want all the images of horses, he wants images of Der Blaue Reiter Movement.

 

Robin Wilkinson

Director of American & European Art at Putty Inc

Master’s Degree in Art History from Williams College

Robin is the Director of American & European Art department of Putty Inc. She is not fond modern technolo-
gy, but she requires an online tool where she can analyze, collaborate and evaluate the annotations of the

art curators of her department. She likes the idea of start working wherever she had left off. For confirming

the data shared by her curators she would like to search engine with the info attached to the shared material

and adding notes to the work under evaluation.

• Gets frustrated by complex design and absurd navigation.

• Hates when the logout timer sets out and she has to start from scratch.

• Not able to work at home.

Jack Toolin

Artist; Adjunct Professor at NYU and Pace university; Visiting Assistant Professor at Pratt Institute

MFA, San Jose State University: Photography, Performance, and Installation

Being a professor of Art History, Jack often visits MoMA website. He wants to get data for his classes with

annotations and metadata.

Jack currently uses MoMA boards and google search to find images and uses adobe suite for making

presentation and notes for his classes. However, he finds the amount of pop-ups distracting and doesn’t help

with the navigation. And while comparing images online, he would like to save his work online and he wants

a place where he could create subfolders according to his needs.

• Gets distracted with too many popups while navigation.

• Doesn’t like finding small resolution files.

Nneoma Akubuilo

Art History PHD Student

PHD Candidate at Columbia University

Nneoma is a grad student who also works as a curator for the MET. She is concerned with finding images

in her searches in the quickest and most concise way possible when she curates a new exhibit at the muse-
um. She dislikes having to use multiple websites to find images, and wants everything to be as organized as

possible. She is a fairly tech savvy, but finds it annoying when her searches find images that have nothing to

do with his subject. She would like to have the ability to compare multiple images at the same time, be able

to search multiple types of images at the same time, have a built in compare tool in the browser, and quick

• Confusing designs with too many things listed on pages.

• Getting images that have no relation to his search

• Having to save images and open a program like photoshop to compare images.

• Having to use more than one website to search for his images.

Shahbaz Chandarki

IT consultant at L&T Infotech, Student at NYU

25 year old male

BE in Computer Science

Shahbaz loves to discuss different ideologies behind different religions and cultures. Being

raised in an orthodox family, he had generated a great deal of curiosity to know what made

the things they are today. He likes to google eras, visit various museum websites and makes

notes about the data he founds in them. He wants a tool where he can makes notes from his

observations in a systematic way and use the images and his notes to discuss within his Cul-
tural history club meet-ups. Some times he likes to collaborate with other people and show

the findings online.

• Image searching tools that don’t let him share images he has chosen.

• Since he uses different sources (Internet, Word etc) to build his notes, he is easily

distracted. He doesn’t like using multiple applications to finish his single work.

———————————————————————————————————————————————-

User Testing Findings/Feedback

After finding out what each user persona wanted in a lightbox, we began creating paper

prototypes to allow for some initial testing before creating the lightbox design on Axure.

Here are a few key findings we came across during paper prototype testing.

One of the first issues that people found upon using our website was that if they were a

new user, they were forced to create an account in order to fully use the lightbox features.

Moreover, they couldn’t immediately create an account on the log in page, which caused

more frustration because it made the process of logging in much more tedious.

Following our Log In Page, our next biggest find was through our personal account page.

On each user’s personal account page, they are shown their personal image collections and

are able to organize, edit, delete and share each collection. Users found that the design

with the buttons on the top were extraneous and wanted to see less options and functions at

once to make things look clearer. Moreover, after further testing, many other users wanted

to immediately go to a light box by clicking on a certain collection. In this iteration, that

was not possible because we designed it so that you were forced to pick a collection, which

brought you to another page that showed every image of that collection where you may

select which images to put into the lightbox. Many users stated that if they organized their

collections correctly, there would be no need to further see the contents of a collection be-
fore going into the light box.

Furthermore, we found that the information bar on the left to also display unnecessary infor-
mation, and decided to completely take that function out of our design.

Finally, another vital piece of critique from our paper prototyping came from our Lightbox’s

design. Many users liked the large and open work space and how clean the design looked.

Furthermore, they liked the idea that they could save their annotations and export and send

their data to their emails or other locations. Besides this, most users wanted to be given

more functionality with the Lightbox. They wanted to be able to crop the images so that

each image would show similar objects despite being different dimensions, colors, and loca-
tions. Moreover, users also wanted to be able to change the opacity of each image when

they were overlayed on top of each other, instead of all being the same opacity. After our

initial testing, we added these functions to our existing options to give users much more cre-
ative freedom to work with their projects.

After making the final decisions of what image viewing capabilities would be included in

our redesign, we did another round of user testing and employed the card sorting method.

Through this exercise we were able to determine how to arrange the new lightbox tools in a

way that was intuitive and easy to use.

With the first version of our interactive wireframes completed, we then included another

round of user testing. The general feedback for this round of tests was in regard to the

graphic design of the wireframes. Users noted incongruencies in font and font size. There

were also comments about some fonts that were so large that they were drawing their domi-
nating attention, therefore making it harder for them to successfully navigate the site.

pp1pp2pp3

 

—————————————————————————————————————————————-

User Flows

With the creation of the site map and the design of the website in mind, we used three of

our user personas to created a user flow that would show the hypothetical journey each

individual would take while using our website. In particular, we decided to use Nneoma, the

art history PHD student, Isaac, the professional photographer, and finally, Shahbaz, the IT

With the creation of the site map and the design of the website in mind, we used three of

our user personas to created a user flow that would show the hypothetical journey each

individual would take while using our website. In particular, we decided to use Nneoma, the

art history PHD student, Isaac, the professional photographer, and finally, Shahbaz, the IT

With the creation of the site map and the design of the website in mind, we used three of

our user personas to created a user flow that would show the hypothetical journey each

individual would take while using our website. In particular, we decided to use Nneoma, the

art history PHD student, Isaac, the professional photographer, and finally, Shahbaz, the IT professional.

Frick_Lightbox_Book14Frick_Lightbox_Book15Frick_Lightbox_Book16

 

————————————————————————————————————————————

Site Map

After user testing the paper prototype, we collectively began designing the layout of the

Lightbox website. This site map represents the skeleton of the design of the Lightbox.

Frick_Lightbox_Book17

———————————————————————————————————————

Wireframes & Annotations

Frick_Lightbox_Book18Frick_Lightbox_Book19Frick_Lightbox_Book20Frick_Lightbox_Book21Frick_Lightbox_Book22Frick_Lightbox_Book23Frick_Lightbox_Book24Frick_Lightbox_Book25Frick_Lightbox_Book26Frick_Lightbox_Book27

——————————————————————————————————————————————–

The Team

Frick_Lightbox_Book32

Advertisements

E-Commerce Website: Unicorn Kids Shop

Project Overview.

The second installment of project coursework was to work in small groups to develop the user experience of a prototype e-commerce website – The Unicorn Kids Shop. We were told that the site originally sold all sorts of DIY kits, but recently pivoted to focus entirely on innovative learning kits for children, with the intention of becoming the “#1 resource for parents that want to incorporate hands on STEAM education into their kids everyday learning experience.”

The project required us to take a list of the top selling products and three user persona’s and develop a sitemap, user-flows, wireframes, and an interactive prototype in a two week timeframe. So without further adieu, I give you our process:

The Process.

1. Sketch a Site Map

Similar to my last project – we all found it a good idea to meet up and just get our ideas on paper. First, we sketched out potential site maps and the pages needed for those layouts. We also began to look through the list of products to develop some categories (this would later require a card sorting technique).

Img. 1 - Sketch of potential product categories.
Img. 1 – Sketch of potential product categories.
Img. 2 - Sketch of Site Map
Img. 2 – Sketch of Site Map
Img. 3 - Sketch of HomePage
Img. 3 – Sketch of Home Page

After a few iterations of sketches, we had a good enough idea to start developing our site map – but this could not be finished until we had fully finished categorizing the products, which would require some card sorting.

2. Card Sorting

We all felt that one of the most important parts of a users experience on an e-commerce website was the ability to find particular products, which almost came entirely down to the categorization of the products themselves.

In order to develop the categories, we researched each of the top selling products given to us and tagged each of them with 2-3 words we felt that the product fit into. Each product and its tags were written on a card.

Img. 4 - Card Sorting
Img. 4 – Card Sorting

We then went through several iterations of sorting them into groups, and naming each group. Eventually we settled on the following:

If you didn’t catch that, we decided on the following categories:
  • Robotics
  • Electronics
  • Microcontrollers
  • Aviation
  • Green Energy
  • Chemistry
  • Audio
  • Visual
  • Games

From this, we could then complete our sitemap:

Fig. 1 - Sitemap
Fig. 1 – Sitemap

3. User Flows

Next we needed to work on our user flows. A detailed description of each user was given to us, ranging from an elderly woman who didn’t quite understand the internet – but wanted to seem young and hip to her granddaughters, to a tech-savy younger man, who felt that college degrees were overrated (they were quite in depth). For each user, we were given a task that they wanted to complete, and had to outline how the user would navigate through our website given their personalities – we could then test this on other users later.

  • Bev needed to buy a gift for her grandson (she likes sales).
  • Charlie (who had visited the site before) wanted to by a gift for his niece who likes bugs.
  • Linea was visiting the site to find a return policy.

With the persona’s in mind, we developed the following three user flows:

Fig. 2 - User Flow Diagrams
Fig. 2 – User Flow Diagrams

4. Build Wireframes

Next, we needed to develop a set of wireframes of the site. This was entirely done in Axure.

We wanted the site to be easy to navigate, intuitive, and call upon the standard e-commerce experience (we felt it best to stay away from anything to new, and hence – unfamiliar). Products needed to be simple and easy to find, and we needed the site to be accessible and usable to users of all ages – considering the target audience was quite large.

5. Clickable Prototype

An interactive prototype was developed based on user persona Beverly and completed using Axure.

Unicorn User Beverly

To experience our interactive prototype, please click here (password: ecommerce).

6. User Testing

Next, we ran through a few tests with fellow students at NYU.

Img. 5 - User Testing
Img. 5 – User Testing
Img. 6 - User Testing 3
Img. 6 – User Testing 3

Generally, the users were able to navigate the site well, nothing was too confusing or new, but there were a few things that were suggested in order to improve the experience. Some of the feedback we received included:

  • Adding an option to create an account on the page a guest enters their information (users don’t tend to want to sign up, when confronted with the option to check out as a guest).
  • Adding more images of “Best Selling” and “Sale” boxes on the home page.
  • Having the “Featured” banner on the home page be on a timed scroll, rather than on user click.

For each user test, we gave the user one of the persona’s and prompted them with questions such as “Where would you click now?, If you want to see the sales items, where would you click?” etc.

Overall, we were happy with how our prototype performed, and felt that with the help of the feedback we received, we were able to create a great prototype for the client.

Client Presentation.

Finally, we had to present our site to the client, and walk them through one of our user flows on the interactive site.

We outlined the goal of the site, the user persona’s we scoped around, and finally the interactive prototype itself.

The presentation slides can be seen here.

Transportation Problems

This post is about commuter transportation issues. Via paper prototyping, I learn the UX design process of developing a transportation app to help my friend Janneisy improve her commute from Yonkers to NYU in Brooklyn, a 2 hour commute!

My first and last inclination is to tell her to move lol. But since she has no plans of moving…I went ahead to develop what I think would be a great app to help her through her morning and evening commute.

My friend’s main problem with her commute is that the bus she takes on her initial embarkment is never on time. My solution is to integrate live GPS data of the Bee-Line with the NYC MTA transportation system to better time her departure and arrival so she can decided whether or not she needs to hurry up or can take her time getting to the bus.

Talking more with Janneisy, I learned that she is really into music discovery probably from being on the bus and train 4 hrs a day…so I thought what if the app pulled in the soft data from her favorite apps to stream songs thru a one stop shop. Then, there’s no need to get out of this app and open another. If Spotify can stream iTunes, then my app can stream both and more with further development.

Lastly, the weather of New York is an ever changing thing. It could be raining one minute and sun shining the next, so with further discussion, we decided to add a weather page to quickly know what the weather will be like for the day. Once again adding this page into the app saves time from having to go into another weather app and as they say…time is money!

IMG_0015IMG_0019IMG_0027

After several iterations, I took my paper prototype to the app POP to demo a tappable simulation to verify my workflow.

IMG_6719IMG_6713IMG_6717

Please review my presentation and POP simulation link below.

Powerpoint:

Transportation Problems UX

POP (Prototyping on Paper):

https://popapp.in/projects/5415facd167d5e8b4e89ed55/preview