top of page
Vecteezy Editor is an online editing platform which allows anyone to customize, create and download images, vectors, templates.
Low Fidelity Wireframing
Figma and Sketch
April 2020 - July 2020
Product Manager, Developers, Product Designers, Customer Success Manager, Data Analyst
What is Vecteezy Editor?
Vecteezy Editor is an online vector editing platform designed to allow anyone to customize Vecteezy content before they download it, or create beautiful vector designs from scratch directly in your browser.
Founded in 2007, Vecteezy Editor had built a reputation as an innovative and powerful global provider and editor of digital imagery. However, as the product was built up piece by piece over the years, it no longer felt modern and cohesive, and the existing features were not meeting metrics and customers expectations.
As a result of my user-focus research, the first phase of the refresh launch is estimated in a year and it has increased engagement and user retention in most of our reports by debugging few bugs (ranging from 25% to 65%!) and sported a cleaner and more up to date visual style to more closely match our marketing properties.
The design of the editor was made by one of the freelance designer, but the work had stalled after his contract. Everyone wanted to find a way solve issues in the current design or launch a redesign, but getting a project like this off the ground takes a plan and lot of effort.
When I joined, I started creating an outline and how the product fits into the user’s workflow both within and beyond the Vecteezy ecosystem. It was clear to me from the beginning that in order to move forward on this project, we required clear and measurable goals to help direct us. Product redesigns are notoriously difficult and costly projects to take on, and the way the current project was framed it likely would have taken over two years to design and implement. That’s a long time to work on something that far-reaching without customer input!
An earlier version of Vecteezy Editor before I joined the team.
As my first step, I needed to understand the problem we were looking to solve. I spoke with stakeholders and partners in the customer-facing teams and discovered four separate problems.
Our reputation as an innovative company was closely tied to our visual style, but that style hadn’t been updated in years. The market had moved past us and we now looked extremely outdated.
Each feature had been designed and built fairly separately, so there was little inconsistency in interaction and report architecture. I spent one week learning, imagine what our customers went through!
As the team launched this product and never validated the design, it was became difficult to find a clear entry point. The primary issue were the existing bugs, but also the lack of new features to complete their task.
The usage metrics were lower than we had hoped and the editor was only used to download. Here the primary issue lack of customer education bc majority of customers belong to Gen X and Baby Boomers.
Analysis & Synthesis
The user research was conducted to assess thoughts, opinions, and usage on the Vecteezy Editor and its features. It was also important to assess behaviors, attitudes, features, and feelings on the Vecteezy Editor and its features. It was then followed with the analysis, ideation, user flows, user stories, and user testing of old and new concept.
Now that I had a better understanding of what the redesign and changes were expected to accomplish, I set my own guiding policies for running a project of this scale.
1. Get customer feedback through the user research process
This may seem obvious, but formal feedback and usability sessions with the customers were not yet tried on this product.
2. Set priorities and including the internal stakeholders
The scope and priorities needed to be finalized so as to make sure everyone is working towards it. Hence, including all the internal stakeholders were as important as making clear decisions.
3. Create awareness for the product internally to market in a right way
According to the team, it was clear that the product had not given any importance since the launch and no tracking was done as well. So, the clear call to action was to set up a tracking system for the editor.
With these as fundamentals, it became clear that whatever the roadmap the company takes for this product, some work was needed to ensure it was successful. Collaborating with the Product Manager, we created a strategy for the product into distinct launchable stages, which mirrored the problems uncovered during the discovery phase.
Create space for additional features over the at least next 3 years while ensuring customers can easily be able to achieve their tasks. Decide on what features to add and remove.
Improve user experience by being consistent with the Vecteezy product's patterns and components across the entire editor product, thus reducing surface area.
Using the system build in phase two inline with the Vecteezy product, update the visual design and user interface to be more inline with a powerful and first-class brand.
The three phases of work allowed us to be focused, learn from the customers, and provide value to our customers more quickly and efficiently.
Focus on New Capabilities - Discover
With a phased approach to the launch, we were able to focus on various smaller problem sets – right from the top level navigation in the product to the smallest features.
Research and Framing
300 + Survey responses | 15 + User interviews | 10 + User testing
are non-designers whose working professions are like teacher, nurse, healthcare professional, business owners
of customers struggled to use the Editor due to lack of instructions on the platform
struggled to complete their tasks due to the lack of ability of current features available
customers download and use the vectors in a presentation or import in other software
Our current design had a lot of features with no clarity of what each feature caters – it was hard for our customers to understand each feature especially the customers lying in the Gen Xers and Baby Boomers category.
To give us a seed for these categories, we ran a usability and card-sorting test with all our customer-facing employees and also our customers. This provided us with some insight into how our Sales, Customer Success, and Support teams talk about our product to our customer and what our customer understands about our product.
"Help" button missing
Not enough clarity on unit of measurement
on what feature is that exactly
“I mostly remove any solid backgrounds for faster placement of images without more image design”
“I like to edit labels and assemble text in the right spot as I create customized greeting cards for my friends and family”
“I work with children and many of the vectors primarily feature white children, so, I try to edit those by changing color schemes, making character figures more diverse”
“I tried, and I don't know how to use those things because there were no instructions. But I believe the program is designed for designers, and I'm not a designer”
Even though this was a focused initiative, one small change done by a single designer, its potential impact was quite large. So it was important to ensure that the entire team was involved from the beginning. I onboarded everyone together to explore different concepts, layouts, and user flows to work on.
Current product's user flow
Proposed user flow
Testing and Iterations
A few concepts created by collaborating with the team
Using the data from our interviews, surveys, heuristic evaluation, card-sorting exercise and the ideas from the team, we then developed a few options and validated the categories with our customers.
- Should be able to customize the art board size according to their own needs.
- Users could not find the "help" feature
- Users would love to see layers of all the present vectors available in the image/vector and customize it according to his needs.
- Questions prompted by the users:
How do I go back to see my saved file?
What if I want to get vectors from my other files edited in the editor?
How should go back to search on Vecteezy?
The testing process took several forms – each aimed at learning different things from our customers.
Feature Category validation
Before committing to the categories we had, we put together some wireframes and did a series of timed usability tests with customers.
We ran 4 different surveys in-product to help us narrow in on labels that were proving more difficult.
Once we had a high-fidelity design, we tested a few different click-throughs to help us answer some questions and get some more qualitative feedback
Test and Learn
Even though our usability tests indicated that our users were easily able to complete their tasks in the new design, we still wanted to mitigate the impact of the change by staging the launch and tracking engagement.
Regardless of the a change in the quality in the long run, the emotional impact of a change being forced on customers can be very costly to your business, reputation in the market and relationships. From a business perspective, it was also important for us to have clear metrics to ensure we weren’t hurting usage.
With this in mind, I proposed a rolling launch plan and then worked with the PM to refine it. We started by launching to a small set of our users with the ability to opt-out, so we could gather preference metrics and feedback. We then followed up with an usability test to measure engagement in the new design vs. the control.
Solution to Launch
The final design maintained the earlier concepts we had in the beginning. However, since the printing feature could be saved for later, I prioritized finding ways to speed up the perceived performance of the product. By combining adding page and layers options with a inward carousel and more responsive loading indicators we were able to reduce the amount of clicking and waiting with the new design.
Another key aspect of the new design was the inclusion of labelling and descriptions for each of the features. Through discussions with stakeholders and customers, we knew that all the features weren’t always meaningful enough to encourage exploration and try on their own. While adding more text can add visual complexity and not always encourage users to read the content, our usability tests indicated that the context made the product more relatable to our customers. By adding explanations and indicating functionality of each feature, we were able to create a mental model of our offerings to our customers that didn’t already have one.
Inspiring for users
- Ease of use
- Quick Assistance
- Credibility (testimonials)
Uninspiring for users
- Difficult to use
- Lack of instructions
- Technical problems
- Non-compatible to all devices
Landing Page to select the design
A customer lands on this page after they complete their on-boarding process. This page helps them search the vector/image/template they want to further take and customize according to their needs.
Select Artboard size and color
The additions to the features from the previous design has been done in terms of selecting an appropriate size as per users needs and the color as well by giving a drop down menu to select the size in cm, m, mm, inch etc.
Navigation bar, toolbar
The main CTAs remaining the same, we added the name of the file, the type of template the user is editing and share feature to the nav bar. The pages feature has been added to make sure users get the flexibility to design by using certain pages. The color palette has been designed as such it shows all the existing colors from the selected templates.
The templates feature is an addition to the current design to make the users lives easy while they are creating their experience using the Vecteezy Editor. The templates will help them to customize easily the way they want any type of category.
Text feature upgrade
The text feature has been upgraded by observing the bugs in the current design. Made it more simpler to use by picking the kind of combination the users feel is relevant to the kind of design they are doing.
Theme feature addition
The theme feature would help users to customize only the text and the theme can be changed by using the different options like chrome, pop etc. This will help users to create GIFs, images which can be shared directly on the social media.
Learnings and Impact
Reduced customer support calls on "How to use"
Liked the new version better with a positive reaction
On the qualitative side, we received a lot of positive emotional reaction. More than 65% said they liked the new version better. Our visual style was cleaned-up and modernized by making small visual changes, and improving consistency in color, type, and spacing.
In terms of engagement metrics, nearly all of new feature launches rose in daily active users. Given that customers had previously said that their lower usage was due to the bugs, the lack of legibility and understanding of each feature (they weren't sure how to exactly use and what all can be done on this product), the bump in usage indicates that discovery and using of features had been very much improved.
Overall, the customer support calls reduced “how to use” by 20%.
The metrics outcomes of this project were highly successful by any measure, but the impact I am most proud of is the change in the way products were developed at Eezy.
By structuring the project around user feedback and ensuring we scheduled time to react to test results, the attitude on the team was completely different. We created room for learning and experimentation and increased confidence, all while mitigating the impact on our customers.
bottom of page