Built a zero-to-one B2B SaaS product through close collaboration with pilot customers.

Challenge: Entering an Unknown Market

As a startup, our challenge was to launch our first product and find our foothold in a completely new market for us: construction companies. This was a leap into an industry that runs on deep-seated workflows with a healthy skepticism of “magic” software.

My goal was not just to design a product, but to earn the trust of a highly discerning, non-technical user base.

Role: Co-founder and Founding Designer

Being a co-founder and the sole designer for this initiative, I led all design efforts from the initial concept to post-launch evolution.

My responsibilities included:

• Product Strategy & User Research
• End-to-End UX Design
• Post-Launch Improvements

Discovery: Disambiguate Through Pilot Customers

Instead of betting the company on a single assumption, our first step was to lead a parallel discovery process for three distinct product concepts. The key wasn’t just to find an idea, but to find committed pilot customers for it — securing paid contracts before writing a line of code.

This process allowed us to test our hypotheses in the real world. One concept, Agave Sync, emerged as the one with the most urgent, unsolved user problem and the strongest, most willing early adopters.

Most construction companies run on two most important software systems: one for project management and another for accounting, and they have to constantly keep data in sync between them, but it’s a tedious, time-consuming manual process. There were software solutions, but customers found them hard to use.

Foundational Insight: Transparency Over “Magic”

Our research in the existing solutions revealed their critical flaw: they were opaque “black boxes.” Users configure the sync job, let it run, and data comes out. They lacked control and were blind to the process, leading to immense frustration when errors inevitably occurred.

Existing solution:

Wireframe created to capture the core user experience, not a real screenshot.

This led to my foundational design insight: for our users, transparency was way more important than simplicity.

I made the strategic decision to reject the then industry-standard “control panel” and architect the entire product around a familiar, data-table-centric UI. This gave our users the visibility and granular control they needed to build trust in our system. It was a bet on user empowerment over a simplified, “magical” interface.

Agave design:

Process: Validating the Insight Through Deep Collaboration

To bring this vision to life and ensure it met real-world needs, I embedded myself with our first customer. This wasn’t just user research; it was a co-creation process for 8 months, including 7:30am standups each day and two on-site visits.

Every morning, I presented design iterations and got immediate feedback, allowing me to understand and refine every nuanced construction project finance workflow with our engineering team. We deliberately focused on workflow efficiency over aesthetic polish, and using a component library to ensure rapid iteration.

Outcome: User Evangelism and a Scalable Foundation

The result was a product our first customer loved so much, they became our most powerful evangelist. They showcased our product at Autodesk University, the industry’s largest conference, leading to a wave of inbound interest.

This authentic user praise was a direct result of the product’s design: a user-centric foundation that was built to last. The initial data-table architecture proved to be a durable and scalable system that gracefully evolved over time to meet new customer needs.

Product design timeline:

1. The Functional Core (Private Launch)

Focused on core functionality and usability over aesthetics, ensuring we solved the user’s most critical problems first.

2. Public Launch Polish

Updated the component library and refined the visual design to build credibility and trust as we introduced the product to a wider audience.

3. Solving the #1 Usability Issue: Horizontal Scroll

Consolidated many diagnostic and status columns into a single, scannable “Status” column, reducing horizontal scrolling—a major pain point we identified for our Windows users.

4. Systematic Feature Expansion

The strong design foundation supported years of subsequent development—from sync history and notifications to expanded user controls—without requiring a major redesign.

5. Proactive Design: Strengthening Trust

The design foundation provided the necessary affordance to proactively flag data-field-level issues, a feature that further strengthened our customers’ long-term trust.

Ultimately, this approach drove adoption from 0 to 17x growth the next year, to now 350+ customers, became our primary growth engine into the market, and established a key competitive advantage rooted in user trust.

It was a challenge to measure the quality of multimodal experiences that we deliver on Alexa devices. Not every user are staring at the screen when they ask a question on a screen device. The device could be sitting in the corner across the room. Until the recent launch of Visual ID, we have little data there. Also, many visual responses don’t provide touch interactions, so we can’t infer what customers want from their “click through rate”.

Human Annotation

The first solution the team tried to adopt is human annotation. We write a comprehensive guidelines to outline what a good multimodal experience should be, and then we train annotators to grade experiences according to the rubrics. We do it for voice answers, and it has been working for Alexa Knowledge.

There is only one issue: We don’t really know what a good multimodal experience should be.

Voice answer has way fewer variables — if an answer is grammatically and factually correct, has the right length and the right order, and contains all the necessary metadata, it’s pretty much there.

Visual answer doesn’t have such consensus — when people ask “How many people live in Chile?” is it more helpful to show a line graph of the population growth, or is it more helpful to show other relevant attributes for Chile, with a beautiful image? Or both?

Similarly, when people ask “Who is Hugh Jackman?” do they want to just see a beautiful fullscreen image, or do they also value seeing the answer text on the screen?

There is no clear answer. Because of that, getting into human annotation guidelines prematurely would only re-enforce our own convictions and biases. It might not help us to actually improve the quality of experiences for our customers.

User Survey

To help connect the team with the customers and derive multimodal guidelines from user feedback, I worked with UX researchers to design a study where we record hundreds of experiences as-is and send them to thousands of voice assistant users for their rating and reasoning behind.

From there, we then aggregate the scores and use regression model to find which features of the multimodal answer — does it contain an image, does it use a custom layout, etc. contributes the most to customers’ rating. We also use it to identify the flaws in experience designs and make data driven improvements.

We launched the study in the United States, Germany, and Japan. Every time, it lead us to new insights and allow us to continue to dive deeper. Based on those findings, we then wrote the design guidelines for Alexa Knowledge experiences.

Visual Component for Feedback

While user survey gave us a lot of good information and it’s especially good at answering why certain experience has a higher rating than others, it’s quite resource consuming to capture experiences and run the study.

To collect user feedback faster and on a broader scale, we also launched a new visual component that would allow us to target a small percentage of users across the board and get realtime data right before I leave Amazon.

Hopefully it would provide more timely feedback to the team and help us correlate visual quality to other business metrics like engagement and downstream impact.

When Graphiq got acquired by Amazon in May 2017 to help Alexa answer more factual questions, it was right before Amazon launched its first Alexa device with a screen — the original Echo Show device. In addition to the knowledge graph and search technology, the Alexa team was excited about our visualization capability as well. I had a clear task — bring data visualizations to Alexa and deliver information in the most delightful way for our customers.

Sharing the Vision

Alexa was introduced as a voice assistant, and many had not envisioned it having screens back then. That said, visual display is not only delightful but crucial to communicate trend, comparison, and geographic data.

For exmaple, for the question “Alexa, What’s the stock price of Starbucks?” it is difficult to convey the fluctuation in the market with voice, but with visual, the trend is clear.

To help the team understand the potential of visualization and imagine the future together, we put together a commercial-like demo video to show how we can drastically improve many Alexa experiences — from help making purchase decisions to getting sports and stock market updates. It got shared to the top of the leadership in the company, and many of the future we envisioned, has become a reality today.

Further, I did a presentation at Amazon’s annual design conference to walk through the key cases for visual answers, the design challenges, and our solutions.

Crafting and Co-defining Alexa Design System

We joined at an exciting time when the first barebone version of Alexa’s visual style just got shipped and the team is actively imagining what the second generation can look like.

We brainstormed with the central design team at Alexa to co-define a new design language that can afford all the data presentation need we can foresee.

After multiple rounds for exploration and consolidation, we landed on what became the next generation of Alexa Design System, and laid out the ground work for the core visual answer template, including animations and touch interactions.

Continuous Development

We kept developing and improving the multimodal experiences over the years in visual style, range of visualizations offered, and the design of each template by listening into the customers. Here are some notable addition we made afterwards.

Lastly, a bird’s eye view of the landscape of use cases we now cover — templates x devices.

Brutally Useful: Making Great Products with No Design Skills

Designers: If a startup friend asks for design help but you have no bandwidth, share this.

Being a designer for 7+ years, I’m drawn to appealing visuals. I blindly vote for ProductHunt projects with beautiful landing pages. I spend hours saving Dribbble shots that have little practical value.

But, if you ask me if making lovable products with no visual design skills is possible, I’ll reluctantly concede. As much as I’d love to say good visual design is essential, it’s not.

Take these two tweets:

Zoom is worth 48 billion and these are its icons. pic.twitter.com/SdJdahcFfG

— Seth Coelen (@SethCoolen) August 28, 2020

CraigsList and Hacker News are incredibly ugly, even though they’re two of the best websites in the world.

There’s a lesson in there. pic.twitter.com/3p9d6J5wH9

— David Perell (@david_perell) June 24, 2020

And the lesson is you don’t need good visual design skills to create a useful product. You can have a great product by just being brutally useful.

In addition to Zoom, CraigsList, and Hacker News, recall Google’s early days…

Google, first official home page (September 1998)

It’s just brutally useful. It does one thing well.

Brutal usefulness cuts through noise. Costco’s bare-bone decor has nothing to do with visual appeal. Costco cares most about ensuring customers know where things are and how much they cost. Anything else is extraneous - it just adds cost to their intentionally low prices.

Amazon Fulfillment centers are similar. At first, they seem like pure chaos and clutter. Painfully bright lights, flashing sirens, whirring conveyor belts, and absurd, 100-foot ceiling fans. But after thirty seconds, you realize every one of these eyesores serves a purpose: routing products from sellers to buyers with ruthless efficiency (more on that). Not beautiful, but brutally useful.

So what does this mean for your own products? 4 suggestions when you don’t have a designer.

1. Talk to Customers

What’s better than any one designer is direct feedback from the customers. Not feedback on whether they think the design is “good”, but if they instantly get what the product does and how it works. Ask them if they’re willing to pay for it. Ask how you can make it even more valuable. Listen carefully, and ask thoughtful follow-ups.

It’s that simple. And you don’t need many. Test with 5 users and iterate.

Customer feedback not only helps identify product enhancements, but more importantly nurtures your user experience and design thinking skills. And this is a feedback loop worth preserving even when you have a designer, or a team of designers. It keeps designer egos in check and prevents us from doing things that looks good but hurts customer experience.

2. Steal

Next, ~steal~ learn from similar products. Not sure how to manage user preferences? Don’t know the ways to encourage sharing? Can’t decide if you should put filters upfront or behind an icon? Look at what competitors are doing. Analyze what are shared patterns and what are unique about them. If most your comparable products use the same design, there’s probably a reason for that. At the very least, following common patterns can save you some user education cost.

What if you are making something groundbreaking and there’s no direct competitors to steal from? We actually rarely invent things out of thin air. More often than not, you are trying to be the “Uber of X” or the “Netflix for Y”, and you can always learn fro Uber, Netflix, and the industry you are trying to enter.

3. Exhaust All Options

Now, there will always be cases where you can’t get clear signals, maybe your references contradict with each other or you read some articles and wonder if they apply to your use cases. When in doubt, enumerate all the possible ways you can present a feature and get user feedback on them all. Since you have direct user feedback as your measuring stick, it’s possible to brute-force through all the options and make quick decisions.

Most of the time, you might find that it doesn’t matter which option you go with. Knowing that definitively, helps you pick the easiest implementation and save cost. In the cases that it actually makes a difference, bank on it.

4. Leave Visual Design Alone

After testing and making your product work properly, leave visual design alone. If you don’t have a designer, chances are your product isn’t really about brilliant visual design.

It makes me sad, but it’s okay! Just remember this one rule in the design: Less is more.

If you don’t want to invest in visual design then don’t do it. Use iOS’s default UI elements, use Bootstrap or Foundation. Pay for a theme if you want, and then resist the urge to change anything about it.

If black, white, and the default theme color is too boring, fine, you can pick one brand / theme color that gets a 4.5:1 contrast ratio against white if you feature a light theme, black for dark theme. Use only that color and grays, and use the color sparingly – reserve it to your call to action buttons and links for the most part.

Leave the rest to a professional designer. (Read: no more than 2 typefaces, no changing font sizes as you see fit, no 4-5 different colors on a single page, no random neon cats running across the screen. NO.)

Generated at imgflip.com, another great example of brutally useful things :)

If you don’t know what you’re doing, visual “improvements” can quickly devolve into clutter and end up hurting the end-user experience.

That’s it! Build a feedback loop by talking to customers, learning from similar products, testing all options, and leaving visual design alone. That will free you to focus on what you do best – provide value to your customer. You can do it without being blocked by visual design.

Now, keep in mind that building a good product is always a multidimensional equation. If your product is essential like Zoom in a pandemic, don’t worry about the style of your icons. Ship it first.

Otherwise, you might need all the help you can get to differentiate your product. This is where visual design really adds value. The quality of visual design communicates the quality of your product and builds trust with customers. Good visual design differentiates your brand and reduces marketing cost. That’s the business case for visual design – not a beautiful façade, but adding value and saving money.

Good luck creating something brutally useful!

From March to May 2017, I picked up 3D modeling skills. I started with zero 3D experience (couldn’t even play 3D games well), and I’m now able to create almost everything I want in the low poly style. My models also won an honorable mention and a staff pick on Sketchfab.

I want to share this journey and my methodology—I’m pretty good at picking up new skills. I learned watercolor sketch in about 5 weeks, and I won two prizes at the 2018 Creating Reality Hackathon right after finishing the VR nanodegree program at Unity.

This post will focus on 3D modeling, but these principles can really be applied to learning any new skill.

1. Regular, Incremental, Deliberate Practice in Public

From my experiences, the first thing to do before getting started on a new skill is to setup a forcing function. A regular practice you can stick to. I find weekly to be manageable and also frequent enough. You can do daily or twice per week if it’s something small and you can afford it. I tend to think weekly is the minimum necessary to make it a part of your life’s rhythm.

Next, to actually force you to stick to it, make it public. I shared my work on both Sketchfab and Dribbble, but you don’t have to use public communities. The key is really that it isn’t private. You can post your work to a group of friends. Some online courses come with homework. That’s great, too. Grab every resource to fight your tendency for procrastination and build momentum. Finally, don’t make it intimidating. Limit the scope as much as you can. Focus on baby steps and publishing your work rather than making it perfect.

I chose to recreate one room I like in 3D every week. I decided to work from photos, so I don’t spend any time designing those rooms. (I can spend countless hours designing rooms in The Sims. It’s a trap!) Limiting the scope to rooms also ensured that I would focus on still-life, everyday objects, but kept the door open, so that if I want to put a cat in one of those rooms, I can.

Then, instead of learning the tool of trade, Blender, right away, I started really light, with MagicaVoxel.

This idea came from my fascination with pixel art. Growing up, I wasn’t good at drawing, but I found that pixel art drastically limited the decisions I needed to make, and that made it easy for me. Instead of thinking about where to put a stroke on an entire blank canvas, I just needed to decide where to put it in a 16x16 grid.

I found the same thing with voxel art. Instead of learning how to use the rich feature set in Blender, I only needed to know about 6 buttons to get started.

Here’s room 01:

It looks half-decent, thanks to MagicaVoxel’s good out-of-the-box rendering functions, but it’s really just blocks and colors in a 32x32x32 space, nothing fancy. If I had chosen to start with Blender, I would have needed to spend hours familiarizing myself with all the hotkeys, as well as spend a lot of time on lighting and rendering.

I stuck with MagicaVoxel all the way until week 07. That’s half of the time I spent on this project. Limiting the scope really helped me to make quick incremental progress every week. You can click on each image to check out the models and the reference photos.

Week 02: Complex shapes

Week 03: Stop-frame animation

Week 04: Tripling the space

Week 05: Adding lights

Week 06: Improve light rendering

Week 07: Putting everything together

That’s how a narrow focus can help you grow quickly. By the way, I also won SketchFab’s honorable mention and staff pick without knowing a thing about Blender between week 06 and 07.

My Blender learning curve was similar. It felt like I was relearning everything for a few weeks, but by that point, I already had a decent grasp of how to navigate the 3D world and could focus on learning the interface and the features.

2. Follow One High Quality Course

As I switched to Blender, the learning curve got steeper. I couldn’t just push random buttons with hopes that I’d just figure it out. At that point, I knew I needed to find one high quality course that I could follow.

You don’t want multiple sources, because they might overlap, and might even have contradicting point of views. Pick a single, high-quality source. Paying for it isn’t bad either. A good course is always a worthy investment. And that sunk cost can be your motivation—it surely was for me.

I always try to find a step-by-step guide that I can follow along with. However, I know a programmer who can just read through 3 textbooks on C# and learn how to code in it. Choose your preferred format but choose one guide and stick to it.

I spent some time looking and settled with the Complete Blender Creator: Learn 3D Modelling for Beginners course on Udemy (not affiliated). It has the highest example-to-content ratio, and I saw how I could follow one example each week and incorporate it into my weekly rooms. I got a steal on sale and bought it for just $15. Here’s my learning curve from week 08 to 14:

Week 08: Learning Interface

Week 09: Simple Shapes

Week 10: More Complex Shapes

I was relying on Sketchfab’s rendering because I haven’t learnt how to do it in Blender yet. I also bent the idea of the “room” to fit the Udemy course content (“Bowling balls and Pins” and “Low Poly Chess Set”). I consider them not too far-fetched. Ron and Harry played life-size Wizard’s Chess in a room after all.

At that point, the course went into animation. That looked like a lot. I stopped there and practiced with what I’d learned. The progression was similar to the MagicaVoxel rooms, but now in Blender with more varying shapes:

Week 11: Back to Reference

Week 12: Intricate shapes

Week 13: Organic Shapes

Week 14: Everything put together

At that point, I felt confident that I could create a low-poly model of almost anything I want in Blender.

3. Cultivate 3D Sense at Every Opportunity

Another important piece of this journey was cultivating my 3D imagination at every opportunity, because I had none at the beginning.

My ability to understand and imagine things in 3D was so bad that I sucked at 3D games for my entire life. It was embarrassing when my friends urged me to try World of Warcraft. 75% of the time I was asking “Where am I?” “Where are we going?” “Wait, where are the enemies coming from?” and “No…” because I died again. The other 25%? I was just spacebar following someone. At least that was easy :) As a UX designer, I can easily see 2D designs in my head before I put down the pixels. Not being able to do the same in 3D was frustrating.

So, what did I do? Deliberate practice, but in fun ways.

The first thing I picked up is Minecraft. It’s a 3D game in its simplest format. Exploring caves and abandoned mine shafts, finding my way in roofed forests and ravines, I slowly grew from having to constantly cheat and check coordinates to having an idea about where I was going in winding tunnels.

Source: Official Minecraft Wiki

The other thing I did was signing up for a pottery class at my local community college. Physically holding clay in my hands and doing 3D modeling in real world gave me a fresh perspective, and the relatively slow pace gave me time to think.

I now have a way better ability to see objects in 3D in my mind. And interestingly, it also helped my drawing—I had little real training and used to struggle with perspective a lot, but now that I’m better at imagining objects in 3D and turning them around in my mind, it really helps.

4. Enter Competitions

Now the last point, the secret ingredient: enter competitions.

We all need motivation to keep us going, and competition provides a clear objective, a clear timeline, and an opportunity to put our skills to the test. It’s especially fun to join as a newbie since you’ve got nothing to lose; and if by sheer chance you win something, that’s great external validation. Even if you lose, you will still have some really polished pieces, probably the best work you can do at the time.

I joined three Sketchfab competitions as I was learning 3D modeling.

My Ideal Planet (Voxel)

The first competition I entered was around week 06. I was lucky that a voxel challenge dropped while I was deep in MagicaVoxel.

The brief was about creating one’s ideal planet in voxel, and that immediately led me to thinking about how the little prince traveled to many planets. What’s the most ideal planet? Definitely the scenario in which he returns to his planet, with the little sheep in the box. The sunset planet was the only competition, but that would be relying on a sunset backdrop to work, not the modeling itself.

So I started, day and night, tackling a way larger canvas than I ever had before. To make the composition more interesting, I put the little prince at a diagonal angle, and that took a lot of trial and error. The little prince and his little sheep were the only two living characters I’ve ever modeled. I also picked up more MagicaVoxel to Sketchfab exporting skills along the way.

Although there are a lot of imperfections (my biggest regret is I put the volcano in the dead center of the orb, which makes it too uptight), my hard work paid off, and it got both an honorable mention and a staff’s pick!

Utopia (Low-poly)

The second challenge dropped around week 13. It was about creating futuristic utopian assets under 2k triangles, which was perfect for my skill level. I wouldn’t have a chance in many Sketchfab challenges. Having a limit on the number of triangles leveled the playing field a bit for me.

I took the opportunity to learn simple animation in Blender, and again, just so I’d have a slightly better chance at winning, I spent more time on lighting and rendering in those challenges than in my weekly room practices.

Here’s the final rendering:

It didn’t win me anything, unfortunately, but that’s expected. Even without any prize, it’s a very nice piece that I created towards the end of my journey, and I adore the end result.

Medieval Fantasy Asset Pack (Low Poly)

The last challenge, and the real proof of how far I’ve got in 14 weeks’ time, was the medieval game assets challenge. This is a highly competitive challenge, with far higher prizes (10x monetary value) than Sketchfab’s typtical challenge. I know I had basically no chance to win (take a look at the winning projects—I really had zero chance), but it was such a great concept.

I am a huge fan of Dungeons & Dragons, and I was scoping out my capstone project for my VR nanodegree at Udacity at the time. I saw the opportunity to morph the two projects into one and create the assets for a medieval-themed room escape game.

What’s more, it just so happens that the Udemy course I bought has an entire chapter on game asset packs. It’s like I kindled 3D-modeling-related things here and there, and they all led to this serendipity.

So I got to work. From modeling each component, to setting up a grid system so both external walls and roofs as well as internal decors and furniture were modular (my knowledge of design systems also played a role here), and then on to cycle rendering and baking lights… It’s amazing how much I learned just to do well in one challenge.

Beautiful rendering, lights, shadows, and textures. Definitely the best work I could have produced with my skill set.

That’s not all: because I spent the time and made everything modular, I don’t just have this one room. I have components that would allow me to make many medieval rooms:

I put it in a repo so anyone who wants to create medieval rooms can make use them.

As planned, it also became the asset pack for my capstone project for the nanodegree program.

5. Make Many Pots

In Art & Fear there’s a famous story: At the beginning of a pottery class, the teacher told one group of students to focus on quantity and try to make many pots; and the other to focus on quality, making the one best pot. At the end of the semester, the group that made many pots won with a landslide—with the many pots that they made, they inevitably landed on a few great ones that are even better than the pots made by the group fully focusing on quality.

Looking back to all my works at the end of my 3D learning journey, it’s the same story. When I made each of my weekly rooms, I was never really focused on quality. But 2 out of the 14 rooms that I made, room 04 and 12, ended up being great. They both got more likes than the Little Prince planet that has won honorable mention and staff’s pick.

They look awesome by any standard. I couldn’t have planned for it. Nor can I spend some time today and create another one of the same level of quality. But I do know if I go back to it and make another 14 rooms, chances are good that I will get another great one.

This is how I learnt to create 3D models and many other things: practice deliberate and regularly, follow one high quality source, cease every opportunity, enter competitions, and finally, make many pots.

Photo by Dillon Mangum on Unsplash

OpenAI’s launch of GPT-3 was a wake-up call: AIs are evolving quickly, and the stories about AI surpassing human intelligence like a bullet train seem not-so-fictional these days.

Tobias van Schneider wrote in his recent article “UX designers automated by AI? When will it happen?”:

“The majority of work that is put out these days is mediocre at best…The majority of apps you see these days work pretty much like any other app…Both UX and UI designers have been working hard to standardize not only patterns and systems, but also libraries and guidelines. In a way, we’ve been automating ourselves out of our jobs for the last couple years already.”

Being a system-thinker designing for the past 6 years, I’m definitely in the same boat — I focus on creating design primitives that others can leverage and use like LEGO bricks.

On the one hand, it allows me to do the work that I find more interesting, thinking through how different types of data should be presented rather than spending lots of time on each individual dataset. At the same time, more and more of the field seems to have matured over the years, and there are times that I feel there’s not much more to design.

It’s daunting, but through a different lens, it’s actually a great collective win that we achieved as designers.

When human beings first got introduced to this world of machines, it was like entering Westworld. Engineers started to create file systems, applications, and functions before there was even a graphical interface, and when we finally got that interface, there were mountains of new ideas to visualize in a way that a broader audience understands — how do you present the idea of a file system that is not made of paper and ink but electrons? How do you convey to the user which elements on the screen they can interact with and how should they do that?

Over time, with many skillful designers, we’ve established the Human Interface Guidelines — the commonality of clicks, buttons, and even the icon with three horizontal lines now apparently means “menu” to everyone.

When we live in a world like this, trying to challenge the established, educated user pattern is counter-productive. Remember how many times we’ve tried to replace the very anti-ergonomic QWERTY keyboard layout but failed?

So instead, it’s indeed the design work that needs to be changed. Think about chairs — Every chair looks pretty much like any other chair, in same way that every app looks pretty much like any other app. But there are still many people who design chairs, and there are many brilliant chair designs.

Source: https://www.alegredesign.es/works/ego-byv-chair/

While there are designs that challenge the definition of chair, sometimes it’s also about admitting what a chair is and moving on. The human body looks like this and likely will not change in another thousand years, so the chair has to be about knee height, with a flat surface and support for body weight. Good chairs have back support because we are lazy and want to lean back.

Similarly, a digital button should have a large enough area to be a point-target (for a cursor or finger) and should have a label or symbol to state its purpose (good buttons often have both).

Everything else, you get to design — the color, the font choice, solid vs. hollow, etc. But the core pattern is established.

It turns out there are many established product concepts in the world: chairs, doors, water bottles, hammers, cars, houses, the list goes on and on. Much of the design derives from the design of the human body itself: our hands are designed this way, so all our tools have to conform to that. In the same vein, the design of our mouth, eyes, and body all determine how products should work for us.

Those product concepts are so classic and eternal that they remind me of what philosophers like Plato would call “archetypes” — the ideas that seems to exist prior to any human experience.

The design of those concepts may feel more like discovered than invented. It’s designers’ share of uncovering the truth of the world.

Photo by Orsolya Vékony on Unsplash

However, when we entered this digital era, we started to lose the constraints and the guidance that both came from our physical being.

The interface hardware still follows some constraints. A mouse is designed to fit the palm, and although phone makers constantly push for larger screens, there is a limit.

Source: https://9gag.com/gag/5349639

But you already start to see the constraints loosening. Take the keyboard, for example. The general design is based on the size and shape of the hand, but the location of each key is arbitrary. That allows the QWERTY vs. Dvorak conversation to happen in the first place.

When we get to entire software interfaces, it’s a free-for-all. I dream about the early days in the Human-Computer Interaction field, the time before “windows” (not the company but the UI element), “status bars” and “docks” were introduced. It was a blank canvas.

There were definitely principles and measuring sticks for good vs. bad design: the reference of real-world objects, the resemblance of how the underlying system works, etc. But I don’t believe we would have the same design for docks and windows or even the concepts of them in a parallel universe; while as long as human beings look the same, I’m pretty sure we will all have very similar chairs and bowls.

We lived in a rare era during the digital revolution, where we had a blank canvas laid out in front of us and lots of interaction models were yet to be defined.

Now that everything in the digital world is maturing, we’ve started to have new constraints in our designs. Not in the form of physical limitations, but in the form of education costs. Surely, we can come up with a better design for the menu button, and no one likes the hamburger, but is that still worth it at this point?

As the educational cost and familiarity build moats for existing design patterns, an app design may look increasingly like a chair design. There is still a need for chair designers, but they might be a different type of designers than the current UX designers for digital products.

There’s a reason why we are seeing more stylistic trends in the UX design world, like the pendulum swing between skeuomorphism and minimalism in Apple’s design language.

Source: https://uxdesign.cc/no-apple-is-not-moving-towards-neumorphism-3c144d74c53b

UX design as we know it might become a thing of past, and it may look like industrial design or fashion design in the future. There will still be places for human taste and judgement to shine — and that’s the kind of value that AI would struggle to replace. But if you are into UX design in its current form, I can only see a few blue oceans in the HCI field.

Mixed reality seems to be one of them, but even mixed reality incorporates ideas like pointers from the existing digital design to save on education cost. And some VR designs are literally spaces of floating panels.

How humans interact with AI is maybe the next true blank canvas. Elon Musk’s other investment, Neuralink, might open the door to a new world. However, I can’t even begin to wrap my mind around what a brain-computer interface would be like. I guess it’s the same way a chair designer would feel at the dawn of the computer age.

First posted at design.blog

Tailoring design for one dataset is easy — designing a system that works for all datasets is much more difficult. As we enter this era of big data, we face a critical challenge: how do we create more robust, scalable designs that can adapt to different content inputs and edge cases?

That’s exactly the kind of system that we’ve been building at Graphiq — a system that powers more than 10 billion embeddable visualizations on 700 topics, generating more than 300 million impressions per month on the websites of some of the world’s largest publishers.

Here are a few things we learned in the past three years creating and perfecting our system:

A. Understand the Data Span and Use Cases

When thinking about design systems, it’s natural to start by thinking about the UI kits, pattern libraries, and brand guidelines that we see all the time. Similarly, it’s very easy to jump into designing for each element — color palette, bar chart, button, and more. There are even tutorials and templates designed specifically for this purpose.

If you are designing a resources package without any defined use case, that’s surely the way to go. But if you’re creating a design system with a given purpose, it’s good to understand the scope of data and use cases to better focus your resources.

At Graphiq, we need a design system that is able to host all content and chart types, but realistically, 70% of our visualizations are bar charts, line charts, or area charts. It makes sense for us to focus our energy on those more prevalent chart types, rather than evenly distribute our efforts across all chart types.

Similarly, we want to be able to display all attribute labels, no matter how long or short they are, but knowing that most of those labels are between 15 and 30 characters definitely helps.

In general, the popularity of all use cases in a design system would fall on a curve like this:

Once you have an idea of the distribution, then it’s easy to focus your resources to design for common use cases, take care of edge cases, and then deal with the outliers.

B. Design for Common Cases

Designing for common cases should be relatively easy — you could even treat them as Dribbble shots — just make the best possible version of each use case. We found it more useful to start with those ideal designs than to start with common elements because the system should serve the users, not the other way around.

Once we have a good collection of design for those popular use cases, we then organize them to become the core of our design system.

C. Take Care of Edge Cases

After crafting the system around common cases, we can move on to the edge cases. A few typical edge cases we encounter over and over again are:

1. Missing Data: Communicate the issue instead of showing a blank space.

2. Too Many Data Series: Automatically group them into “others”.

3. Verbose Labels: Cut down text and add ellipsis.

4. Elements Overlap: Avoid putting elements in places that could cover important information.

Instead of shipping a design system that assumes perfect data and requires you to continually fix data issues, we can make our system more flexible by adding graceful fallbacks for those edge cases. The design of those don’t have to be as perfect as the more popular ones, but the system should not break down in such scenarios.

D. Allow Human Overrides

Lastly, there are outliers — the very rare cases that are both hard to foresee and expensive to target at a system level, like this one:

Our logic of handling long labels broke here because all the Harry Potter book and movie titles start with “Harry Potter and the…”

To make the system more robust and avoid running around and adding new features, it’s a good idea to allow human overrides for those outliers first:

It could be risky in the sense that not all people making such overrides are designers. But imagine a system that generates thousands of visualizations per day created by 50 different people, allowing overrides is a good way to allow the business grow as fast as possible.

These are the lessons we’ve learned so far, and we’re looking forward to hearing from you about your thoughts and experiences on this subject. If you have anything to share, definitely reach out to me at @moyicat.

This photo is retouched with Photoshop to hide some imperfect details.

Making the Air Bonsai

After spending hundreds of dollars on Kickstarter, I finally got tired of it. It’s not that Kickstarter projects come with premium prices — innovation comes at a price and I understand that. It’s the wait time that I cannot stand.

I spent a year waiting for my Emotiv Insight, half a year for Bison Bag, and four months for The FreedMan Chair, which actually broke down in four months. Finally, I decided to start hacking some of those products myself — not aiming to make perfect products or be a copycat and compete, but to make quick working prototypes so I don’t end up biting my nails while anxiously waiting for my expensive toys to arrive.

The first product I made was basic version of the Air Bonsai. I was absolutely in awe when I first saw Air Bonsai — it’s like the essence of Zen, Bonsai, and Japanese culture. A bonsai floating in the air, on top of nothing but emptiness. That’s simply mind blowing.

It’s the perfect kind of project I can hack — the concept is simple and the end result could be quite stunning if executed well.

The Plan

After consulting several friends on physics and hardware, I decided not to build the magnetic field from scratch. Instead, I bought a cheap one on Amazon.

The plan is just to take the magnetic field generator out of it’s original container and place it in a bowl, take the floating disk and place it in a moss ball, and then just combine the two parts.

• Yosoo Levitation Ion Revolution Platform — $54

• Moss Balls, Fresh Green, 2.5” (3 pack) — $6

• Hot Glue Gun with 12–4-Inch All Purpose Glue Sticks Kit — $8

• White bowl (or any bowl you’d like to use)

• Exacto knife

• Skew driver

The Process

So on a nice Saturday morning, with some coffee and chocolate croissants, Yisi — my dear friend and collaborator in many creative projects — and I got to work.

Taking the elevation platform apart was simple enough with the skew driver.

We took the packaging foam that came with the platform and used that as a container to hold the middle layer. It was actually a very good fit and provided nice support. We also cut a notch in the wall of the foam box for the wire.

To make sure we didn’t break anything in the process, we did a quick test to make sure that the disk floats:

After that, we moved on to making the moss ball. Our original plan was just to cut a moss ball in half and stick it back with a hot glue gun. But the ball was very lose by itself and kept breaking apart, so it ended up being quite a messy job with loads of glue to keep things in tact.

We started off with a round moss ball, and shaved it down bit by bit to leave as much room as possible at the bottom to maximize the elevation effect. Again, a lot of messy work but it ended up looking quite decent.

Yisi is the girl holding the camera btw :)

The last step was just to find a large enough bowl and shave the foam down for a nice fit, and we have a basic Air Bonsai base right there:

Room for Improvements

Admittedly, this is just a proof of concept. Like I mentioned in the beginning, the motivation behind this is not to make a perfect product like the actual Air Bonsai, but to show how easy we can hack together a cool project. If you want the perfect version, definitely check out their page.

So a few potential improvements that I can think of:

1. Find a better and prettier container, ideally with a hole at the bottom and move the wire there. In the current model, the wire actually hangs from the side.

2. Place some plants onto the moss ball so it’s not just a base.

3. Shave the foam a little bit better. As you can see, it still overflowing a little bit over the bowl. Again, I Photoshop-ed it away in the title image, in case you didn’t realize. If you are making it at home, you can easily fix this with some scissors and sandpaper.

There you have it, a quick DIY of an insanely beautiful product. Yisi and I completed it in around three hours. If you end up giving it a try, definite post it and @ me on Twitter. I’d LOVE to see it.