In this redesign challenge, I will design a mobile application that needs to be refreshed or redesigned to the user interface. I will be focusing primarily on the UI aspect of the application including typography, iconography, color schemes, touchpoints, button sizes, gestures, and overall user clarity. The application name, main brand identity, and contents will remain the same (images can be updated). Some basic UX would be adjusted but without breaking the UX flow with UI.
Oxford Dictionary of English is an dictioinary application by Oxford University Press.
At first glance, this application appears to utilize the blue tone color, which represents intelligence and trust - the essence of a dictionary. The application uses a flat design style and a simple layout. Reading from top to bottom will help users keep track of the word they are searching for. However, the layout of the app has some UI issues, such as small clickable icons, components that are close together, which can make it difficult for the users to tap or click. There were some icons that looked the same but were used for different purposes, and they were placed next to each other. Some screens contain repeated elements. One point that is worth pointing out is that some screen which is text-rich are hard to read. Due to a low hierarchy, the text appears in large chunks and is difficult to read. As a dictionary app for mobile devices, hierarchy and legibility should be top priorities.
The first stage of the design process is taking screenshots of the app. I want to see what UI style can be used, how it can be redesigned, and how it can be more beneficial for the users.
Glassmorphism is a trendy UI style for 2021 and I thought it would be fun to use that on a flat design application to create a contrast with the old style. Glassmorphism is achieved by placing floating objects over gradient backgrounds to create the illusion of glass. An outline stroke of 2px with low opacity mimics the edge of the container, giving it a more glass-like appearance.
The typeface I chose for this project is Poppins, which has good readability due to its x-height since the user will be reading a lot from the screen and the contents need to be clean and easy to read.
For consistency between print and mobile versions, I use the same brand's color scheme, but add some bright colors to lift the mood and this also brings a modern look to the app.
In order to maintain consistency across print and mobile versions, I use the same brand's color scheme, but add some brighter colors to lift the mood and make the app appear more modern.
On the home page - the first and most important screen of the app - we have Search, Word of the Day, Recent, Invite and Rate Our App. I want to make Search the centerpiece of the app. To make it easy to read and follow, I decided to keep the reading flow from top to bottom. On the mobile app, audio and camera searches are two unique features, but in the original design, these icons were small and placed close together, so the users were more likely to misclick. To get more attention from customers, I have made the icons bigger and added a contract to the background.
In the "Word of the Day" screen, I changed the calendar into a slider so users could easily see another day. The content of the screen has been enhanced with higher font sizes and different fonts families and colors in order to create a clear hierarchy of the content. It was an interface issue I encountered on the original screen where there were two back arrows very close to each other (one for going back and one for changing the day), so I separated them with different styles. The lighter-colored arrow indicates that the user can return to the previous day to check the vocabulary.
In container boxes, I use frosty white glass, but in list boxes, I use gray glass to emphasize the white border of the box and indicate it can be clicked. The titles of this screen and all others are all capitalized.
On this screen, I found that there is a lot of content, making it look heavy and even confusing to the user. I decided to break them up into parts of the content and highlight the main part that the user looking for. The word they selected appears in a blue box and white text so users can quickly identify where they are. The next line shows the pronunciation of the words, along with a speaker icon that indicates they can hear the pronunciation. The dots have been removed from the box and have been placed on top, as they function more like the information in the general settings. By leaving it unchanged when there are long words or idioms, the user is more likely to remember where they are. Due to the X button having the same function as the Back button, I removed it to save space on the screen.
For container boxes, I use frosty white glass, but for the list type, I use gray glass in order to emphasize the white border and indicate that it can be clicked. This screen title, as well as all others, has been capitalized. The scroll bar has also been increased in size and moved out of the box.
To indicate to the user which color theme we are currently using, I change the layout of the color option on the Settings screen. As the header of this screen is different from other screens for no reason, I have made it the same to maintain consistency.
In order to maintain consistency, the Suggestion screen is a combination of other components that appear on another screen.
Every design decision should have a logical reason and be able to explain it. In design, there is a lot of scope for creativity, but logical and scientific thinking is also crucial. Even though I enjoy creating beautiful products, I also believe that every detail in the user interface should serve a purpose and provide value.
