An image manipulation app that enables users to create
custom images to print and color in.
custom images to print and color in.
Mobile Application Design
3 WEEK SPRINT
Client
picPixie
picPixie
Operations
Remote/Online
Remote/Online
Role
Lead Design
UI Design
Research
Lead Design
UI Design
Research
Tools
Figma
Adobe Ai, Ps
Figma
Adobe Ai, Ps
Research Methodologies
Research Plan
Survey
User Interviews
User Testing - Task Analysis
Competitive & Comparative Analysis
Low-High Fidelity User Testing
Global Research Report
Research Plan
Survey
User Interviews
User Testing - Task Analysis
Competitive & Comparative Analysis
Low-High Fidelity User Testing
Global Research Report
"two guys, an algorithm, and a team of UXers"
Stakeholders Meeting
In the Beginning
Startup company picPixie were only 6 weeks beyond inception of their algorithm when they decided to contract our UX team.
The initial brief and key stakeholders meeting was quick to illustrate the infancy of picPixie. This was a very exciting prospect as it allowed the design team to help pave the business and product development.
Market Research
Who's Our Market?
Traditionally, a marketing team would drive the market research segment to set up UX designers to begin their process. Fortunately, the limited budget and a short turn-around time allowed us to conduct the research ourselves.
Primarily, picPixie creates custom B&W sketches to be printed then colored in - hence exploring the adult coloring book market. Astonishingly, there was a boom in sales from 2014 (1M sales) to 2015 (12M sales) - of these sales 71% were female Millennials. [www.nielson.com,2016]
This was a clear market to target in 2015/16, but was it still the case in 2020? Living through the Covid period has imposed 'stay at home' orders, social distancing and the closure of non-essential businesses - hence a general sales increase of arts & crafts. Amazon alone revealed 955% sales increase of adult coloring books to a disclosed demographics. Understanding the market may have broadened, these figures were enough to maintain our focus on female Millennials.
User Interviews
Why Female Millennials?
Our secondary research indicated that Millennials often felt pressure and experienced anxiety due to the highly paced lifestyles they live.
"Coloring books have been shown to reduce stress and promote relaxation due to their inherent qualities, such as the ability to remain present and focused on the image and provide temporary relief from life stressors"
Martha Dorn of The Art Therapy Project, a New York-based nonprofit organization that provides art therapy to trauma survivors, told Today.com.
“Themes aside, these activity books have often been best sellers and claim to provide users with the opportunity to connect with their inner artists, reduce stress, and live happier lives"
Shainna Ali Ph.D., LMHC in Psychology Today.
To better understand our demographic we conducted 7 interviews with Millennials (predominately female) that had colored in adult coloring books. The aim was to collect data that will help build towards a persona.
Key Findings:
- Use coloring as a coping mechanism for stress
- Are comfortable with social media apps’ functionality
- Like a range of complexity in image details
- Want the ability to manipulate their image
- Are divided on if they would spend money
- Prefer a mobile app over website
Persona
Meet Charlotte
Our user interviews, online survey and secondary research findings produced plenty of overlap to develop picPixie's persona - Charlotte. She'll be continually referred to throughout the remainder of the project to keep our research data and design aligned.
"How might we keep Charlotte motivated in her art therapy"
Design Development
Designing for a Minimum Viable Product
Design Studio
Initial design development was kicked off with a four person rapid concept sketching studio. At this point we had identified some key pages to concept including; splash/login, camera, camera roll, and image modification. Our 1.5 hour long studio entailed:
- Competitor functionality & features research
- A variety of sketched out key pages
- Quick presentations and reviews
The result of this process was the amalgamation of vision to develop a low fidelity prototype.
MoSCoW
Considering all the feature possibilities we created a MoSCoW chart in order to work towards a Minimum Viable Product:
Must
Sketch (B&W) adjust complexity
Internal Camera Operations
Export/Print
Upload/Share
Free
Undo/Restart
Save Image
Should
Pencil & Eraser
Zoom In/Out
Album/Gallery
Crop/Rotate
Adjust Dimensions
Could
Favourites
Premium Upgrade
Paint by Number
Saved Color Palletes
Frames
Wont
Share within app.
Ability to “blend” and “blur” color minimization.
Import photos directly from social media to picPixie.
Design Development
User Testing Impact
From low to high fidelity prototyping, users were integral to the process. A total of 5 rounds of design iterations were executed including 3-5 participants per round.
Outreach & Screening
The participants selected were Millennials. All tests were performed either in person or via video conference call.
The participants selected were Millennials. All tests were performed either in person or via video conference call.
Objective
To observe users as they naturally interacted with the interface and document all pain points and/or uncertainties. Findings will be used to drive design decisions for the next round of iterations.
To observe users as they naturally interacted with the interface and document all pain points and/or uncertainties. Findings will be used to drive design decisions for the next round of iterations.
Low Fidelity
User Test (1)
Methodology
Users were asked to complete to following three tasks:
1. Create a picPixie account, then take a selfie, and print it off as a black and white sketch.
2. Upload a photo from your camera roll to transform it into a multicolor picture. Share on social media.
3. Print off an old picPixie project from your gallery.
Key Findings
• Need a way to print from the Gallery
• The functionality of the slider is not clear
• Do not like landing on the Settings Page when they first open the app
• Settings Page not necessary
• Like that they can log in with social media accounts
• Question the need for a picPixie account
• The functionality of the slider is not clear
• Do not like landing on the Settings Page when they first open the app
• Settings Page not necessary
• Like that they can log in with social media accounts
• Question the need for a picPixie account
Low Fidelity
User Test (2)
Methodology
Users were asked to complete to following three tasks:
1. Take a selfie and print it off as a black-and-white sketch within picPixie. (Ask participant to make the image less complex, then ask them to use the pencil to draw on the image. Then ask them to go back to make the image more complex. Note any points of hesitation.)
2. Upload a photo from your camera roll to transform it into a multicolor picture.
3. (Starting participant on the camera page) Go to Gallery and print a picture.
Key Findings
• Need a way to print from the Gallery
• Are not sure what the word ‘Gallery’ means within this app
• Are confused by the terminology used for the ‘switch’ icon
• Have trouble distinguishing the b&w vs color tabs; this creates additional confusion on what the slider does, as they do not realize it is found on each separate page
• Expect to see the original photo before it transforms
• Do not like seeing large advertisement text
• Do not think they need a zoom icon
• Are confused about the slider disappearing when they select tools
• Are not sure what the word ‘Gallery’ means within this app
• Are confused by the terminology used for the ‘switch’ icon
• Have trouble distinguishing the b&w vs color tabs; this creates additional confusion on what the slider does, as they do not realize it is found on each separate page
• Expect to see the original photo before it transforms
• Do not like seeing large advertisement text
• Do not think they need a zoom icon
• Are confused about the slider disappearing when they select tools
Medium Fidelity
User Test (3)
Methodology
Users were asked to complete to following three tasks:
1. Take a picture of the landscape in front of you, create a Pixified black-and-white sketch out of it, make it less complex, and print it out.
2. Select a photo from your camera roll, transform it into a Pixified colored picture, and share it on social media.
3. Select a photo in your Pixie Projects and print it out.
2. Select a photo from your camera roll, transform it into a Pixified colored picture, and share it on social media.
3. Select a photo in your Pixie Projects and print it out.
Key Findings
• Didn’t find picPixie to be particularly geared towards mental health
• Indicated the prototype was quite mechanical and lacked picPixie voice
• Didn’t see much that differentiated it from similar apps in the market
• Since users cannot edit and adjust the complexity in tandem, the process needed to be presented to them sequentially to avoid any confusion
• Always needed a way to get back ‘home’
• Required a button to restart their editing
• The inactive tab needed to be more visible for accessibility
• Felt that the ellipsis icon is not an intuitive place to find the printer
• Indicated the prototype was quite mechanical and lacked picPixie voice
• Didn’t see much that differentiated it from similar apps in the market
• Since users cannot edit and adjust the complexity in tandem, the process needed to be presented to them sequentially to avoid any confusion
• Always needed a way to get back ‘home’
• Required a button to restart their editing
• The inactive tab needed to be more visible for accessibility
• Felt that the ellipsis icon is not an intuitive place to find the printer
High Fidelity
User Test (4)
Methodology
Users were asked to complete to following four tasks:
Users were asked to complete to following four tasks:
1. While on the landing page, describe to me what you think this app is all about.
2. Select a photo from your camera roll, create a Pixified color photo, make the image less complex, print it out.
3. Select a photo from your camera roll, create a Pixified black-and-white sketched picture, draw a heart on it, and post it in social media.
4. Take a selfie.
2. Select a photo from your camera roll, create a Pixified color photo, make the image less complex, print it out.
3. Select a photo from your camera roll, create a Pixified black-and-white sketched picture, draw a heart on it, and post it in social media.
4. Take a selfie.
Key Findings
• Were still confused about what the “Original” icon does
• Expressed apprehension about accidentally tapping the restart icon
• Asked that the “tutorial pop-ups” be numbered and re-colored
• Felt that the place setter logo was hard to see
• Thought the words “mental health” seemed too surprising/abrupt
• Tools feel like they need to sit in similar place as adjustment slider
• Expressed apprehension about accidentally tapping the restart icon
• Asked that the “tutorial pop-ups” be numbered and re-colored
• Felt that the place setter logo was hard to see
• Thought the words “mental health” seemed too surprising/abrupt
• Tools feel like they need to sit in similar place as adjustment slider
Design Development
Brand & Identity
Research
Research
Objective
Our goal was to develop a basic brand and identity style guide that could be implemented into the app design development and beyond. The primary requirements included:
• Typefaces / Fonts
• Color Palette
• Brand Voice
Methodology
Understanding that our persona ‘Charlotte’ feels anxiety and stress on a regular basis, and considers coloring a coping mechanism, our team decided to conduct a Visual Content Analysis of prominent organizations in the mental health industry.
Our goal was to develop a basic brand and identity style guide that could be implemented into the app design development and beyond. The primary requirements included:
• Typefaces / Fonts
• Color Palette
• Brand Voice
Methodology
Understanding that our persona ‘Charlotte’ feels anxiety and stress on a regular basis, and considers coloring a coping mechanism, our team decided to conduct a Visual Content Analysis of prominent organizations in the mental health industry.
The following were investigated:
Headspace, National Aliance of Mental Health, Smiling Mind, My Life, Inscape and Jour.
Headspace, National Aliance of Mental Health, Smiling Mind, My Life, Inscape and Jour.
Key Takeaways
Identifying trends, patterns and design commonalities drove our decisions. The following design observations were catalysts in determining our next steps:
• Typefaces were clean, simple, soft and generally Sans Serif
• Color palettes were generally a softer pastel variety with smooth, drawn out gradients
• The brand voice was always very conversational and sympathetic towards the user
Identifying trends, patterns and design commonalities drove our decisions. The following design observations were catalysts in determining our next steps:
• Typefaces were clean, simple, soft and generally Sans Serif
• Color palettes were generally a softer pastel variety with smooth, drawn out gradients
• The brand voice was always very conversational and sympathetic towards the user
Design Development
picPixie
Design System
Design System
High Fidelity Prototype
Explore
the product
the product
Ensure you enter 'full screen mode' via the top right icon.
Next Steps
- Test out the pencil & eraser screen on users.
- Consider fading out the ‘view original’ icon or transitioning to the press and hold interaction.
- Look into creating a premium account option with add on features.
- Continue to experiment with the algorithm to see if it can create more defined and/or thicker lines.
- Seek out marketing consultation to continue honing in on the primary picPixie user.
- Consider fading out the ‘view original’ icon or transitioning to the press and hold interaction.
- Look into creating a premium account option with add on features.
- Continue to experiment with the algorithm to see if it can create more defined and/or thicker lines.
- Seek out marketing consultation to continue honing in on the primary picPixie user.