Design for a Great User Experience - IU Mobile Revamp (Part II)
Cards vs. Lists
I got into the age-old debate of cards vs. lists design right off the bat. The homepage displays two most widely used features by IU students - class schedule and dining information. Lists usually handles large amount of information well, but do we use lists design over cards here? What's the sacrifice?
According to IU Dining, IU has 30 dining locations including campus cafes and convenience stores. An unsorted gigantic list of dining locations would definitely give users headache, and swiping through seemingly countless cards is unpleasant and absurd as well. In this case, an efficient location-aware design is an great alternative solution.
This section will show the nearest dining locations as well as opening hours. Users will be able to tap "View All" and find their preferred dining location when needed. The "watermark" on each card helps users to identify the type of the dining location at a glance:
Feedback System Design
Feedback form becomes standard for all kinds of websites and mobile applications, but not all feedback forms are created equal.
The lack of guidance gives users more leeway to provide feedback; however, it would be harder for developers to obtain constructive feedback. To satisfy both groups' needs, I made the following feedback form:
"I really like..." signals users to input their favorite features of the app, while "I wish I could..." kindly asks users for suggestions. Since IU Mobile will be first released as an demo application, the built-in features will be half baked. Feedback from "I wish I could..." section will help us to finalize the features for the official release. The feedback form also has its own tab page for maximized discoverability, thus we are more likely to receive feedback from our testers.
Going Against the Guidelines?
Card designs with heavy drop shadows have been popular for years, and it's still trending in 2018 for a good reason. Elevated cards themselves are metaphors - maybe there is something under it, or maybe the cards are expandable so that they would reveal more information. Both Google and Apple encourage designers add "depth" to their designs. Apple recommends designers use minimal bezels, gradients and shadows to make the interface "light and airy". However, most of the time designers are overusing shadows which defeats the purpose of having them. Elevated cards are often viewed as interactive elements - when you tap on a card, it brings you to another section of the product.
On the homepage of IU Mobile, cards are just aggregations of information under different categories. The only interactive elements on the cards are the labeled buttons; thus, it is necessary to eliminate any confusion on whether the cards are tappable. I achieved the goal by adding boarders and reduce shadows to the cards, so that they do not stand out as elevated visual interests. As for the interactive cards on the "Discover" page, I kept the flat design since there is no excess elements on the cards themselves, so there is very little room for mistakes.
Designing for Accessibility
I got asked this question a lot by my peers: How do you choose colors?
There are always limitations for color choice. In this case, the official IU color, "Crimson Red", has to be the primary color of any digital product that IU provides. Hence, the only creative space we are given as designers are secondary colors. I went with light blue for two reasons: first, it complements well with the saturated crimson red; second, it adds consistency to the overall design even if someone is colorblind, which also makes the product more accessible for the minorities.
From left to right: normal vision, Deuteranopia (approx. 6% of the entire population experience this type of color deficiency), Protanopia (affects 1% of the population). As you can see, there is not much of a difference among their views.
This is an ongoing project that is subject to change.