Unravel was a greenfield project and I owned the entire design process from conception to completion, including wireframes, Instagram posts, hi-fidelity mocks and qualitative user testing.
Within a short timeframe, I partnered with a Product Manager and a Developer to define the full experience and create the product Beta. The idea was to diversify our company's business offerings to the deals space with personally curated product deals.
The following "Only-ness Statement" I created to establish the uniqueness of Unravel and to provide clarity on what we were building.
"This is the only discounted product RWD site that shows a highly curated offering of product categories and offers the opportunity to win giveaways while shopping for price-savvy millennials who want to find specific products as well as discover new products during an online search and comparison between products and price."
The ultimate plan was to apply Unravel's IA and back-end infrastructure to different target audiences and shopping demographics. Essentially, Unravel was created to be a template for breaking into other very specific demographics for online shopping deals. The initial target audience of millennial women for Unravel was user tested both qualitatively and quantitatively. An agile MVP approach was adopted in order for us to fail fast and iterate often. The small team was composed of Bronson McKinley (Development), Anlynn Lee (Product) and myself where mutual respect was matched with supporting/balancing strengths, drive and no shortage of fun.
The future version of Unravel includes more features like Personal Collections, Giveaways, and Recently Viewed.
Strategically organizing the categories and types of content pages help outline how these V2 features fit into the site and assist in our product roadmap.
Mobile-first wireframes exploring main category interactions with optional navigation items and filtering (included on the last sketch).
Interface and branding elements in various states.
Overview showing the 5 different breakpoints including global navigation, sorting, interstitial page, products, and footer.
Desktop interaction spotlighting filtering, sorting, and navigation for the shopping deals website Unravel.
In response to requests for a native Goodshop app from Android users and to expand to a wider audience, I designed the Android Goodshop App in early 2016 to parallel our iOS offering. This incarnation of the app was extended our feature set and applied Google's Material design principles.
Check it out for yourself!
https://play.google.com/store/apps/details?id=com.goodshop.android&hl=en_US
The Gumdrop Landing page is the #1 place for users to learn about the Gumdrop (browser extension) and the primary page to download. Aside from updating the page with the new Gumdrop branding, it was important to the stakeholders that this new design lower the bounce rate which was at 72.1% in Q4 of 2016. Knowing this I focused on two things; making the download CTA easily accessible and minimizing user distraction and cognitive load. My redesign has seen a 15.7% drop in the bounce rate, taking it from 72.1% to 56.4%.
By pulling data from our email headline copy tests, website A/B tests, and conducting a competitive analysis, I incorporated the winning headline and CTAs that proved out the highest click and conversion rates. Since it went live in February of 2017.
This new design has additional sections if the visitor wants more information, but as the user scrolls, a sticky header maintains the download CTA so the user always has a conversion point available regardless of where they are on the page.
Since Gumdrop is a browser extension this design's main focus was on desktop users, but I also made sure the mobile experience was still valuable. Instead of showing a CTA to download, mobile devices show an email input field which users can send themselves a link to download the extension at a later time when on a desktop computer.
The new design's hero image is an animated gif which depicts the extensions' distilled "happy path" product flow and core value to the visitor as the initial point of quick comprehension. Previously the core values were broken up into a more traditional layout with multiple sections requiring scrolling. The gif offers an alternative education up front that some visitors prefer and find sufficient for converting.
Sometimes, despite best intentions and practices, annoying pop-ups can get implemented. They may initially be called "a quick and dirty test", but what happens when a handful of users convert and stakeholders see some value in a feature that goes against everything you know about acceptable design? You talk to your cross-functional teams, discuss the repercussions and gather information from customer support, analytics, SEO, and W3C standards. Then you take the data and figure out an alternative converting feature that doesn't hurt your site and alienate core users.
User complaints about the pop up were prevalent and reasons for the complaints varied. People found them disruptive, that they happened too frequently and appeared for users that had transacted on the product previously. SEO is impacted by a pop-up that doesn't follow certain guidelines and, on many of the pages where the pop-up appeared, SEO mattered.
I brought it upon myself to research alternative options and definineg a new experience that mitigated the negative aspects of the pop-up while piquing the interest of potential users and converting them to Gumdrop. Above all, the new experience required user initiation, minimal user disruption and a strict set of dependency rules.
Qualitative user feedback showed that subtle animation was key to grabbing user attention and encouraging them to explore and engage in the new cross-sell. Persisting the headline and images hover area was one way to elevate its hierarchy on the page, but also allowing the user to dismiss the popup when activated was important. When dismissed there are a strict set of rules that are followed in order to not show the popup again within a set amount of time or to not show at all if, for example, the user downloads Gumdrop.
