SlideShare une entreprise Scribd logo
1  sur  15
Télécharger pour lire hors ligne
Picsart Review
By Jeff Bayer
● Great, in-depth photo editing tools. (Image Creation UI/UX)
● Inconsistency in menus, features, user flows, visual design. (Engagement UI/UX)
● Lots of Bugs
General thoughts
Bugs
Crashes, UI artifacts, iOS feature failures, and ghosts of follows long gone.
Following 2
Showing 1 that I follow.
Occasional slow data
creates images that can’t
load without pull-refresh
or reloading the app.
Tethering connections,
phone calls, and anything
that forces an additional
top bar creates all kinds of
problems in lots of apps.
Probably more of an OS
bug.
Woo, crash reports.
Bugs
Can’t import images saved to iPhone camera
roll to mac via photos application.
Edited images / gifs don’t
interact well with other
apps.
**should probably have
more in depth QA. Sharing
via FB is a common use case.
Bugs
Web profile header (cover?) image is shorter on some
profiles.
Bugs
A lot of these bugs will probably be irrelevant if
you’re releasing a significantly new version.
Could use some more follow-up QA.
Specifically around image creation. Memory usage,
file sizes, app lag, etc.
Don’t worry, it’s not you. I notice bugs everywhere.
Neat ampersand
Inconsistencies - So many menus
Floating rounded menu
at top. With pointer.
Drawer style menu
from bottom. Rounded.
Drawer style menu
from bottom. No
rounding
Sandwich icon menu So many options. Floating rounded menu
at top.
Examples
Alright already, I get it, I
can go discover artists
from basically
anywhere in the app.
Discover Artists. The
same as from the
Sandwich button left
side menu.
Discover artists buried
in an overflow menu on
my profile?
This whole menu
seems like an
unnecessary extra step.
How do you change the
background cover
image?
**apparently by tapping the
bottom left of right corner of
the image. Discoverable?
Maybe, probably not.
Change avatar v1 Change avatar v2
Change profile settings
crayon icons/check
mark is a difficult
interaction.
Examples
Comments feel
detached from the
artwork. Probably due
to the new screen, UI
color and iconography
changes.
Why the multi-step
process to share to
picsart?
Choose from this
screen to share to fb,
insta, etc.
More floating buttons,
but now white instead
of translucent.
White background
browsing.
Color scheme?
Brand colors?
Black background Heavy gradients and
floating buttons.
UI probably shouldn’t
look significantly
different due to user
image size choices.
More Examples
Even the keyboards are different.
Improving PicsArt
I’ve seen this kind of inconsistency with all sorts of apps. It happens to new
products when design/dev teams don’t work well together or with iteration and
feature creep in apps that have been around for a while.
● How do we start to fix this?
1. Immediate action items could include removing multi-path features in
favor of the most used option for changing your profile picture or
searching. Adjusting the notifications push in to function like search
and cover the bottom tab bar, therefore removing the ability to have
multiple concurrent notification pages open.
2. Brand & Product style guide that defines best practices for consistent
colors, icons, menu styles, etc.
3. Post-development QA and design review.
4. Digging into analytics for better insight into how any why the app is
being used. And from there creating a new more streamlined, cohesive
user experience.
Really great feature set, however:
● I would worry about choice fatigue & use of technical terms for features.
● Feature naming can drive engagement.
Or removing potentially confusing feature names like hardness if favor
of more obvious visual clues. Photoshop does both in this case.
● Make things as automagical as possible.
Photo Editing Tools
4 menus deep alternating
top/bottom.
Why not simplify by removing the labels and making the
slider a visual indicator of the feature?
More - Live photo editing
Adding effects to live camera view - Why isn’t this named something brandable?
Perhaps “Live Filters”
- Arrow function bug.
- Why change from bottom menu to top?
If making gif/video content is a goal moving forward, the initial creating content screen
should be a live camera view (like with the gif maker). Perhaps some start interactions
showing new or mostly undiscovered live filters to draw users to deeper exploration.
Example >
Instantly show new users some editing tools when skimming
through the app store.
Current icon looks better on android without the white space.
Here’s a super quick example.
Launcher Icon
Please be sure to look over some of my specifically mobile/social design work:
http://www.jeffbayer.com/work/wislr/
https://www.behance.net/gallery/22936097/GoBoldly-App-Design-Mockups
http://www.jeffbayer.com/work/dealishes/
http://www.jeffbayer.com/work/tapestry/
http://www.jeffbayer.com/work/audiocast/
Thank you for taking the time to interview me.
I look forward to helping make PicsArt a more amazing product.
Jeff Bayer
Thank you!

Contenu connexe

En vedette

5 Important Considerations For Mobile Application Development Process
5 Important Considerations For Mobile Application Development Process5 Important Considerations For Mobile Application Development Process
5 Important Considerations For Mobile Application Development ProcessAjeet Singh
 
Mobile development process - My view
Mobile development process - My viewMobile development process - My view
Mobile development process - My viewAlexandre Nogueira
 
Designing Websites With a Mobile First Approach
Designing Websites With a Mobile First ApproachDesigning Websites With a Mobile First Approach
Designing Websites With a Mobile First ApproachDan Moriarty
 
Building mobile applications with DrupalGap
Building mobile applications with DrupalGapBuilding mobile applications with DrupalGap
Building mobile applications with DrupalGapAlex S
 
Content types
Content typesContent types
Content typesBob Evans
 
I want to be an efficient developper. Mix-IT version
I want to be an efficient developper. Mix-IT versionI want to be an efficient developper. Mix-IT version
I want to be an efficient developper. Mix-IT versionQuentin Adam
 
Mobile-First Strategy
Mobile-First StrategyMobile-First Strategy
Mobile-First StrategySteve Buttry
 
Collaboration in the User Experience Design Process
Collaboration in the User Experience Design ProcessCollaboration in the User Experience Design Process
Collaboration in the User Experience Design ProcessMarcin Treder
 
Tiga Langkah Mudah Membuat UX (User Experience) Website Anda Menjadi Lebih Baik
Tiga Langkah Mudah Membuat UX (User Experience) Website Anda Menjadi Lebih BaikTiga Langkah Mudah Membuat UX (User Experience) Website Anda Menjadi Lebih Baik
Tiga Langkah Mudah Membuat UX (User Experience) Website Anda Menjadi Lebih BaikBorrys Hasian
 
Tell Me What You Do: How Storytelling Makes You a Better Designer
Tell Me What You Do: How Storytelling Makes You a Better DesignerTell Me What You Do: How Storytelling Makes You a Better Designer
Tell Me What You Do: How Storytelling Makes You a Better DesignerMary Wharmby
 
Mobile App Design Best Practices - Usable Interfaces for Tiny Places
Mobile App Design Best Practices - Usable Interfaces for Tiny PlacesMobile App Design Best Practices - Usable Interfaces for Tiny Places
Mobile App Design Best Practices - Usable Interfaces for Tiny PlacesApigee | Google Cloud
 
Effectively communicating user interface and interaction design
Effectively communicating user interface and interaction designEffectively communicating user interface and interaction design
Effectively communicating user interface and interaction designKaren Bachmann
 
Mobile Application Design & Development
Mobile Application Design & DevelopmentMobile Application Design & Development
Mobile Application Design & DevelopmentRonnie Liew
 

En vedette (15)

5 Important Considerations For Mobile Application Development Process
5 Important Considerations For Mobile Application Development Process5 Important Considerations For Mobile Application Development Process
5 Important Considerations For Mobile Application Development Process
 
Mobile development process - My view
Mobile development process - My viewMobile development process - My view
Mobile development process - My view
 
Designing Websites With a Mobile First Approach
Designing Websites With a Mobile First ApproachDesigning Websites With a Mobile First Approach
Designing Websites With a Mobile First Approach
 
Building mobile applications with DrupalGap
Building mobile applications with DrupalGapBuilding mobile applications with DrupalGap
Building mobile applications with DrupalGap
 
Content types
Content typesContent types
Content types
 
I want to be an efficient developper. Mix-IT version
I want to be an efficient developper. Mix-IT versionI want to be an efficient developper. Mix-IT version
I want to be an efficient developper. Mix-IT version
 
Mobile-First Strategy
Mobile-First StrategyMobile-First Strategy
Mobile-First Strategy
 
Collaboration in the User Experience Design Process
Collaboration in the User Experience Design ProcessCollaboration in the User Experience Design Process
Collaboration in the User Experience Design Process
 
Mobile Application Development Process
Mobile Application Development ProcessMobile Application Development Process
Mobile Application Development Process
 
Tiga Langkah Mudah Membuat UX (User Experience) Website Anda Menjadi Lebih Baik
Tiga Langkah Mudah Membuat UX (User Experience) Website Anda Menjadi Lebih BaikTiga Langkah Mudah Membuat UX (User Experience) Website Anda Menjadi Lebih Baik
Tiga Langkah Mudah Membuat UX (User Experience) Website Anda Menjadi Lebih Baik
 
Tell Me What You Do: How Storytelling Makes You a Better Designer
Tell Me What You Do: How Storytelling Makes You a Better DesignerTell Me What You Do: How Storytelling Makes You a Better Designer
Tell Me What You Do: How Storytelling Makes You a Better Designer
 
Mobile App Design Best Practices - Usable Interfaces for Tiny Places
Mobile App Design Best Practices - Usable Interfaces for Tiny PlacesMobile App Design Best Practices - Usable Interfaces for Tiny Places
Mobile App Design Best Practices - Usable Interfaces for Tiny Places
 
Effectively communicating user interface and interaction design
Effectively communicating user interface and interaction designEffectively communicating user interface and interaction design
Effectively communicating user interface and interaction design
 
User Experience (UX) Design Tips
User Experience (UX) Design TipsUser Experience (UX) Design Tips
User Experience (UX) Design Tips
 
Mobile Application Design & Development
Mobile Application Design & DevelopmentMobile Application Design & Development
Mobile Application Design & Development
 

Dernier

Mobile Application Development-Android and It’s Tools
Mobile Application Development-Android and It’s ToolsMobile Application Development-Android and It’s Tools
Mobile Application Development-Android and It’s ToolsChandrakantDivate1
 
Satara Call girl escort *74796//13122* Call me punam call girls 24*7hour avai...
Satara Call girl escort *74796//13122* Call me punam call girls 24*7hour avai...Satara Call girl escort *74796//13122* Call me punam call girls 24*7hour avai...
Satara Call girl escort *74796//13122* Call me punam call girls 24*7hour avai...nishasame66
 
Mobile App Penetration Testing Bsides312
Mobile App Penetration Testing Bsides312Mobile App Penetration Testing Bsides312
Mobile App Penetration Testing Bsides312wphillips114
 
Android Application Components with Implementation & Examples
Android Application Components with Implementation & ExamplesAndroid Application Components with Implementation & Examples
Android Application Components with Implementation & ExamplesChandrakantDivate1
 
Mobile Application Development-Components and Layouts
Mobile Application Development-Components and LayoutsMobile Application Development-Components and Layouts
Mobile Application Development-Components and LayoutsChandrakantDivate1
 

Dernier (6)

Mobile Application Development-Android and It’s Tools
Mobile Application Development-Android and It’s ToolsMobile Application Development-Android and It’s Tools
Mobile Application Development-Android and It’s Tools
 
Obat Penggugur Kandungan Di Apotik Kimia Farma (087776558899)
Obat Penggugur Kandungan Di Apotik Kimia Farma (087776558899)Obat Penggugur Kandungan Di Apotik Kimia Farma (087776558899)
Obat Penggugur Kandungan Di Apotik Kimia Farma (087776558899)
 
Satara Call girl escort *74796//13122* Call me punam call girls 24*7hour avai...
Satara Call girl escort *74796//13122* Call me punam call girls 24*7hour avai...Satara Call girl escort *74796//13122* Call me punam call girls 24*7hour avai...
Satara Call girl escort *74796//13122* Call me punam call girls 24*7hour avai...
 
Mobile App Penetration Testing Bsides312
Mobile App Penetration Testing Bsides312Mobile App Penetration Testing Bsides312
Mobile App Penetration Testing Bsides312
 
Android Application Components with Implementation & Examples
Android Application Components with Implementation & ExamplesAndroid Application Components with Implementation & Examples
Android Application Components with Implementation & Examples
 
Mobile Application Development-Components and Layouts
Mobile Application Development-Components and LayoutsMobile Application Development-Components and Layouts
Mobile Application Development-Components and Layouts
 

PicsArt Mobile App Design Review

  • 2. ● Great, in-depth photo editing tools. (Image Creation UI/UX) ● Inconsistency in menus, features, user flows, visual design. (Engagement UI/UX) ● Lots of Bugs General thoughts
  • 3. Bugs Crashes, UI artifacts, iOS feature failures, and ghosts of follows long gone. Following 2 Showing 1 that I follow. Occasional slow data creates images that can’t load without pull-refresh or reloading the app. Tethering connections, phone calls, and anything that forces an additional top bar creates all kinds of problems in lots of apps. Probably more of an OS bug. Woo, crash reports.
  • 4. Bugs Can’t import images saved to iPhone camera roll to mac via photos application. Edited images / gifs don’t interact well with other apps. **should probably have more in depth QA. Sharing via FB is a common use case.
  • 5. Bugs Web profile header (cover?) image is shorter on some profiles.
  • 6. Bugs A lot of these bugs will probably be irrelevant if you’re releasing a significantly new version. Could use some more follow-up QA. Specifically around image creation. Memory usage, file sizes, app lag, etc. Don’t worry, it’s not you. I notice bugs everywhere. Neat ampersand
  • 7. Inconsistencies - So many menus Floating rounded menu at top. With pointer. Drawer style menu from bottom. Rounded. Drawer style menu from bottom. No rounding Sandwich icon menu So many options. Floating rounded menu at top.
  • 8. Examples Alright already, I get it, I can go discover artists from basically anywhere in the app. Discover Artists. The same as from the Sandwich button left side menu. Discover artists buried in an overflow menu on my profile? This whole menu seems like an unnecessary extra step. How do you change the background cover image? **apparently by tapping the bottom left of right corner of the image. Discoverable? Maybe, probably not. Change avatar v1 Change avatar v2 Change profile settings crayon icons/check mark is a difficult interaction.
  • 9. Examples Comments feel detached from the artwork. Probably due to the new screen, UI color and iconography changes. Why the multi-step process to share to picsart? Choose from this screen to share to fb, insta, etc. More floating buttons, but now white instead of translucent. White background browsing. Color scheme? Brand colors? Black background Heavy gradients and floating buttons. UI probably shouldn’t look significantly different due to user image size choices.
  • 10. More Examples Even the keyboards are different.
  • 11. Improving PicsArt I’ve seen this kind of inconsistency with all sorts of apps. It happens to new products when design/dev teams don’t work well together or with iteration and feature creep in apps that have been around for a while. ● How do we start to fix this? 1. Immediate action items could include removing multi-path features in favor of the most used option for changing your profile picture or searching. Adjusting the notifications push in to function like search and cover the bottom tab bar, therefore removing the ability to have multiple concurrent notification pages open. 2. Brand & Product style guide that defines best practices for consistent colors, icons, menu styles, etc. 3. Post-development QA and design review. 4. Digging into analytics for better insight into how any why the app is being used. And from there creating a new more streamlined, cohesive user experience.
  • 12. Really great feature set, however: ● I would worry about choice fatigue & use of technical terms for features. ● Feature naming can drive engagement. Or removing potentially confusing feature names like hardness if favor of more obvious visual clues. Photoshop does both in this case. ● Make things as automagical as possible. Photo Editing Tools 4 menus deep alternating top/bottom. Why not simplify by removing the labels and making the slider a visual indicator of the feature?
  • 13. More - Live photo editing Adding effects to live camera view - Why isn’t this named something brandable? Perhaps “Live Filters” - Arrow function bug. - Why change from bottom menu to top? If making gif/video content is a goal moving forward, the initial creating content screen should be a live camera view (like with the gif maker). Perhaps some start interactions showing new or mostly undiscovered live filters to draw users to deeper exploration. Example >
  • 14. Instantly show new users some editing tools when skimming through the app store. Current icon looks better on android without the white space. Here’s a super quick example. Launcher Icon
  • 15. Please be sure to look over some of my specifically mobile/social design work: http://www.jeffbayer.com/work/wislr/ https://www.behance.net/gallery/22936097/GoBoldly-App-Design-Mockups http://www.jeffbayer.com/work/dealishes/ http://www.jeffbayer.com/work/tapestry/ http://www.jeffbayer.com/work/audiocast/ Thank you for taking the time to interview me. I look forward to helping make PicsArt a more amazing product. Jeff Bayer Thank you!