Widget Gallery
An ecosystem designed to bolster the capabilities of the Nativo platform.
Introduction
Nativo is the most advanced platform for deploying, serving and optimizing integrated ads and brand content. The basis of Nativo’s goal is to incorporate this content in the most engaging and educational way possible. This requires our users to input content as seamlessly and efficiently as possible. The users responsible for this would be the campaign managers, content strategists, and the sales team. On behalf of the advertiser they would need to incorporate widgets such as Google Maps, YouTube, Twitter, Skyscanner, etc.
Problem
Difficult to embed anything other than videos and images
Users are not familiar with coding
Implementing widgets with the current tools is time consuming
Goal
Reduce time spent on implementing widgets
Drop the involvement of software engineers aiding in widget implementation
A solution that would require no coding knowledge so campaign mangers, content strategists, and the sales team would be able to use this feature
Solution
We sought out to create a widget ecosystem for our organization that would be private initially, but opened up publicly in the future. The face of this new marketplace would be the Widget Gallery, a place to pick and choose which widgets you wanted placed into your content. In addition to picking and choosing a widget from our provided list, we wanted to also offer a system where users had the ability to create their own widgets from scratch. We created a tab system to make this an easy process for the users called the Widget Editor.
Process
1. Kick Off with Product Manager
Meet with product managers and define scope of project
Ask questions!
Define user personas and their goals/needs
Look at any customer requests/feedback
2. Research
Competitive Analysis - Get information/screenshots/logins for similar features - Note advantages and disadvantages (ask product managers)
Interview users (internal and external)
Compare and contrast answers from various users
Comparing and contrasting helped figure out what were going to be the main features
Inspiration
Themeforest
iTunes
Elfsight
3. Sketches
Wireframe
Present initial ideas to product managers and potential users
Design the series of steps the end user will take when using the product
Through this process we solidified what the main core of the product would be
Structure content and think about the full “customer journey”
Site Flow
4. Mockups
Hurdle alert: In the middle of creating the High Fidelity mockups we had a new style guide emerging. We decided to fine tune the low fidelity mocks before proceeding with the updated visuals, limiting any potential wasted time.
High Fidelity mockups
Apply style guide
Create pixel perfect screens in Sketch
Export mocks to Zeplin
Style Guide
High Fidelity Mockups
5. Testing
Present design to users internally first, then proceeded to external users
Presenting internally initially allowed for minor tweaks before handing the product off to external users
Use questionnaires, surveys or more interviews to identify spots of difficulty or confusion
Implement new changes from feedback
Conclusion
The Widget Gallery simplified the implementation of widgets for the Nativo users. With this new tool the team can now deliver content for the clients in a quick and efficient manner.
Data Points:
Less clicks to embed widgets
Less time to import widgets
Increased rebuys
New opportunity to sell to clients
Increase in feature adoption