DISPLAY.IT

VISION

PROJECT DESCRIPTION

Founder, Jonothan Pina, had a vision to build a platform allowing affiliate marketers to turn their Instagram likes into money. 

Using a new back end watermarking code system, Display ensures that Instagram tastemakers get credit for their work and their fans can make money by sharing looks.

My final assignment during General Assembly's ten week course, partnered me and two other students with a real start up company. We provided full UX design services for them over the course of three weeks. In our case, the client asked me to continue work for him after we presented our final synthesis and handed off deliverables. 

HOME PAGE

We designed this page so that it would be responsive for mobile and desktop devices. A home page redesign emerged as one of our most important tasks over the course of this project. 

THE TEAM

CHALLENGES​

UX :

Jacob Perez 

Shiwani Pal


Founder :

Jonathan Pina

  • Meet with the stakeholders to determine their needs then ascertain which ones we can reasonably meet within a three week timeline.

  • The product was much more complex than we initially thought and "scope creep" became a very real issue. 

  • We were unfamiliar with affiliate marketing before this project and had to educate ourselves accordingly. 

TIMELINE

Three weeks

TOOLS

Adobe Suite Sketch, InVision, Keynote

ACTIVITIES

User research, user testing, card sorting, determined MVP, stakeholder meetings, site mapping, contextual interviews, competitive analysis, heuristic analysis, created personas, design studio sketching, wireframes, prototyping, high fidelity mock ups, style guide creation, suggested branding alternatives, employed agile sprint methodology.   

RESEARCH

FIRST IMPRESSION

No one on the team could readily grasp the purpose of the site, so we tested it to see if other users could. Only one of our subjects was actually able to understand what the site was trying to accomplish and he specialized in content strategy. 

EARLY RESEARCH​

  • We were all unsure what function of the site was supposed to be. 

  • Site imagery and language seemed sophomoric.

  • Important features buried at the bottom of lengthy home page. 

EXISTING SITE​​ TEST

  • Testing confirmed our findings, the site was difficult to understand.

  • Users were generally frustrated.

  • Several pointed out information redundancy.

  • Only user who understood it was a strategic content specialist.  

SITE MAP

The existing product was difficult to navigate, so we made a map to help us understand its information architecture. Our findings revealed that key content, important for user understanding, was buried and there was significant redundancy. 

Display Site Map.png

HEURISTIC ANALYSIS

Using Nielsen's ten categories of heuristic analytics, I evaluated the effectiveness of the existing site and made the infographic below to help visualize which categories were more or less successful.

updated display-it heuristic.jpg

INTERVIEWS

After analyzing the site, we visited several local businesses to find and interview potential users and ask how online sales fitted into their business model. Also, we wanted to see how the existing website could be of any use to them. The people we spoke with felt that the site was best built to serve creatives, tastemakers and shoppers. 

What is the purpose of this site? how would I even use it if I wanted too?

Why would shoppers have to sign in? Why can't I just start buying stuff right away?

The logo and fonts are ugly. it feels like a site for kid's clothing, not a fashion hub. 

COMPARATIVE ANALYSIS

We looked at several websites that our founder and the people we interviewed had mentioned, in order to analyze which ones were fulfilling the same needs as Display. Interestingly, no one website we could find served all of them in one place.

SYNTHESIS

Our market research and competitive analyses told us that Displae had found a unique niche in the affiliate marketing ecosystem. However, its three target user groups were confused by the site design and hence unable to see the value of the product.

 

The main issues we uncovered concerned the lengthy and badly organized home page, so given our limited amount of time and resources we made redesigning it our top priority. Also, shoppers needed a more efficient checkout and dashboard, so we tackled that as well. We felt that these were the two largest impediments between the site and its audience. 

IDEATION

SCOPING

After looking over our research findings, we discussed which features of the website should be most important. We used the MoSCoW (must have, should have, could have, won't have) method to determine our minimum viable product and distribute the tasks among team members.   

M.V.P.

With time tight, we needed to quickly figure out a minimum viable product. So based on our research, we determined what the most essential deliverables were: a new home page, a style guide and both shopper / creative dashboards. With only three weeks and limited experience, this felt like an achievable goal.  

MoSCoW METHOD

  • Testing confirmed our findings, the site was difficult to understand.

  • Users were generally frustrated.

  • Several pointed out information redundancy.

  • Only user who understood it was a strategic content specialist.  

USER STORIES

"As a fashion tastemaker and blogger, I want an easy process to upload my looks and tag them, so that  I can increase my earning potential."

"As a local retailer, I want to partner with fashion influencers so that I can increase my brand awareness online."

"As a very active online shopper, I want a one stop shop to buy products, so that I can save time by not visiting multiple websites."

After learning which user groups the product owner wanted to target, we created personas to further explore the needs of these individuals. Specifically, creatives who want to earn commissions from affiliate marketing and shoppers who want a more streamlined online experience. Many retailers were also influencers / tastemakers  

INFLUENCER

SHOPPER

USER FLOWS

Once we had established the goals and motivations of our target user groups we designed simple user flows to help us envision how members of the different groups would move through the site in an effort to achieve their objectives.     

CARD SORTING

Since the website is intended to appeal to many different lifestyle groups, there were a lot of unorganized shopping categories. We did some taxonomy to determine the overarching categories on the home page, which helped  us organize it. Ultimately this would enable users to find the category they are looking for quickly.  

DELINEATE

DESIGN STUDIO

With our priorities in order, we tackled the visual design and layout of our client's home page with the aim of shrinking it and making the important elements read clearly. We worked using the agile principles and practices.    

WORK SESSION

INDIVIDUAL IDEAS

WIREFRAME SKETCHES 

WIREFRAMES - LOW FIDELITY

After our design studio, we created low resolution wireframes for all pages that comprised our MVP. Jacob and Shiwani used prototypes made with these to do initial user testing, which revealed that the streamlined home page was working better and communicating to users more effectively.  

HOME

SIGN UP - CREATIVE

HOME - SHOPPER INFO

CREATIVE DASHBOARD

HIGH FIDELITY MOCK UPS    

Using the low resolution wireframes, I produced a set of high fidelity mock ups that we later used to create a clickable prototype. This task is well suited for me, considering my significant graphic training and design education.    

HOME

Desktop HD.jpg

HOME - CREATIVE

Desktop influencer.png

SIGN UP - BEGIN

sign in 1.png

SIGN UP - COMPLETE

sign in 3.png

DESIGN ITERATION 

This graphic shows how one screen went from early sketch, to wireframe to high fidelity mock over time.

wireframe process copy.jpg

PROTOTYPE     

We created a clickable prototype with the high fidelity mock ups that I created. Below, the screen is showing a video of the prototype in use.

BEFORE AND AFTER   

I stitched together screenshots of the old homepage to analyze it and emphasize its length. For comparison our new homepage is shown on the right, notice that is is probably 20% of the current home page's length; it is streamlined and more clear.

before and after.jpg

STYLE TILE

I created a graphic standard for the look and feel of Display's surface plane, based on some of the user feedback we received. My primary aim was to move away from the childish branding that users perceived and toward the styling of a fashion magazine.

displae style guide.jpg

VALIDATE

REAL WORLD RESULTS 

A few weeks after we presented our findings and deliverables to Displae founder, Jonathan Pina, the existing home page had been changed to one which closely resembled our high fidelity mock up. 

DiSPLAE new home.jpg

WHAT WE DID RIGHT​​

  • Identified our individual strengths 

  • Followed a clear design process

  • Delegated work well

  • Had a lot of fun

Prev.

AREAS TO IMPROVE ON​​

  • I would have liked to have done more testing 

  • Wish we could have convinced client to rebrand

Next

1h.png