The latest technology and digital news on the web

Insightful takes on ascent your business

10 UX acquaint I abstruse architecture my artefact from scratch

Built In
Story by
Built In

This commodity was originally appear by Built In.

In 2016, I acclimatized that I wasnt accomplishing my goals, acquirements new skills, affair new people, accepting in shape, or absorption on my mental health not because I wasnt motivated, but because I wasnt tracking it. Peter Drucker said “what gets abstinent gets managed.” This maxim became the cornerstone that I used to transform my life. With that quote in mind, I absitively to outline my goals and then break them down into simple habits that I could accomplish in bite-sized amounts daily.

A breakdown of goals to accomplish
Confetti. | Image: Danny Sapio

 I began tracking my learning, fitness, and mental health with a piece of grid paper and the days of the week. I tracked my habits religiously for years and saw my life incrementally transform into one where I no longer saw the goals I wanted to accomplish as unobtainable. I saw every cold as commodity that I could accomplish by blockage constant and chipping away at it day by day.

An image from the author's Chrome addendum artefact
Confetti. | Image: Danny Sapio

After years of tracking my habits on paper because I couldn’t find a artefact that met my needs, my co-founder Wilson and I bound to advancement my habit tracking. We built a free web app and Chrome addendum called Armament — a bright daily habit tracker that launches armament for every achievement to bless your daily accomplishments.

In my four-plus years of artefact design, this is the first artefact I’ve advised from start to finish absolutely on my own, which taught me a lot. In this article, I’ll be administration those insights, UI & UX lessons, and things I wish I’d done differently.

A clear apery the author's wishlist for the artefact
Confetti. | Image: Danny Sapio

1. Define appearance for launch

At the outset, my co-founder and I had a rough ancestor that I advised for the three main screens. We didn’t have the anticipation to anticipate all the ideas and revisions that would morph the administration of our artefact though.

We eventually took a step back and absitively that we needed a launch date and a core set of appearance for our MVP. We created a board on Notion and started managing what appearance were and which ones were For example, sign in, sign up, and onboarding were must-have features. We decided, however, that re-ordering habits was a nice-to-have.

We acclimatized on these appearance based on what we believed would make the artefact fully activity and easy to use. By prioritizing a core set of appearance and ambience a launch date, we alleviated ourselves from distractions and acceptable afflicted with aggressive features. This also gave us an allurement to build appearance first so we could tackle the

The flows and states the author navigated to build the artefact
Confetti. | Image: Danny Sapio

2. There are a lot of flows and states

When designing this product, I was frequently reminded that every edge case needed to be solved, and every hole needed to be filled to complete the experience. Architecture a artefact from the ground up was a acrid sword: envisioning the entire artefact with my own acuteness was thrilling, but I was often operating alfresco my abundance zone.

I’m acclimatized to alive on absolute articles in my accepted role at the artefact design agency Skookum. I about work within the constraints of an absolute product, which has its own unique set of challenges. Usually, though, I dont have to create aggregate from scratch. Generally, I’d be alive on a artefact that already has a design system, acclimatized design language, assorted components, UI states, and so on. After this infrastructure, I frequently had to annual for several edge cases, flows, and states that a user may appointment in our product.

The signup flow, for example, had default, disabled, active, filled, error, and hover states. In accession to sign up, I also needed a acquaintance with agnate UI states and six screens:

  • Enter email
  • Reset email sent
  • Email notification design
  • Enter new password
  • Error
  • Success

All of this got ambagious very fast, which leads me to my next point….

A flow chart that maps out the UX model
Confetti. | Image: Danny Sapio

3. Make a user flow

I bound encountered an authoritative problem. Because I created this artefact in my free time, I made the aberration of apathy to follow my acceptable approach, which led to problems down the road.

My accepted workflow about starts with a user flow to define the altered paths a user could take and outline the all-important screens. I alone that access initially because I made the incorrect acceptance that this would be a very simple artefact with only a few screens. As I started designing the abundant states and screens, however, the user flow became chaotic, and I had adversity pinpointing the holes in the experience.

I eventually chock-full blame the can down the road and created a user flow in Whimsical. This acclimatized me to analyze which screens were missing and where accession would go when they clicked assertive options.

It’s easy to forget how all the states and screens fit calm and how one state impacts another. I found solace when I organized my screens in a user flow diagram and could visually see the missing screens and states. Creating a user flow was analytical to advancement the anatomy and alignment of the artefact as it grew.

Image for post

4. Interactions should inform UI

It’s true that you shouldn’t start adding action to your activity until you’ve completed the UI design. But absolutely adding action or micro-interactions and planning how elements will be afflicted by action is not the same. Considering the animation, motion, or micro-interactions while designing the UI saved me from accidental adjustments to the interface when interactions were included later in my process.

For example, when I advised the “Mark Complete” acquaintance for commutual a habit (as seen above), that acquaintance needed to be advised with UI and alternation accounted for simultaneously. To do this, I advised the UI to my liking then abject it to a corner of my design file and began messing with how the elements would collaborate when clicked. The interactions forced me to tweak parts of my UI design which saved me from a cephalalgia that I would’ve had to abode later in the process.

I anticipation it was important to annual for UI and interactions in tandem because their access on each other was acute to creating the acquaintance that I envisioned. If I’d advised the UI and then later absitively how the elements would be animated, the whole thing would’ve become a ambagious mess. By doing alternation and UI design side by side, I was able to create interactions that fit nicely into my interface.

A acknowledgment scale
Confetti. | Image: Danny Sapio

5. Get acknowledgment early

This was accession aberration I made: cat-and-mouse too long to get feedback.

I worked on this activity on nights and weekends and didn’t really tell anyone about it. It was a hobby activity that I planned to unveil eventually.

When I assuredly got fresh eyes on the artefact from family, friends, users, and bearding internet people (shout out to r/UI_Design), they noticed abundantly accessible things that I’d become blind to. I accomplished that I easily became absorbed in abandoned parts of the experience, so I occasionally missed bigger-picture problems.

In retrospect, I wish I had shown the designs and ancestor to people sooner because their acknowledgment added extra time to development later down the line as we adapted issues that accompany and users found.

Image for post

6. Being aggressive is OK

Designers often think that all their ideas must be original, or they’re a fraud. Imagine that you’re attractive at accession product. You find a color palette that you like, an alternation that feels just right, or a pixel absolute layout for a landing page. You might be tempted to think, “Well, too bad because someone’s already beaten me to it.”

That mindset is abundantly flawed and attached to creativity though.

Occasionally, when I was stuck on a missing piece of the design, I would browse the internet for inspiration. I empiric how other companies had advised their onboarding flow or how they managed user profiles. I never copied the entire experience, but every so often I would find myself affectionate little capacity that I would then accommodate in my own designs.

My admired archetype is the alternating exit effect that we use in our modals. I found a affection like this on a random website and anticipation it looked unique, so we absitively to add it to Confetti. I also did this for our landing page’s button hover effect and the book that we used for the site.

The truth is, aggregate is a remix. That doesn’t mean you should be blindly artful other people’s work, but don’t be afraid to find bits and pieces that you acknowledge and work them into your own projects: a cocktail, if you will.

The assorted hats the author wore during his activity
Confetti. | Image: Danny Sapio

7. Wear your hats well

As we were designing the artefact from scratch, my co-founder and I were appropriate to wear a lot of hats. I had to be the UI, UX, interaction, motion, graphic, and business designer, as well as taking on all the other roles appropriate to manage and launch the product.

With so many responsibilities, I appropriately ran into aspects of the design that I didn’t have the skills or time to focus on. In these scenarios, I had to admit I was out of my depth and seek alfresco assets to do the job.

For example, accession artist created most of the illustrations, and the iconography is also the work of accession designer. I see no issue with absorption on what I’m good at and using assets or hiring alfresco help to finish the job. Ultimately, I would prefer the artefact to look and work well than to have inconsistencies because my ego has gotten in the way.

Don’t get me wrong: I used designing this app as a acquirements befalling and frequently stepped alfresco of my abundance zone — but some parts of the acquaintance I didn’t want to amplitude too far.

8. Simpler is better

Although having a authentic MVP and launch date prevented our scope from being afflicted with aggressive features, it didn’t guard adjoin conscientious clarification to the appearance we did have.

There’s a Reid Hoffman quote that people like to share: “If you’re not ashamed by the first adaptation of your product, then you’ve launched too late.” We didn’t think we needed to be ashamed to launch our product, but we absitively that having a simplified adaptation was far better than spending months developing aggressive features.

To launch our product, we had to contemplate two questions:

  • Do we accept what we’ve built provides value to the user?
  • Is what we’re aircraft our best effort?

These questions acclimatized us to stay accumbent with our goal and launch date while alienated distractions. By absorption on carrying value and giving our best effort to what we deliver, we were able to ship a high-quality artefact after overloading our scope with features. We had to strive for accomplishment but be annoyed with great.

A visual representation of the Zeplin action
Confetti. | Image: Danny Sapio

9. A good handoff saves time and headache

One thing that I did right from the alpha was managing and acclimation design assets for development. I can’t take too much credit, though, since I used Zeplin, which made handing off designs and assets to my cofounder effortless. Zeplin ensured I wasn’t crumbling time redlining the designs with specs, measurements, and style guides.

Some steps I took to ensure a clean handoff:

  • Organize all screens into sections in Zeplin and same accordingly.
  • Name all artboards appropriately.
  • Mark assets for export in XD.
  • Keep an annal of old screens and ensure all new screens are up to date.

The product's UX copy
Confetti. | Image: Danny Sapio

10. Write All the UX Copy at Once

The copy for our artefact was all accounting ad hoc while I advised the UI, which resulted in annoying chaos and inconsistencies in our messages.

I wish I had created a certificate where I wrote all of the alerts, messages, modals, and explainer text in one go. Since I bound created letters in my UI design while I was working, the copy in our artefact lacks quite a bit.

This all-embracing lack of accord in our copy led to mixed tones throughout the artefact and little consistency. We have been doing patch-work on the copy since launch.


I accept that our artefact would not have accomplished its full abeyant had we not addressed mistakes early or able in beforehand to avoid problems down the road. As Giacomo Casanova once said, “One who makes no mistakes makes annihilation at all.” I hope you’ll learn from my acquaint and avoid my pitfalls in your next design project.

Appear September 14, 2020 — 11:00 UTC

Hottest related news

No articles found on this category.
No articles found on this category.