SAY IT,

Branding & UX/UI Design - A case study

In 2014 I collaborated as a Lead Designer with Oxford University Press to the iOS app Say it, an app that shows you how to improve your English pronunciation with personalized audio-visual feedback - includes 30,000 model recordings from Oxford University Press. 

Everything started by participating in the UX research. Working closely with the Developer and the Educational Lead I structured the wireframe of the app. After that, I come up with the UX design that was put in place by the developer. Then I created the logo and brand identity. 

The app was also chosen as the winner of the English Speaking Union's 2016 'President's Award For New Technology In English Language Teaching'.

In 2017 a refresh in terms of colours was made, to give the logo and the app a more up-to-date look & feel.

In 2018 the app was featured in the Chinese iOS app store in the education section.

Phona_01

Branding

The core feature of the app is the visual comparison of the user word pronunciation with the Oxford University Press official pronunciation.

I designed the logo to reflect this with two speech bubbles, the one outside taking care of the small one inside.

When improving the pronunciation of a new language, the lead of a master is the best way to do it.

The font Domine (from Latin word Dominus, master) combines the serif aspect with a bold impact and it has been paired with a font with good legibility on screens, Source Sans Pro.

Phona_02

UX Design

Jenny Dance, the founder, director and educational lead of Phona, wanted to make pronunciation visual and with Tom Mitchell, a senior lecturer in audio-visual technology, they built a prototype app that needed a UI.

I started with sketches to define the main sections of the app and how the user journey would look like. 

Once the wireframe has been decided I proposed to Jenny and Tom few examples of a UI, based on the first ideas of logo too.

The choice of the colours was very important and I wanted to give them the best options for the app. A vibrant colour was important but it couldn't be too flashy.

I pointed out what were the fundamental elements to make the right choice: legibility, untiring and aesthetics. 

Case_study_colours

The final choice was a pale yellow to stand out and a dark green that gives an academic look. I sketched how the colours would work in the app to have a bigger picture.

Case_study_colours_2

The chosen colours were applied to the app icon and all the possible solutions were explored.

Option 1-A was chosen in the end, although in the final release of the app a light to dark gradient was applied to the pale yellow, to make the icon less flat.

Say it app icon options

The colours were applied to the first beta of the app and it started to come to life. On the right, you can see how it went from just white and green, to the pale yellow and more icons were added too.


Case_study_design_03
Case_study_design_01
Case_study_design_02
Case_study_design_04

An important element of the app is the phonetic pronunciation that is available for every word, it spells all the letters and visually tells the user where the stress is.

I proposed different UI solutions, showing the inactive and active status. 

Once the solution was chosen, it was implemented into the design of the app.

Case_study_design_05
Case_study_design_05_anim

Here a final look at the main screens.

UX design

In 2017 the logo got a refresh in terms of colours, ready for v2.0 of the app, released on 2018.

Phona_03

Selected Works

Say itBranding & UX Design - A case study

MoleskineScreen printing, personal projects

HyperXGraphic Design, Branding & Social Media

Kingston TechnologyGraphic design, visual communication and social media

Pregy by LafargeBranding and Art Direction

GEOX NETPrint campaign

UNITAREditorial Design

Central GrouchoPrint campaign

Doria hotelsIdentity, Branding and Advertising

Studi di avvocatiBranding & Identity

Tube BrandsInstagram feed

ChocolatPackaging design

Stop-motion portfolioStop-motion video with print campaigns

ProfessioneCasaTV commercial

© Ruggero Gualdesi |  Terms & Conditions

© Ruggero Gualdesi |  Terms & Conditions

© Ruggero Gualdesi |  Terms & Conditions

© Ruggero Gualdesi |  Terms & Conditions

© Ruggero Gualdesi |  Terms & Conditions

+44 (0) 778 706 6206

+44 (0) 778 706 6206

+44 (0) 778 706 6206