NEXD
One of the big problems with pet adoption is that many do not fully understand the responsibilities involved and often animals end up back in shelters. We aimed to employ technology as a means to help preventing pets from being returned and keep Austin's no kill ratio above its target - 95%.
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
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.
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.
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
HOME - CREATIVE
SIGN UP - BEGIN
SIGN UP - COMPLETE
DESIGN ITERATION
This graphic shows how one screen went from early sketch, to wireframe to high fidelity mock over time.
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.
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.
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
-
I would have liked to have done more testing
-
Wish we could have convinced client to rebrand
Next