Visuals              About

Punjabi Dictionary App 📔

a widget design for the first iOS compatible Punjabi Dictionary app 

Role              UI/UX , Visual Design
1 week (2021)
Figma, Procreate, ︎ UI 

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.

 the widget  
After sketching out the accessibility changes to the dictionary entry page, I felt confident in designing the widget.

I knew that it would consist of all the same design elements and features as the main interface, but the question became—how can I make the widget more visually appealing?

design 🧩

My final designs fit the iOS 15 design paradigm better than the original app design and prioritized accessibility.

display appearance 

dynamic type
© ardaas 2021. All Rights Reserved.