Toronto-based studio Burnt Toast Creative shares quirky illustrations highlighting the addictive tendencies of social media.
Squarespace has remade its branding and identity system in an interesting, generative way. The story. »
Product design case study: Senior Home Scout
Stretching my product design muscles envisioning an app to help elder orphans find their ideal retirement community.
A case study in product design for classroom teachers
How I translated a data-table heavy SaaS product into a portable app for teachers of English language learners, using Figma and Principle.
Success screens provide feedback to let you know something has been completed. They’re also a good opportunity to get users excited and eager to get started.
This example from Whimsical does exactly that.
Good microcopy speaks the brand’s voice.
Zero states (or empty states) often present an opportunity to flex your personality. Scrumpy (a newcomer in the project management space), embraces the opportunity and just has some fun.
Good microcopy knows when to have fun.
Real sample data isn‘t just for UI design
One of the many valuable lessons I learned in my two+ years doing UX and UI design at Speak Agent was to pull real sample data into my interface designs. When users generate content, as a designer you have to account for titles of widely varying length, the space needed for potentially a dozen tags, and, of course, images of disparate proportions. Lorem ipsum text and images can give you a false sense of security that your layout is sufficiently flexible and your css robust enough to account for real content.
That lesson also applies when revamping the user flow in an existing platform: Do not rely on test data input into a QA environment, meant to check code and accessibility, not mimic the user experience in a customer installation.
UX Challenge
Devise a flow for a teacher to set up a scrambled sentence language learning activity using their own content, rather than passages created by Speak Agent.
Goals
- Make it easy for a teacher to input custom content.
- Provide just enough guidance to the user to minimize database issues.
- Hash out tech requirements early on in the UX design process.
UX Challenge
Work out scenarios for displaying student progress reports to users with different levels of access to Speak Agent, an education platform for English language learners and teachers, K–12.
Solution
Gather business requirements to understand what kinds of users need to see what kinds of reports. Diagram the information architecture for internal review and to identify where data visualizations will need to be generated.
UX-UI Challenge
Provide students an engaging—and more obvious—animation to provide feedback that they have completed adding a sentence to the group story.
Solution
A three step animation starts with the student pressing the + icon to add her sentence to the story “well.” The + icon transforms to a checkmark. The student’s avatar transforms into a tiny spinning roulette wheel to indicate she can spin to select the next student. Animation storyboarded for the Story Spin game for Speak Agent, Inc.
Challenge:
Working out a series of interactions for an English learner to practice speaking assigned vocabulary, and make it fun.
Solution
Using a visual motif of a recording studio, the screenflow documents how a student would run through the required “takes” and the state changes providing feedback on activity progress. The ultimate payoff—the student can title and play their album on an analog record player.
Work done for Speak Agent, Inc., for an activity called My Voice.
Quick UX Fixes
Annoyance:
Having to click twice to get to my online Bill Paying interface.
Experience:
Click Transfer Money » Displays annoying message that I don’t have any internal accounts to transfer money from/to. » Close message » Then I can go to Pay Bills.
Quick Fix: Add a top-level navigation link to Pay Bills.
UX-UI Challenge:
Work out user flows to enable teachers to share Speak Agent content on social networks. Questions answered:
- How do the user flows vary for different content?
- What happens when shared content has been removed by the creator?
- What are the technical constraints of getting our platform to “talk to” different APIs?
- Under what circumstances are we sharing premium content?
UX-UI Challenge:
How to make it fun for primary school English learners to learn abstract words, while making it work for classroom tech environments.
Solution
Using the visual metaphor of a lab, have students uncover the secret formula for a word by mixing ingredients in a flask. To make gameplay Chromebook friendly, provide multiple ways to move ingredients into the flask (point and click, and drag and drop). To minimize page weight, use sprite animations of lightweight pngs.
This is the first in a series of snapshots from my work notebooks.
Snapshot of my April bookmarks.
- Page 1 of 40
- Next »