_Project Overview
Spylight's website, their main product hub, was suffering low retention based on what was seen on their analytics. Initially we were enlisted to redesign the entire interaction and UI system, but it required more finesse and share more in common with the fashion industry. This required extensive rebranding and going back to the drawing board about how users understood the product. Getting users to the target outcome in less steps was paramount!
Team/Duration: 3 (UX/UI Consultant, Lead Designer, Project Manager) / 5 Months, contract duration.
Tools: Whiteboard, Photoshop, Illustrator, InVision, Axure
Methods: Competitive/Comparative Analysis, User Interview, User Flow, Product Map, Wireframes, Usability Testing, Visual Mock-up, Prototyping
" Getting users to the target outcome in less steps was paramount!"
_The Challenge
The original Spylight website was not very clear. Also their advertised app was considered "clunky". Based on user feedback, they could not immediately understand if this was a video streaming website (like Netflix) or something else. Users had to go through several category filters (around 5 filters sometimes) in order to get to a desired item. Resolving the information architecture would hold an important part to this project.
TASK
-
Compile user research to determine how users understood the product.
-
If the user understood the product, how would they go about getting to their target and how many pages/steps did it take for them to get there.?
-
What needs to be sacrificed of the current product and what needs to be preserved?
-
-
What branding best fits the product without losing vision integrity?
SOLUTION
Revising the structure of the website and pushing it away from feeling like it was more entertainment industry than fashion industry. This would strengthen the understanding of what the product is and support the copy users would be reading, furthermore the calls to action directing their flow.
To ensure that the product was clear and clean, I pushed to develop "mobile-first" to ensure that the desktop content was not structured with too many features. With this approach, it helped focus on their MVP.
_Research
Even with the initial material available, like preliminary user interviews and analytics, there was no guarantee the data was good (meaning that it could have been contaminated). There were no procedures in place, so I had to ensure the methods fielded were scientific at best.
COMPETITIVE/COMPARATIVE
In early research stages, I had a team sort the competitive and comparative research for the product. This included: Kelly Nakawatase, Jade Law, Dave Fein, and Bren Yamaguchi.
We noted that other websites had an easier understanding of their value, which promoted brand trust.
There is a strong correlation among the more successful competitors that proximity of and size of images helped direct association and thus understanding of the intent.
WEBSITE
The header of the website, along with the visibility of the app screen, then a scattered selection of clothes, then back to entertainment items, all of this confused users towards the intent of the page and it was ultimately a cause for lack of user onboarding or product understanding. Because this is an e-commerce page, this hurt the company a great deal. Their only saving grace was their "Blog", which generated a lot of traffic but little in sales.
APP
Understanding the value of color and composition, I had to draw upon the thoughts and experiences of my team to marry user perceptions and design values in order to prepare for the rebrand. Specifically in their existing app, Spylight's branding did not match the desired vision.
USER INTERVIEWS
I guided some personnel in conducting user interviews, validating our insight from the surveys we received concerning Spylight's website. Using some of Spylight's interns, we verified some of the aforementioned points in other sections, but that it was also difficult to find the products they were looking for. Also whether or not the product was actually available.
_Design
BRANDING
This was the big one. Since we were developing Mobile-First, I often discussed with Melissa (as Lead Designer) concerning her thoughts in order to give structure and understanding to our approach. Our Project Manager, Rachel Bailin, oversaw the connective tissue and ensured we pushed through with Andy Scott who developed a branding identity with some of the adjustments that each of us picked apart. It needed to be fashion, but it also needed to feel like a mainstream user-friendly product.
(Designs by Andy Scott derived from mood boards supplied by Melissa Heller)
PRODUCT MAP
Starting from scratch, we developed the app using Melissa's aesthetics in order to understand context and feel. Typically I do wireframes without all the content, but visual and feel makes up for a lot when fashion is involved. Context is key.
From printing out all the screens and taping them to the board (so that I could assess how much effort it takes to get to certain options), we revised a few features and finalized the interlocking pages through what I called an "App Map".
FOCUS SHIFT
Due to executive decision, the stakeholders did not feel pushing the app forward would be in their best interest, despite the protest of the team. So we changed gears and pushed forward with the desktop model, which was rapidly assembled now that we had finished the materials for the app.
_Wireframes
_Outcomes
NEXT STEPS
With the approval of the staff, the product pushed into the development and release of the website. Otherwise, the app would have been the target for simultaneous launch.
This would still need more testing and further iterative work, however.
STRATEGY
Back in my attendance of CES 2015, I sat in on a panel concerning mobile devices. Analysts saw a notable rise in mobile usage over desktop, which indicated to me that maintaining a mobile platform would serve in Spylight's best interest. My project manager agreed.
While market trends are based on whomever is leading the herd, observing the demographic of Spylight's users (20s to 30s, female, middle class) I acknowledged that active usage of mobile devices in general was a safe bet over the coming years.