iPhone X White Copy 423.png

Toronto Star

Product Design, Typography, UI/UX

App redesign concept for Toronto Star, news app. The project aims to improve the typography and the user experience of the existing app while keeping their branding consistent.

 

COURSE 

Typography II
Year II

Type

Typography, UI/UX
Individual Project

Timeline

December 2016
(Last updated November 2017)

Tools Used

Adobe Illustrator, Adobe InDesign, Sketch and InVision

 


Design Process

 
 


Studying the Current app

I started with overviewing the current 'Toronto Star' app and their website to study their typographic treatment, branding and colour palette.

Link: Toronto Star
 

 

Screens from current 'Toronto Star' app

 
 


My Observations

The objective of this project was to design four screens of an existing chosen news app. The screens included the splash page, news landing page, an article page and news landing page with navigation overlay. My observation for the current app were:

  • The logo on the splash page seems quite big and loud.

  • The typographic hierarchy is very inconsistent.

  • The visual elements lack harmony. The icons are way too large and don't follow the same style.

  • Needs a more strategic way to reflect their branding successfully across the app.

  • In terms of user experience, the navigation menu needs a complete redesign.

 
 
 
 
 


Sketches

Started out with some basic wireframe-layout sketches for different screens

 
 


preliminary Process

Rough layout concepts for different screens
 

 
 
 
 
 


Icon Design

I decided to create some icons for the navigation menu to help create an easier user experience. 
 

 
icons.png
 


Final Deliverables

 
 
 
 


Splash Screen

Simplified the splash page by reducing the logo scale and added an overlay image that can be changed over time to keep the design fresh.
 

 
 
 
 


Newsfeed

A separate section dedicated for featured news. 

View the most recent articles first along with shares and comments directly on the news feed.

A horizontal navigation quickly check the most current news for each category.
 

 
newsfeed
 
 
 
navigation
 
 

 

Navigation menu

Use of icons to visually represent different news categories aiming to help improve user experience.

The design also helps reflect their brand better.

 
 
 
 

 

Article Screen

Improved the typographic hierarchy

Share and bookmark articles, view comments and change type size when viewing your articles
 

 
 
 

 

Live prototype

 

 

 

News & Images Credit

1. Aspensong may well tempt outdoor enthusiasts
News Credit: Carola Vyhnak, Toronto Star     
Image Credit: Gibeon Photography

2. Jia Jia, world’s oldest panda living in captivity, dies at 38
News Credit: Associated Press, Toronto Star     
Image Credit: PhilippeLopez/ AFP/GETTY IMAGES

3. Pope decries ‘virus’ of polarization over race
News Credit: Frances D’Emilio, Toronto Star     
Image Credit: Osservatore Romano/ AFP/GETTY IMAGES

4. Souped-up sites: tourist spots up the ante offering thrills
News Credit: Jonathan Forani, Toronto Star      
Image Credit: CN Tower, Not specified