Adverator.com
Building the first & only online marketplace for buying local ads
SUMMARY
This case study aims to chronicle our design process of building Adverator.com. In this article, I’ll share insight into our product design process, the tools & methods I used to create and implement our UI/UX framework, and also how I structured, documented and share the system with my team.
DATE
2015-present
Role
Lead Product Designer
THE Context
When it comes to buying local ads, most small and medium business owners only hear about ad options from sales reps and researching/comparing those options is a time-suck. To make matters worse, most of these ad options are handled by small publishers with antiquated/manual order processing & fulfillment process.
WHAT WE'VE DONE SO FAR
Since early 2015, Adverator has introduced 10,000 small/medium business owners to our e-commerce style buying experience. They began to change their perceptions as we showed them how much better and easier the process can be. The feedback we get from our users and an increase in platform activity & sales volume ($8M in revenue over the last 2 years) tole us we’ve done well.
Our goal is to revolutionize the way small business discover, buy & manage their Advertising.
Design Process
Everyone uses e-commerce sites like amazon to buy things, but can people buy ads in the same way? What would be the best way for our users? In search for the best product/market fit, we followed a user-centered design process.
Here's an overview of our journey. As the lead product designer, I'm involved in every part of the process but my main focus was to establish team-wide UX/UI frameworks and maintaining a consistent visual system.
User studies
Based on our extensive user studies, we created four personas to establish a common understanding of our final users among our product team. When designing, I would evaluate whether my design would support or stump each usertype.
For example, there are two versions of the navigation bar displayed to different usertype.
design sprints
One of the methods I used to tackle design challenges was called the “one week sprint”: In the morning, I would start sketching and come up with as many options as I can and by the afternoon, I would narrow it down to the best direction and made it into a clickable prototype. I would then review with the team and do quick user tests. So on and so forth over the period of a week until we land on a final (and the most elegant) solution.
Day 1
Day 3
Day 5
prototyping
The one-week sprint method had proven to work really well mainly because it allowed me to focus and bring in feedbacks in a systematic way. There was one additional key factor that made my method successful — that was using clickable prototypes. Not just making them but to make them really quickly. My go-tos are tools like framerjs, atomic, principle and inVision to make my prototypes, whichever the fastest. Here are some of my recent prototypes examples.
atomic design method
Initially, I researched lots of e-commerce UX patterns for reference. When it came to making our own customized version, I used the atomic design method to keep myself organized and to sort through all the component I needed to build.
One thing I would have done differently today is to also reference a mature, constantly developed visual language or UI kit with very good documentation and pattern library earlier on in the process...It would come in handy when thinking about all the parts we’d need structurally. I would probably also leverage it to put together quick wireframes rather than starting from scratch
UX Tools/p>
Our product team uses tools like google slides and figma to share & review researches, sketches and wireframes.
UX framework
I used sketch for wireframes mostly but recently I'm trying out figma(mainly for the amazing collaboration feature).
UI framework
I developed a UI system for our design team alongside with the UX explorations. Looking back, I’m glad to have taken the time to do some set up at the beginning, which turned out to be critical in getting us to where we are today.We had chosen to use bootstrap as the base framework and sass as the additional stylesheet. Using bootstrap grids and some of its out-of-box components allowed us to get the site up quickly and most of the front-end lift was in creating a customized stylesheet.
I developed a flexible symbols system to facilitate multiple designers in our team to design with ease and ensure consistency.
I utilized the 8pt size system coming from google material design was our system of choice in improving efficiency and consistency.
Collaboration
When it comes to working day-to-day, I care a lot about communicating details. I'm always on the hunt for the best way to streamline our workflow and foster better collaboration.
In these examples, I had coded these and sent them to our developers to better communicate detailed interactions.
BEYOND
It's been a long but fun journey and I'm glad to have played an important part in this product. There's yet a lot to explore and learn. You can visit my dribbble to see more recent progress shots. Thanks for reading :)
Appendix
Case studies for Specific Features