Collection: Part 2: Graphic and Communication Design

App Store

APP STORE

Details

"Designing how ‘users’ experience, interact, navigate, use or orientate themselves within websites or apps is a growing area within graphic and communication design."

Details

In this project, I designed and developed a concept for the app 'Escape', which includes a series of screen designs and a brand for my app. Initially I worked in a group developing ideas based upon a given user task: connect/disconnect. We chose 'Citymapper' as the starting point to represent our interpretation of connect since this navigation app would help guide us to our preferred destination, connecting us to the city. We created a series of 'user journeys’ that respond to the user task. In my individual response to the opposing word 'disconnect', I developed a concept for 'Escape' basing on the navigation function of the original 'Citymapper'. However, users cannot choose the destination, only their specific mood and the app will take care of selecting the most suitable locations that are closest to them. It provides total privacy by eliminating all sharing options disconnecting from all social networks. The app would help users disconnect to the outside world by taking them to peaceful locations that will allow them to rest and get away from the hassle of everyday life.

Details
Details

Escape: User Journey [click to enlarge]

Details

RESEARCH

Details

Bold, graphic, intentional

The foundational elements of print-based design – typography, grids, space, scale, color, and use of imagery – guide visual treatments. These elements do far more than please the eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create a bold and graphic interface that immerse the user in the experience.

An emphasis on user actions makes core functionality immediately apparent and provides waypoints for the user.

Details

The Colour Blue

Details

5 Simple UX Principles

"As a UX designer, it’s our job to be inside a user’s brain. We need to look at design from the mindspace of a user (actually, lots of users) and squash potential problems or confusion. It’s always a challenge to act with the user in mind. Understanding how and why to make UX decisions goes a long way in explaining things to others on the team, which goes an even longer way in getting said UX decisions into the final product."

1. Digestibility

Good design is easy to digest—the brain shouldn’t have to expend a ton of energy to figure out what the heck it’s looking at.. This goes beyond clear, easy-to-read copy. People sometimes need guidance to make decisions, so a menu with a list of 12 inline items may seem daunting. Organizing with some hierarchy (size, color, icons) can help highlight the more common choices, which allows someone to find what they’re looking for faster. Another good example of digestible design is the new user guide, often presented as staggered tips that a person can process one at a time. But imagine the opposite, hitting a brand-new user with a whole stack of instructions, removed from the context of the product. No one likes a confusing surprise. Consider all the decisions you’re asking someone to make with your product to get to the bottom of the funnel.

2. Clarity

Good design is honest. Aside from understanding the words in your value prop, you need the user to understand the actual value. Users aren’t going to click “Buy now” if they can’t figure out what you’re asking them to pay. This may sound cheesy, but a good plan is to simply follow the Golden Rule. Explain things like you’d want them explained to you. Make things as clear as you can. You know what you’d expect out of the products you choose to use, so don’t you dare build something less.

3. Trust

Good design is easy to trust. Before asking someone to complete an action, make every effort to help them understand why the task is needed. Consider Uber. They’ve made catching a ride so easy that a 100-year-old industry is now in chaos. The app saves your payment info, which you might not feel comfortable exchanging with a stranger, and facilitates a trustworthy, painless transaction. Removing doubt will create a growingly invisible experience. As decisions require less and less resources, using the product becomes easier and more enjoyable.

4. Familiarity

Ground-breaking design is awesome, but design that converts is better. New frameworks and flashy plugins might look nice on Dribbble, but if no one is clicking the “buy” buttons, you’ve got a problem. Platform guidelines exist for a reason. Using familiar patterns, icons, and presentational styles is a great way to look native, even if you’re not. Testing your solutions on actual devices goes a long way to ensuring things feel at home in each environment, which is where a tool like InVision shines. Pretending to be a user is easier when you’re not also having to pretend to use a device.

5. Delight

It’s been said that an idea isn’t enough anymore, that execution is what wins the war. Ironically, the more the team executes, the less the user has to. The more simplicity you can bring to a complex problem, the more delighted the user will be with your solution.The ultimate delight is when someone forgets your product is a “product”—where it’s so useful that it doesn’t even read as a product anymore, just simply as some useful thing in a person’s life. 

Take the user’s side

Building thoughtful products with clear intentions shows that you care, makes choices more comfortable, and leads to a better overall experience. It’s easy to judge the user experience of your own product as long as you’re honest with yourself. Walk a mile in someone’s shoes, considering each action in your product from the brainspace of a tired, weary person. Would you click next?

source

Details

I have never realised how much thought and effort goes into creating an effective app which makes me appreciate all the useful apps that I regularly used. I began to notice my own journeys through the apps and on average only about 5-6 clicks would be enough complete a single action unless it is a photo sharing apps like Instagram where a lot more editing tools are offer. Most apps I used tend to have quite similar layout and colour scheme such as blue and green. I believe that these two colours are so universal and so neutral that nobody would mind seeing them all the time because we do see them all the time, in the sky or on the trees so we are very used to them. The strap lines for the apps tend to be very short and concise. Even though I actually have never read any of them before, now that I have, I think they really gave an honest picture of the app as a whole. Citymapper and line has almost the exact same colour scheme which is weird because I never really notice that before. Citymapper has quite a long description because it also incorporates praises and great reviews which sometimes is good because potential users will know how great the app is from the current users.

Details
Details

Coffely basically is a remote control app that allows you to tell your modern coffee maker when to make coffee. It also stores your favourites and you can set alarms. I really like this app because it adds another function to the smartphone and turn it into a remote control that can control household appliances. It also keeps count of how many cups of coffee you have made. The app makes it so convenient for busy people who do not have time to make coffee in the morning. The design is minimalistic and beautiful. It is made to be very simple to navigate around. The theme is consistent throughout the app and the dark colours used goes suits coffee.

Details

USER JOURNEY

"A user journey is the experiences a person has when utilizing/interacting with something (typically software). User Journeys describe at a high level of detail exactly what steps different users take to complete a specific task within a system, application or website. This technique shows the current (as-is) user workflow, and reveals areas of improvement for the to-be workflow. They are focused on the User and what they see and what they click on."

source

Details
Details
Details
Details
Details

TALKS: Adaptive Path

Details

I like the layout of this starter page. The font is big and bold at the centre with the logo above it. The simplicity of the login system interface makes it very easy to understand and use. It is very clear and familiar. I particularly like the minty colour of the background that gives it a refreshing feel.

Details
Details

In this example, I like the way the different travel routes are presented so simply with thin straight lines creating a sequential map that is easy to read and understand. It tells exactly the time plan, which vehicle and how long it will take for each of the days. The background is a darkened blurred image that makes it easy to read the white text.

Details
Details
Details

This Bikester app was able to find a way to display heavy statistics and data visually and make it very easy to understand. The design is very aesthetically pleasing. I like the bright orange colour on the white background because stands out very well and just makes the statistic a lot easier to see. They keep the colour scheme consistent through the app, orange and mint green to create an identity so that users will be familiar with the app quicker.

Details

STRAPLINES

"A strapline is supposed to encapsulate everything about your business, telling customers about who you are, what you do, and more importantly why that’s great for them – in just a handful of words. You may never have thought about straplines, but if you look around, they’re everywhere – some brilliant, some misguided, and some utterly forgettable."

Details

APP: Facebook

download.php?file=1719026&view=169262&embedded=1&textbox=1719025

Description

Keeping up with friends is faster than ever.

  • See what friends are up to
  • Share updates, photos and videos
  • Get notified when friends like and comment on your posts
  • Text, chat and have group conversations
  • Play games and use your favorite apps

Read our Data Use Policy, Terms and other important info in the legal section of our App Store description.

Continued use of GPS running in the background can dramatically decrease battery life. Facebook doesn?t run GPS in the background unless you give us permission by turning on optional features that require this.

source

Details

APP: Line

download.php?file=1719027&view=169262&embedded=1&textbox=1719028

Description

LINE reshapes communication around the globe, bringing you closer to your family, friends, and loved ones?for free. With voice and video calls, messages, and a limitless variety of exciting stickers, you?ll be able to express yourself in ways that you?ve never thought possible. With over 600 million users worldwide, LINE?s constantly expanding platform will continue to provide exciting new experiences and convenience.

LINE?s Main Features

  • Free voice and video calls: Use your PC or smartphone to keep in touch with friends and family both at home and abroad, or hold a business meeting on the go!
  • Instant messaging anywhere: Conversation is just a tap away. Spice it up with LINE?s exciting collection of stickers or send pictures, videos, and even GPS coordinates to let your friends know what you?re up to.
  • A full-featured social networking service: Post your day-to-day activities to your Timeline or comment on your friends? posts.
  • Group chats: Share important information with your co-workers or talk about mutual interests with your closest friends.
  • Find new expressions in the Sticker Shop: The world?s largest collection of stickers features famous and unique characters from around the world to let you express yourself just the way you want to.
  • Make international calls with LINE Out: Make international calls to mobile phones and landlines at competitively low rates. You can even call friends who aren't LINE users (available in certain countries only).
  • Get connected to new apps: LINE provides a gateway to entertainment and lifestyle apps that will keep you entertained and bring new convenience to your life.

We recommend that you use LINE with iOS versions 7.0 or higher with an iPhone 4 or above.

For more information about LINE, check out our official website : http://line.me/en/

source

Details

APP: Citymapper

download.php?file=1719029&view=169262&embedded=1&textbox=1719030

Description

Citymapper is the ultimate award-winning transit app making complex cities easy to use!
A to B trip planning with ETA including all modes (subway, bus, rail, ferry, bike/car sharing, Uber). 
Real-time departures. Transit maps. Line status and real-time disruption alerts. Uber integration. Bike routing and live bike share info. Constant updates. Everything you need -- and may not even realize you need -- to manage your life in the city.

COVERAGE
USA/CANADA: New York City, San Francisco Bay Area, Los Angeles, Washington DC, Chicago, Boston, Philadelphia, Toronto, Vancouver, Montreal. 
ASIA: Singapore, Hong Kong, Tokyo.
EUROPE: London, Manchester, Birmingham, Paris, Lyon, Berlin, Hamburg, Brussels / Belgium, Amsterdam / Randstad, Madrid, Barcelona, Milan, Rome, Lisbon.
LATIN AMERICA: Mexico City, São Paulo.
EXPANDING: VOTE for your city and we'll add it citymapper.com/nextcity

PRESS REVIEWS
"Citymapper is, quite simply, the best travel app to be introduced to New York City" - New York Times

"Now forget about Google Maps because Citymapper eats Google Maps for breakfast, lunch, and dinner.? - Tech in Asia

MAIN AWARDS
* Apple's 2014 and 2013 Apps of the Year 
* Grand Prize Winner - MTA New York City App Quest 2013
* Best Overall Mobile App (Mobile World Congress Barcelona / GSMA 2014)
* Winner of Grand Prix, Best Transport Startup and Best Mobile Startup - 2015 Europas Awards
* Special Prize Winner - Tokyo Metro Competition 2015

THOUSANDS OF 5-STAR USER REVIEWS
* "Best app on my phone."
* "It?s reason alone to get an iPhone. It's that good."
* "I'm practically married to this app."
* "Don't know how I lived without it."
* "This app makes me warm inside."
* "The only true five star app."
* "Support for the SF Bay Area is particularly impressive because it aggregates all transit systems imaginable (BART, Caltrain, MUNI, VTA, etc.) into one seamless app."
* "Best app for getting directions and ride on the MTA New York City."
* "Life changing. This app really changes the way you travel."
* "This is my favorite transit app. Full-featured and a breeze to use. I really appreciate the Uber integration."

KEEP IN TOUCH
If you have questions or feedback, please email us at support@citymapper.com
Like us on Facebook: http://facebook.com/thecitymapper
Follow us on Twitter: http://twitter.com/Citymapper
Visit our website: http://citymapper.com

Please note that the app requires data access and works best with GPS / location on. Also, continued use of GPS running in the background can dramatically decrease battery life. Background GPS is only used when in ?GO' navigation mode.

source

Details

Comments


    Add comment

    Fields marked by '*' are required.