UI/UX, Branding, Writing
Sep 2020 - May 2022 (1 year 9 months)
Web
When I first joined the team back in 2020 as the team's first full-time UI/UX Designer, Designware's existing "UI guide" had just celebrated its second birthday. It hadn't been updated to account for new product scope requirements or user feedback, and it was time-consuming to work with as it was a document with values to be copied, instead of a proper design system with editable components that we could use directly.
I set out to change this with the Design team with two distinct goals in mind:
- To meet and exceed the competitive baseline in terms of the product experience.
- To create a scalable design system that is easily used, maintained and updated.
As the first thing users see after signing up or logging in, the Dashboard needs to make a great first impression visually as well as have high discoverability of important features like starting a new project or managing existing ones.
.webp)
As we plan to add more features in the Dashboard, such as the ability to invite collaborators and being able to see online team members, we ran into space constraints with the existing compact card design.
From our analytics, we determined that over 95% of users have fewer than six projects, so I gave each project more space to breathe on the grid, as well as giving project options its own space to live in. For the small percentage of our users that use Designware as their professional web and app design tool, we've added sorting features and a "List View" option to show more items at a glance. We're now able to show more important information about each project without clutter, and this also ensures we'll have more surface area per project card for future additions.
The Editor is our bread and butter, and the biggest glaring issue I've identified with the old Editor design is the complexity of our user interface leading to cognitive overload.
This is a tricky issue to solve, as our competitive advantage in the no-code space is ultimate flexibility - the Editor aims to allow users to create both websites and apps with all expected functionalities normally achievable via custom code all on one screen. As different users have different needs for our product, this means we need to simplify the user interface without limiting the scope of our product or excessively burying options that might be important to some users but not others.
I took a two-pronged approach to tackling this problem:
- Adopting atomic design principles to eliminate inconsistencies and redundancies in our UI by building reusable components.
- Using common design patterns for features similar to those in our competitors products in the no-code space.
Following atomic design principles, we've created the Blob System: A way of connecting relevant elements together visually to reduce cognitive overload.
The uniformity in spacing, variable font sizes/colours and inconsistent interactions makes the panel difficult to break down and identify groups of functions at a glance.
By using the Blob System and consolidating redundant interactions, the panel is now able to be parsed quickly and groups of functions are more distinct from each other.
Styling and layouts from the Blob System are extended to other parts of Designware as well, and combined with design patterns familiar to users migrating from other products, serves to unify the user experience and drastically reduce cognitive overload.
At Designware, development and design runs parallel to each other to maximize the speed of iterations, which means the redesign needs to be flexible enough for new additions and changes to existing features. Below are some examples of features that were added during the redesign project using the new design system. Please note that while I contributed to some of the following features, I did not design them by myself. These examples are to demonstrate the design system adapting to features outside of its original scope.
Finally, at the later stages of the redesign project, I revamped our existing icons and created new ones from scratch to reduce reliance on public assets and give our platform its unique, refined style. Below are some of the custom icons and their iterations.
As part of our marketing efforts, I was tasked with creating some sample websites and apps within the Designware Editor to showcase its capabilities. In addition, I also produced some marketing videos and branding materials such as our YouTube thumbnails and blog post cover images.
A showcase project demonstrating Designware's custom code compatibility and also serves as inspiration for users seeking to create unique web experiences using a combination of techniques, with image layering, embedded, animated 3D models and a shimmering starfield background effect achieved via JavaScript.
One of my first projects at the company, I produced a speed build video to showcase the Designware Editor's ready-to-use content templates (most of which were created by me at the time of recording) in a real project.
I played a key role in contributing design leadership content in anticipation of the hard launch of Designware 2.0 (with all of the product design improvements and feature additions over the course of the Product Redesign project).
My contribution was a two-part written series on our approach to user guidance at Designware, including how we handle product errors and how we design our notification systems within the product.
The articles' primary demographic are other product designers with the aim to share our learnings and product design tips. That being said, the articles are written in a way that is approachable and fun to read for a wide range of audiences. You can check out them out here:
