Timeline
Oct 2023 - Dec 2023
Role
Product Designer
Mosaic
Mosaic is a design-journaling, visual inspiration, and brainstorming app that fits seamlessly into a designer’s workflow, increasing design efficiency and effectiveness, all at their fingertips.
Designers can quickly document their design decisions and learnings, automatically create a draft portfolio case study using generative AI, find visual inspiration from top companies, and brainstorm on design concepts to improve their designs.
I designed the entire app from the ground up. I conducted user research, strategically positioned the product in the market, created high-fidelity prototypes, and validated the prototypes with users.
Observation
No journaling tools for UX designers
My professor recommended I keep a design journal to document and reflect on my design decisions and learnings. When I began journaling, I grew frustrated that there were no journaling tools made for UX designers. I also reflected on my design process, and realized I was dissatisfied with the experience of finding inspiration and brainstorming on mobile.
Generative Interview Insights
Creating a journaling habit is difficult due to lack of support for designers. Also, visual inspiration and brainstorming could be better integrated into workflows
I interviewed six UX designers, three students and three in industry, with the following insights:
6 out of 6 believe design journaling is valuable, but creating a habit is difficult because current solutions lack UX flows, and 3 out of 6 cited the barrier of duplicating effort when transferring to their portfolio.
Lack of journaling support for UX designers
5 out of 6 stated transferring designs from camera roll to Figma is a pain, 6 out of 6 want to annotate strengths and weaknesses when they first see a design, and 3 out of 6 are looking for a better inspiration solution.
Redundancy in visual inspiration workflow
4 out of 6 thought brainstorming away from computer on mobile is more relaxing, but the Apple Notes app, which every interviewee used, gets disorganized for 5 out of 6.
Disorganized brainstorming on mobile
Competitive Analysis: Features
Uncovering market gaps with a competitive analysis
Generalist competitors don’t organize documentation in a way that makes sense for designers, don’t have the right prompts, don’t integrate with Figma, and the documentation process doesn’t group decisions or handle images well.
Existing journaling apps are generic, not built for UX designers
Current visual inspiration competitors don’t allow annotation of inspiration next to the visual, lack Figma integration, and don’t organize content into Figma mood boards. Also, for the journal, there is redundant effort when transferring to a portfolio.
Current competitors don’t integrate themselves into designers’ workflows
No competitor offers design journaling, brainstorming, and visual inspiration in one place. This results in multiple apps being used for related tasks.
Competitors only focus on one design aspect, resulting in siloes
How Might We’s
“How might we help designers be more efficient when design journaling, finding visual inspiration, and brainstorming, and think more deeply throughout these processes?”
How might we make design journaling faster, immediately useful, and organized in a way that saves future effort and enhances thinking?
How might we make design inspiration solutions fit seamlessly into designers’ workflows while also increasing design quality?
How might we enhance the brainstorming process to help designers find novel solutions to problems in less time?
Single Vet Preferencer
Values continuity of care
Home
Design Journal,
with Visuals
Design Journal, Text Only
AI Portfolio Creator
Find Visual Inspiration
Directed Brainstorming
Journal Timeline
Brainstorm on creative prompts, create a journal entry, or jump back into work.
Document your design decisions and learnings, all at once, and get them auto-organized.
Quickly jot down documentation in a one-step, text-only format. It will still be auto-organized.
Generate a draft portfolio using generative AI. The AI will use content from your journal.
Search and annotate designs from top companies, and export to Figma mood boards.
Swipe through a digital card deck of design-specific prompts to spark ideas.
View your journal entries in a timeline to make them easy to find.
High Level App Overview
Mosaic integrates seamlessly into designers’ workflows. Designers can write strengths and weaknesses beside visual inspiration and export into Figma mood boards. The AI portfolio tool eliminates redundant work by helping create a case study.
Better integration into designers’ workflows
Mosaic is the only app that offers design journaling, brainstorming, and visual inspiration in one place. These tasks are complementary and all often completed on mobile.
Aggregating unique set of design tasks
Identifying the steps needed in each use case through a user flow, and then creating three scenarios to identify priorities for each step and big-picture interaction principles
User Flow and Product Scenarios
Scenarios
Steps Identified through User Flow
Design Journal: “Add Figma link” page, “Journal timeline” page, “Jump back into entry” on home page
Visual inspiration: “Add to collection” page, “Jump back into moodboard” on home page, “Export to Figma” modal
Final Designs
Design journal
Efficient documentation for two distinct use cases
The use cases vary based on user’s time. Users can quickly jot down notes in one step or upload all visuals at once and document their decisions below each.
Auto-organizing insights into glanceable drop-downs
Journal is auto-organized so it’s easy to find and skim entries when you want to reflect or add to your portfolio.
The design journal is designed to speed up documentation and encourage thoughtful reflection.
Improving reflection by placing decisions next to designs
Unlike current journaling tools, decisions directly below each design reduces forgetfulness and encourages deep thinking.
Engaging users with gamification in journal
Removing friction by shortening and automating journal steps
Documentation is done all at once, eliminating steps
Portfolio generator auto-generates a portfolio based on your journal
Multiple Figma screens can be uploaded together to save time
Text-only documentation is extremely simple, only one step
Generative AI portfolio creator synthesizes the user’s design journal & creates a draft portfolio
Instead of manually transferring to a portfolio, an AI portfolio creator uses the design journal content to synthesize a draft case study. This feature uses similar technology to the AI presentation creator in Microsoft’s CoPilot.
Directed Brainstorming
Filter by goals or categories for specific problems
Prompts right on home page encourage engagement
Imagery and shape that spurs the imagination
There is an unobtrusive filter in the top right that can help users focus their brainstorming session.
In addition to the full screen view, users get immediate value out of prompts whenever they log into the app. New prompts will be displayed each time the app is opened to keep them fresh.
Illustrations create an imaginative feel, and the experience is designed to feel like a deck of cards. Physical card decks are a popular commercial format for brainstorming, such as IDEO’s “Method Cards”.
Users swipe through brainstorming prompts designed to spark creativity and improve their designs.
Visual Inspiration
Fits seamlessly into workflow
Filters & social validation ensure relevant, quality designs
No more dragging images from your camera roll into Figma and forgetting what you liked about them! Users can annotate strengths and weaknesses right from the app and then continue working on it in Figma.
There are significant filtering capabilities that go beyond Dribbble or Behance and you can view the designs’ popularity with users. Both help ensure that the right designs are selected for inspiration.
Users can find inspiration for a project, annotate strengths and weaknesses, and export as an auto-organized mood board in Figma.
Creating an aesthetic that inspires creativity
Primary
Background
“Mafra” for serif
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk
“Clean” for sans serif
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk
Secondary
Neutrals
Header 1 - (Mafra 30)
Header 2 - (Clean 24)
Header 3 - (Clean 21)
Body - (Clean 18)
Description - (Clean 15)
Colorful palette made for designers
I used a bright, colorful palette since the app is for designers. Purple was selected as base color because of its association with creativity.
Typography that feels creative but professional
Serif font “Mafra” features asymmetrical serifs that add flair but still feels credible. “Clean” for sans serif feels creative yet professional.
Imagery that inspires and accentuates meaning
I created visuals with inspiring language and bright colors to distinguish content types. For prompts, I made semi-realistic colored outline icons that feel imaginative. I also used iconography and color to accentuate the purpose of the journal and AI portfolio creator.
User Testing
Adding a bulk documentation use case based on user testing
Old Journal
Original format good for short journal entries but users couldn’t upload multiple designs at once
All users liked the original layout for quick documentation. However, 3 out of 4 wanted to upload all their visuals in one step, especially if journaling weekly, bi-weekly, or monthly.
New journal allows users to upload visuals in one step and document decisions all at once
The new layout starts with the choice of either uploading all your visuals at once from Figma or camera roll and writing decisions for each in a carousel, or using a quick, text-only option that skips the need to import. The layout also accommodates all screen sizes.
Step 1
Step 2
Step 3
Step 4
New Journal Bulk Documentation Use Case
I conducted user testing with four designers. Task completion was high, but I made changes to most screens, with the journal being most impacted.
Next Steps
If I had more time, I would build out more of the “AI portfolio” and “export to Figma” functionality and conduct another round of user testing.
What I Learned
When there are many potential features, maintain focus on the core differentiators
I do best when I consistently design journal, as it helps clarify my thinking
I learned that the more consistently I wrote down my thinking, the easier it was to spot logical gaps and generate thoughtful new ideas. I’ll take these learnings and apply them to my career!
At the start, I planned on having note-taking functionality since interviewees expressed interest. However, I realized this would be too many features, and blank notes aren’t a differentiator.
