Designing and developing the marketing page for a startup that pivoted from eCommerce to eProcurement
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.
UX DESIGN/FRONT END
April 2019
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
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
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.
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.
I made mobile and tablet views for 1200px+ and 320px breakpoints.
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.
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.
