In Designing with real data author and designer Zach Johnston outlines how his team at Dropbox uses Framer X to enhance UI and UX design. Framer X, explains Johnston, is looks like other design tools but is built on React. The advantage is that anyone with React knowledge can create components for a variety of function.
At UI UX Training, we don’t push specific tools. What’s intriguing in this case is how Johnston’s team leveraged Framer X to create better UI and UX designs. For example:
As Johnston explains: “The goal of pulling real or realistic data into our designs is to bring us closer to the final product. By designing with real names, real photos, and real content, we gain empathy for the people who use our final product.”
This article provides practical tips for teams for finding and importing real data into their UI and UX designs.
Search is ubiquitous and ubiquitously frustrating. How many times do users and customers ask “Why is it so hard to find what I’m looking for?” How to craft a kickass filtering UX offers solutions in the form of filtering best practices:
Alex Kreger, CEO/Founder of UX Design Agency has written a thorough and compelling case study about a cutting edge mobile banking app. UX Case Study: Simplest and Most Beautiful Banking Design in The World, As We See It.
Kreger describes the main stages and deliverables from UX research to empathy maps, journey maps, I/A, scenarios, screen flows, to high fidelity wireframes for testing. It’s a solid and useful case study for anyone working in mobile UI and UX design.
What stands out, however, is the power of the certain design features such as the simple but aesthetically clever use of light:
Light Bank could not be called Light Bank if it didn’t follow the natural course of daylight changing into night light. You could almost call it alive. Using geo-data and timing, Light Bank automatically makes the transition from a lighter to a darker background according to the time of the day. If a user prefers one particular background, he/she can choose to set it as default and use it all the time. See the reference to design systems near the end of the article.
The endless accounts feature is equally impressive: “Our journey starts by entering Light Bank using a Face ID verification. Then, we see the balance of our primary account, and we can swipe to view the balance of other accounts.” From there, users see a list of credit cards and then a marketplace where they can apply for any financial product. In short, the user experiences a seamless flow from the primary account balance all the way to a variety of financial products and offers.
This case study demonstrates the power of task and screen flows based on thorough research. This may sound obvious. Yet a virtual stroll through a few mobile apps makes it abundantly clear that many are based on little more than guesswork and bells and whistles. Read this article closely; you’ll be glad you did.
As the previous Light Bank study demonstrates, appearance is important: “38% of visitors will disengage from your website fairly quickly if they do not like the layout or design of it,” explains Les Kollegian in How To Create Emotionally Rewarding UX Designs.
Pay attention to the impact of small changes in flow and page design, advises Kollegian who reports that simply changing a CTA button to yellow increased Moz’s conversions by 187%.
While conversion rates and A/B testing are not new, the underlying point merits emphasis. Pay attention to every aspect of design from color, to contrast, to white space, to micro-interactions. For example, it’s often wise to reserve one color for CTAs on your website and avoid using that color for anything else
In Design to Convert: 5 Ways to Improve eCommerce Conversion, author Rachel Bodony begins in a similar with a gentle reminder that white space is the antithesis of overcrowded web space.
The key to successful e-commerce conversion, however, is to deliver a personalized and curated experience. While standard promotional videos with real people using products are a good start, Bodony advises introducing stories to create emotional relevance. She cites fashion store Anthropologie’s featuring spring dresses in an emotional video campaign for Mother’s Day: “They chose various mothers with interesting stories and made an accompanying video titled ‘A Story of Her.’”
In short, emotion turns an average web site visit into an engaging and memorable experience.