OVERVIEW
MNDSHFT is an app for creative people that will help them inventory their dreams and ideas, send helpful reminders for new projects, and serve as a repository of related content for future projects. MNDSHFT wants an artist-centric approach to their app that will inspire creativity.
Timeline: 80 Hours over 7 weeks
Role: Lead UX/UI Designer
Tools: Figma, Miro, InDesign, Illustrator, Photoshop
Deliverables: Mobile App
RESEARCH
Market Research
To kick off the project, I conducted market research of the creative class to uncover demographics, behaviors and trends that help me understand the target audience with the emphasis on working artists.
Competitive Analysis
I conducted a competitive analysis of similar journal apps to understand MNDSHFT's opportunity in the market.
1:1 interviews
I crafted an interview guide to question participants about how they find inspiration for their art making process. I questioned 5 potential users from a target demographic of ages 32-62 for 1:1 interviews to observe artist needs, desires and pain points.
DEFINE
Empathy Map
I transcribed the interviews and constructed an empathy map to organize observations by: feelings, things, process, aspects. The purpose is to synthesize my findings from the 1:1 interviews.
Insights
Artists record ideas in journals
Artist are inspired by other artist's work (visual, motion and written)
Artist like tactile quality of expression
Artists like the unexpected
Needs
Easy way to record ideas
Flexible method of recording ideas through images, words, sketching, motion
Serendipity
Persona
Personas help to humanize the design process. Meet Tasha, our persona for MNDSHFT. Tasha is based on interview observations and empathy map insights. From here on, I based my design decisions on Tasha's profile.
IDEATE
POV and HMW statements
This step helps me transition from the problem to the solution. Tasha's needs are a result of her insights which I use to create POV statements. I then put myself in MNDSHFT’s perspective by asking how might we help Tasha in her point of view?
Individual Brainstorming
I brainstormed as many solutions as I could in 3 minute sprints for each HMW question.
Sitemap
I detailed the most promising solutions into key screens to build a sitemap. This helps to find a home for proposed solutions and establishes information architecture for the app.
Task Flow
With solutions in place, I documented how a user would complete three tasks using the new app. The task flow helps me understand how the user interacts with the app to achieve a goal.
Sketches
I sketched low-fidelity wireframes to organize visual hierarchy and experiment with layouts. Sketching allows me to quickly explore new ideas.
Wireframes
I reviewed competitor apps to source inspiration and incorporate familiar design patterns. I digitized the sketches into mid-fidelity wireframes to create a prototype and perform usability testing of the new app.
PROTOTYPE
Mid-Fidelity Prototype
I uploaded my wireframes and created a mid-fidelity prototype using Figma. This served as a working example of the new app. With this prototype, I started to conduct usability testing.
TEST
Usability Test
I created five tasks to test key features. Five participants took part in the test. I observed their patterns and behaviors with screen & audio recordings.
Affinity Map
Using observations from the usability test, I created an affinity map to organize participant thoughts and behaviors and derive insights. My recommendations are based on these insights.
Insights
Users were unsure of the function of certain icons
Users were confused by redundancies with navigation options
Users had to read a lot
Users had trouble clicking with hotspots
Users did not understand feedback feature
Recommendations
Add descriptions to icons especially feedback
Make navigation more contextual
Add images especially in regards to profile
Expand frames so hotspots include icon + text
Rename MNDSHFT feedback icon to simply "feedback"
DESIGN
Brand Guide
To craft MNDSHFT's brand identity, I created a metaphor to help define the core characteristics of the company:
The amazing power of the ocean on a peaceful day at the beach.
I gathered visual references based on this metaphor to inform the design direction. I created a logo, chose brand colors and selected typography.
Wireframe Revisions
I took the recommendations from the Affinity Map and revised my wireframes to improve usability. The main changes were adding descriptions to icons including defining the feedback feature more clearly and improving contextual navigation overall.
High-Fidelity Wireframes
I populated the mid-fidelity wireframes with imagery, brand styles, and UI elements to create high-fidelity wireframes, a highly developed mock-up that I can present to the client.
Final Prototype
I uploaded the high-fidelity wireframes to Figma. Interact with the Figma prototype here (best viewed on desktop).
Test the prototype by:
Making a journal entry
Commenting on an existing entry
Checking for feedback
REFLECTION
A strong beginning. 80 hours to complete an app design for a team of one is a lot to accomplish. I looked at this project as a strong beginning to test and learn for future iterations.
Iterate on features. I plan to continue to test iterations regarding third party capabilities for audio transcription and data merging for the feedback feature.