Gloopro Landing Page

WEB, FRONT END, PRODUCT MANAGEMENT

Designing and developing the marketing page for a startup that pivoted from eCommerce to eProcurement

DESIGN PROBLEM

Gloopro is a startup that wants to pivot from eCommerce to eProcurement.

The goal of the project was to design a marketing website that communicates Gloopro features. Following how well I handled the marketing portion of this project, I was immediately offered the contract to design the MVP for the web app towards launch.

ROLE/TIMELINE

UX DESIGN/FRONT END
April 2019

REQUIREMENTS GATHERING

The design process started with a strategy phase. Here, I asked a lot of fundamental questions, like what are our goals, who are our users, what are their needs, e.t.c

Tool Used: Google Docs

SCOPE OUTLINE

After the initial requirements gathering, we came up with a list of content and functionality requirements that needs to be done to fulfill the goals set up in the requirements gathering phase. Here we also determine the navigational structure of the site and ironed out which functionalities are must-do, should-do, and could-do based on the timeline, resources, and impact/reward.

Tool Used: Paper and Pen, Emails, Skype

WIREFRAMING

Here, the focus shifts from the site as a whole to individual webpages. I used Balsamiq to create simple sketches of the structural makeup of the entire site.

Tool Used: Balsamiq, Marvel

After creating the wireframes in Balsamiq, I exported them as PNG’s into Marvel to get feedback from the client. The wireframing stage allowed me to standardize layout concerns and general architectural blueprints of the website.

I created 2 sections in Marvel for ongoing wireframe iterations and Approved for mockup. Once a particular wireframe is approved by the client, the conversion to a visual mockup follows.

VISUAL MOCKUPS

After studying the answers of the clients to the questions of what website they like and hate, we also looked at the websites of a lot of other eProcurement solutions, but we also looked more generally at B2B and enterprises. Based on this synergy and our wireframes baseline, I would then provide options for the clients.

Trade-offs: With our wireframing not set in stone, we tweaked instances where we found better alternatives through research and inspiration. An example is the Pricing page where we reduced some rows and columns as the client affirmed that beta testers were finding many options confusing, sometimes fewer choices could truly be better.

RESPONSIVENESS

I made mobile and tablet views for 1200px+ and 320px breakpoints.

DEVELOPMENT

Grid and Layout: We used CSS Grid for the bulk of the website, it was important to follow a grid-based approach when laying out these pages in Sketch.

12 column grid-based layout and 2 column grid-based layout

Asset Hand-off: For the most part, Marvel handoff was quite sufficient for handing off assets and even code specs.

But for the few SVG animations, all were done in SVGator.

REFLECTIONS/LEARNINGS

The Development phase involved a lot of testing by the client to make sure everything looks as intended, and once we had the SIGN OFF button clicked on Appotate, we knew it was time to push to production.

Development is never done. But it was quite challenging and impressive for me to manage the end to end process of designing the marketing website for Gloopro, from receiving the first call about the need for a website to seeing a Press mention on Techcrunch.