VisualEyes Web App
Imagining the world's first design assistant's web app.
Role
Lead Product Design
Timeline
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.
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
Problem
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
1 Lack of users' familiarity with model
2 Communicating company vision
3 Applying tech to pre-existing designers' workflow
Architecture
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
3 Organize and manage their content
4 Share their results with stakeholders
Sprinting
"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.
Onboarding
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.
Interface
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.
Learnings
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.
Thanos Dimitriou © 2020. All rights reserved.