Emmanouil (Manos) Chatzidakis - Portfolio

Twitter iOS

Concept using Material Design

— PROJECT NAME

Twitter iOS Concept – Material Design

— ROLE

UX /UI Design


— DATE

2017 -2018

I am a fan of Material Design*, but I am also fan of platform and common use patterns.


My attempt was to create a small section of Twitter for iOS with a Material Design flavour. I tried to think about common use, platform patterns and of course Material design and how can you combine those effectively.


*Material Design is a design language set forth by Google for use across platforms.





FEATURED

This Project was showcased in:

UPLABS(ex MaterialUP). Check it out here or here

And Sketchappsources.com. Download a Sketch file here

Understanding our users

Considering the people and devices that I will be designing for.

iOS USERS

  • They want simplicity – they are tech enthusiasts, addicted to new digital devices but not so much for technical jobs.

  • Accept less control.


  • Like sleek and polished designs.

  • They are known as the App power-user because they enjoy using apps. Will explore and experiment with several. 

  • Are more likely to purchase goods or services.

  • Spend a lot more time using their phones.  



ANDROID USERS

  • Want control – more hard core techies who want to customise and explore the limits of their phone’s capabilities. (Rooting Android).

  • Accept complexity.

  • Are more comfortable with the more open but less polished design.

  • They are known as the Google power-user, because they are well-integrated with Google products.

  • Consider themselves as no nonsense phone users who know what they want to do and don’t spend a lot of time wandering from app to app.

You can you this place to talk a little bit about the image on the side.

Sources:

http://bgr.com/2015/05/27/iphone-vs-android-advertising-google-profits-money/


https://www.comscore.com/lat/Insights/Blog/Android-vs-iOS-User-Differences-Every-Developer-Should-Know#imageview/0/

TWITTER 2017

State of Twitter Home pages in Android and iOS back in 2017.

2017 Twitter Android

2017 Twitter iOS

1st

ITTERATION

Lets experiment and see what works in any case. Starting Small with the intention to mix this 2 beautiful design systems together in harmony and at the same time stay true to the operating system’s nature and keep functionality the way it is for each operating system.


TWITTER TIMELINE

Status Bar: 

Keeping the iOS guidelines by not implementing the translucent effect of material design. 


Navigation Bar: 

Secondary source of navigation. Includes brand identity, content display controls (search), settings menu.

Timeline: I chose the timeline to remain as true as possible to the standard iOS screen in order to maximise the users familiarity. 


Tab BAR / Tool bar: 

This is the primary navigation and must be present on every screen. According to iOS guidelines there are no more than 5 tabs displayed at a time. (Familiarity).


FAB (Material): 

Contains the most promoted action of the screen that the user is focused.


FAB INTERACTION

FAB Speed dial (Material):

The floating action button flings out related actions upon press. 


Take Photos


Take videos


Find images


Find videos 


or Tweet.



2nd ITTERATION


  • Emphasising the Twitter brand presence and stay true to the operating system’s nature and keep functionality the way it is for each operating system.


TWITTER TIMELINE

Navigation Bar:

Implementing more Brand Presence


FAB (Material): Keeping the light blue colour of Fab for branding consistency.


Keeping the Fab interaction as is.




3rd ITTERATION


  • Simplifying the interactions and stay true to the operating system’s nature and keep functionality the way it is for each operating system.


TWITTER TIMELINE

Navigation Bar:

Keeping the brand presence and identity.


FAB (Material):

Making the interaction even more simpler.







INTERACTION

LESS STEPS:

Offering directly to the user in one step all their options.The user can immediately tap on the text field to:

Tweet

Upload an existing photo or video

or take a new photo or video.






— NOTES

Things to consider


  • Visual elements, interactions & motions can certainly be incorporated into iOS apps from Material Design. 

  • As long as they are intelligently incorporated without confusing or undermining the user in the process.

  • It is important to stay true to the operating system’s nature and keep functionality the way it is.

  • Forcing a user to adapt or take on new sets of habits within an app could cause great confusion. (e.g iOS 7)


— THOUGHTS

Personal opinion


  • Good design is about picking the best solution for the intent.

  • And as it may be possible to change and re-train user’s thinking, introducing them to new ways in the end you can only know if it has worked… by testing it.

— THOUGHTS

Food for thought


  • Last thought that came to mind (and still does) is that even though Material Design offers a consistent design language that is lighter, more colourful, backed by solid guidelines that are well-considered.

  • I have to wonder… why several big brands such as Twitter or Facebook have yet not succeeded to create one design that fits both operating systems?

THANK YOU

For more details check out the case study on SlideShare or Download the Sketch file from Sketch app Sources