VisualEyes Web App

Imagining the world's first design assistant's web app.


Lead Product Design


October 2019 - Present

In a nutshell

I led the product design of the whole web application, collaborating with a very talented cross-functional team. That went from designing the interaction system, defining application's structure and user experience to delivering high-fidelity mockups to the engineers.

I also had a direct involvement in the product management and run several design sprints, ensuring successful shipment of features on a frequent basis. Followed a data-driven approach for versioning and iterating.

Dribbble Shot HD – Homepage

The challenge

A few words

Joining VisualEyes' team in October 2019, I was introduced into an exciting project accompanied with an alluring product vision. VisualEyes is a product that delivers predictive design analytics to designers, researchers, managers and marketers. It allows for pre-production, cost-effective testing.

At the time, VisualEyes' AI-generated results were only available via design tool plugins. It was decided that a web application that offers centralized content management and access to non design tool users should be built. 


“Thanos is a remarkable professional. His skills cover the full spectrum of the design process. Our working relationship was characterized by clear communication and empathy. Apart from his soft skills, he has a full understanding of the design thinking process and is able to provide unique visuals too.

In VisualEyes, Thanos was responsible for the product design of our core web app. He designed the main design system of our applications and the whole pipeline of our web app (UX flows, mockups, prototypes, pixel-perfect screens). In addition, he handled excellently the handoff process with our development team.”

- Jim Raptis, VisualEyes Co-founder

My contribution

Designing the product

Product thinking & vision

Working closely with internal stakeholders, we held team-wide meetings to assess problems and suggest solutions. I tried to manage product development according to the established company's vision and the users' requirements. Understanding those was a huge challenge that led us to continuously iterate based on newly discovered business needs.

Product architecture

Defined processes, affordances and designed the underlying system as a whole, while collaborating with the engineering team. Created the product blueprint, based on which all future iterations were situated.

UX Design & Design system 

Using data and design methods to create a user-centric approach to the product design challenge. Continuous user feedback aided in exploring and building highly usable solutions. Created the design system and visual language of the whole application, in order to communicate product's value to the users, while keeping it consistent.

Research & Scope

Understanding product vision and users' needs


Design is mostly treated as a creative process. Design analytics are a thing most designers are not familiar with.

How can we create a web application that conveys the value of design AI analytics, while educating users on how to exploit these quantifiable metrics?

Key pain points

Lack of users' familiarity with model

Communicating company vision

3  Applying tech to pre-existing designers' workflow



Designing the system

Building a robust structural backbone to the service was crucial at all levels of development. The goal was to forge a system that is malleable and can be enriched with multiple features along the way. Besides that, much attention was paid on easing the user interaction process, thus devising the most frictionless user experience possible.

Based on the aforementioned requirements, the system was designed to encompass all the needed affordances, so users can:

1  Test their design outcomes
2  Compare and benchmark their designs
 Organize and manage their content
 Share their results with stakeholders



"Shipping features" cycle

1. Defining requirements

Working closely with internal stakeholders, we held team-wide meetings to assess problems and suggest solutions. I tried to manage product development according to the established company's vision and the users' requirements.

2. Designing solutions

Defined processes, affordances and the underlying system as a whole, while collaborating with the engineering team. 

3. Testing solutions and making them robust

Excessive feature testing in order to pinpoint possible inconsistencies, both for the UX and dev aspects of building.

4. Implementing feature

After successfully building and testing the feature, we proceeded to implementing the feature in our live service.

Visualising desicions

Rapid wireframing

Communicated future iterations and product desicions. Wireframes were used to validate said assumptions and move forward with building new features, swiftly. This process helped us to convey product strategy successfully and collaborate seamlessly with the dev team.



Setting the right user path

An onboarding system was designed to accompany users thoughout their user lifecycle. Rather than just guiding our users on how to use the product, we tried to aid them in discovering the true value of the service with providing examples and premade use cases.



Consistent visuals

The design system constructed in Figma. I tried to keep a consistent visual style that communicates the company branding and tone of voice, while complementing the interaction with the product.

Maintaining and updating the design system allowed for quick and fruitful collaboration with the whole team. Also, enabled swift hi-fi prototyping for clear features presentations.


Product Video

Bonus material

I was in charge of designing the visual assets, compiling the storyboard, co-writing the script and seeing the whole project through, ultimately.


from building a core web app from scratch

Internal feedback is essential

When you have a team of talented, multi-disciplinary individuals, you absolutely can and must use their intuition for quick feedback on the building process, whenever it is possible. You will be surprised on how many slips can be avoided, if you incorporate quick, team-internal feedback in your workflow.

Amplifying communication with our own system

Building a scalable design system for the whole product pipeline had a huge impact on how well we communicated with each other. Especially, when it comes to building and shipping features within a constrained time frame.

Transparency boosts morale

Clear goals, defined product vision and honest communication is what can bring a team together. I experienced higher morale, more productivity and better work outcomes, when our team was most coherent and transparent.

Linkedin        Medium        Dribbble        Twitter        Email

Thanos Dimitriou © 2020. All rights reserved.