A breakdown of how to create delightful designs.
How do I get started?
‘I’d rather my users be bored than confused’.
Design briefs are brought to us as a confusing puzzle, waiting to be solved. Our first responsibility as Designers is to eliminate points of stress, ambiguity, and confusion in the flow. Your recommended design should be easy to use and informative, whilst addressing the overarching problem you’re tackling. First, focus your efforts on enhancing the product’s usability and designing value-based features that help your users solve the problem, rather than trying to come up with the next groundbreaking design element. Likely, your users are experiencing confusion and frustration with the current platform. You want to provide them with a design that’s intuitive and well, dare I say it, boring.
Skipping over the ‘boring’ phase
This is such an easy mistake to make. Most of us, myself included, are so eager to get into the fine details of design and how to make the most out of micro-interactions, that we accidentally rush to the delightful stage a little too quickly. However, solidifying the boring stage is such a crucial step in the design process. As a good designer, you want to really nail down the correct solution that minimizes user stress and provides the user everything they need to get from point A to B. By skipping over this step, you end up with a pretty design (which is cool), but one that could miss the mark on some key usability details and is confusing to use (not so cool).
What makes a ‘delightful’ design?
So, what’s the difference between boring and delightful? How can I apply this to my designs? To start, lay out the technical and time constraints of the project. Familiarizing yourself with these will help narrow down and prioritize the ways you want to and can feasibly elevate your design. After doing so, check out this list of ways to embed delight into your design:
- Micro-interactions
- Animations
- Live feedback
- Removing redundancy
- Simplifying user flow
- Icons and visuals
- Personalization / customization
- Contextual recommendations and resources
- Suggestions and tips
- Visual design
Adding these details can drastically elevate your designs from boring to delightful, but definitely require additional time and resources – meaning there is an opportunity cost associated with the decision to include each specific element of delight. However, strategically incorporating at least some elements of delight can drastically improve your design and give your users an experience to remember.
How did I apply this at SnapPea Design?
One of our clients, Rapid Novor, approached SnapPea to assist with the improvement of their existing platform while considering time and technical constraints. We delivered a delightful experience for their user base. Here are some ways we incorporated the methods mentioned above:
Progress animation
This is an example of a micro-interaction, specifically a progress indicator, where the trigger is clicking the ‘Submit’ button and the feedback is a circular loading animation telling the user that the upload process has begun. This communicates that the system is working and users don’t have to second-guess whether their action was recognized.
Simplifying user flow
Within the platform, users select Post-Translational Modifications (PTMs) that they wish to apply to their analysis. Previously, users would select a PTM and then select whether to add it as fixed or variable. This two-step process was reduced to just one click in the new design. Since the number of selected PTMs can vary between 5 to 10, this simplification reduces time spent while improving the user experience.
Eliminating redundancies
After determining that users often only upload one file at a time, it was decided that the file upload modal would close immediately after the user selects a file from their file manager. Previously, the file would appear on the modal with a ‘Done’ button that users must click to finish the process. This is ideal for uploading numerous files, but not in our case. By simplifying this flow, users can immediately transition to the next step.
So to wrap it all up, prioritize the ‘boring’ stage first, eliminate anything that’s confusing, introduce delightful interactions through animations, visual design, live feedback, etc., and you’re golden. Good luck!
