the challenge

The Punjabi Dictionary app was created 9 years ago and was the first of its kind in the iOS realm. It features over 40,000 words and phrases with transliteration in English, Gurmukhi, and Shahmukhi (Urdu) and is useful for learning and expanding one’s Punjabi vocabulary. Since the app’s last update in 2017, iOS has seen a lot of changes both in appearance and features— from the increase in screen size to the addition of widgets and prioritization of accessibility. The current state of this app is in need of a redesign.

I designed a “word of the day” widget that modernizes the original app interface to fit with the current iOS 15 paradigm and creates a more accessible and aesthetic learning experience.

my process

define 📌️

Initially, my focus was solely creating a word of the day widget that captured the essence of the app. After thinking about the contents of the widget and how users would interact with it, I realized that I had to start the design process at the very beginning —redesigning the dictionary entry page.

identifying the pain points

screen size - empty space as a result of shorter screen size
dull Interface- lack of visuals creates a boring experience
speak discoverability-long press to find speak feature
no dynamic type- not compatible with vision accessibility settings
display appearance - not compatible with dark mode display settings

ideate 🖌️

Defining the pain points in the app’s main word entry page helped me visualize what a modernized, more accessible version of the page and widget could look like.

The issue with the screen size and dull interface were more or less easy fixes; however, trying to find solutions to the other pain points would require brainstorming and a good understanding of ︎ Apple’s Human Interface Guidelines.

designing for accesibility

dynamic type

To design with dynamic type, I needed to consider the motion of text on the screen as its size increased in relation to other text.

How can the type provide a comfortable motion for the eyes to move while reading & preserve information hierarchy ?

Since we’re working with different written languages, it was important to keep in mind their reading styles. For instance, Shahmukhi is read from right to left.

I found that if each piece of text was on its own baseline, it could scale properly and maintain readability as dynamic type settings changed.

display appearance

(dark mode/ light mode)

Contrast in colors plays a huge role in toggling between different display settings. I explored having simpler colors, those of the current iOS system, that could transitition seamlessly from light mode to dark mode.

speak discoverability

The speak feature needed to be easily discoverable for the user to hear the correct pronounciation of each word. The app currently required long press to find that feature, but, I felt that there needed to be a clear visual cue to indicate that the action was available and had been completed.

I considered adding a speaker ︎ icon since it is an intuitive element that is seen across other online dictionaries and text translators.

︎

Punjabi Dictionary App 📔

a widget design for the first iOS compatible Punjabi Dictionary app

the challenge