Nicky Guan


Email: guannicky@gmail.com

Telephone: 415-770-3469

Linkedin: https://www.linkedin.com/in/nickyguan/

Tools:  Sketch, Adobe Creative Suite, Flinto, Framer
What I do    
I'm a full stack-designer and digital artist who uses agile user-centered methodologies in all things I do. I specialize in user experiences, visual design, content marketing, and strategies.
Twitter App Critique
Design Suggestions From A First Time User's Perspective
Being a casual Twitter user who had never used their mobile app gives me a slight advantage of critiquing the app with my fresh eyes. I started out by playing around with the app and noting down things that did not work the way I expected. Then I shortlisted the things that I believe are important to users, and organized the issues by dividing them into categories.


Information Architecture Diagram 

Before going into details, I created a basic UX flowchart to visualize the user flow and the key features Twitter app currently has to help myself better understand the information architecture of the product.





















Top & Bottom Navigation 

Tweet Icon
It is crucial to focus on core product features and build them in the simplest way to meet users' needs. Twitter's core feature is allowing users to post and interact with messages ("tweets") freely. Tweet icon becomes one of the most important buttons in the app, which has to be in the easy-to-reach zone for better accessibility. However, where the tweet icon is currently located does not fully utilize the Thumb Zone rule. 


 











As the Thumb Zone map shows, the most comfortable area for touch with one-handed use is in the lower half of the screen. I suggest bringing the tweet icon down to the natural (green) area to provide painlessly experience and happier users.

Profile Icon
Another thing that draws my attention is the profile icon, which is a thumbnail of user's profile picture. The presentation becomes a distraction to me from browsing through the news. The location of where the profile icon is being placed is also in the least comfortably reachable area for one-thumb interactions as it shown on the Thumb Zone map. 
















Notification Icon
Notification is a feature that needs users' attention. I suggest to move it up from the bottom to the top for alert purposes and also making room for tweet and profile icon which needs to be aimed towards the thumb for better accessibility.






Icon States

Icons are a vital element in any interaction design. Having different icon states not only helps create a smooth conversational flow but also allows users to understand the important information effectively. In the current design, the top navigation icons are always in blue color which looks very similar to the selected state of the bottom navigation icons. That causes confusion of icon usage and breaks the UI consistency.

 





My suggestion is to keep the color of the top navigation icon consistent with the normal state icons in the bottom navigation and keep using Twitter blue for highlighting the selected icons across screens.


Header

Main tweets screen is very self-explanatory in terms of the content. I suggest to fully utilize the top center space for branding and marketing purposes by replacing "Home" text with Twitter logo. 


















Search Bar

In mobile design, the search system is always one of the most important features for users to explore and discover things that are interested in them. The goal is to make search bar clearly visible and prominent. Therefore, I suggest expanding the search bar to reserve more room for the search field. 

A successful search is like a good conversation between you and your users (refer to 20 Best Practices for Mobile App Search for details). Making the placeholder text a hint helps achieve the goal of assisting users to find what they want easily. I suggest changing "Search Twitter" to "Search for people, topics or keywords" to help users better understand what they need to type in order to find the content they look for. 






Preview

After consolidating the suggestions I made above, I ended up with the following mocks.















Note: I do not work for, nor am I affiliated with Twitter. This critique was done to help make me a better designer :)