GUIQUAN

UI & INTERACTION DESIGN • SHANGHAI (REMOTE) • JUNSEP 2014

GUIQUAN

UI & INTERACTION DESIGN

My first freelance design was a social & news app for a news website named Hexieshe, targeting anime and manga enthusiasts in China.

THE BRIEF Starting as a WordPress blog, Hexieshe had now grown into the most influential Otaku info outlet in China, covering news about anime, comics, games, manga and light novels and extending collaboration with multiple vendors, both domestic and overseas.

Hexieshe already had its own news app that delivers the website content. To further grow its user base, Guiquan is a separate app that is to foster new interactions distinct from comments and replies, punctuated with coverage by pundits and critics. I was the only designer on the team along with a programmer.

For practical reasons the client wanted to start with an Android app. And just as I received the project brief, Google previewed the Material Design guidelines in 2014 Google I/O. I decided to be the first ones to try it out while managing to cram design and delivery in a brief two-month period.

Back in 2014 Summer I was being a letterpress printing intern by day and freelancing by night. In addition, the Material Design guidelines were much messier and vaguer back then with very few support for non-English languages. With limited time and great uncertainty, I started.

PROTOTYPING Though I had not yet received school training on mobile design, my first instinct was to make a plan about the desired functions with the client. After some clarification, I came up with an information hierarchy and some preliminary wireframes.

Since the project’s time frame was very short, I proceeded to the medium-fidelity stage soon after the wireframes were satisfactory to the client. I took the “news” portion as the priority, and made some mockups.

Main screen. The social sections are the second (Groups) and third (Columns) tab on the top bar.

Splash screen for a feature article. As the page is scrolled down, the background image fades away.

Post content under the groups section. The bottom FAB is for posting new reply to the main post.

Upon tap, the FAB would morph into a composition modal (white space is for the keyboard at bottom).

I did not realize the lack of Chinese support in Material guideline, but did experience the struggle trying to define my own due to its lack thereof. East Asian scripts have denser visual greyness, and consequently preventing the use of certain Material patterns such as small cards. Sometimes because the line heights are for Latin letters, Chinese characters would collide. I did a lot of “violation” on my own to accommodate. Fortunately, Google has now finally updated their guideline and provided extensive coverage on each script’s typography.

However, the client wanted to increase social engagement, worrying that prioritizing news might still cannibalize the traffic of their existing website content. And so I made a second version:

Main screen (Updates). The user is seeing shares by other users at first, instead of straight editorial content.

Second section (Following) took cue from Twitter’s Activity and shows other users’ actions (change avatar, &c).

Collections. These are editorial content grouped by different themes, e.g. new animes each season or indie movies.

Within each collection, every editorial piece has a discrete card. User can switch collections from the top bar.

Upon present reflection, I do not feel it is a good idea to place the switch for different collections at the fourth screen. It breaks the user’s mental model of entering and exiting into a list item (the third screen). The second screen, which shows user activity meta-data, could probably be merged into the first one. The reason not doing it was because Updates was only for other users’ content, while Following could contain mixed information from both other users and editorial recommendations. Also, new content from a public figure who the user follows would only appear in the Following screen.

EXCURSION ON CARDS The client was also utterly fascinated by the concept of cards. I must remind my readers that the vague and fragmented Holo designs flooded the Android app market back then—at least very so in China. As a result, when Material design debuted in summer 2014, the client wanted everything to be in cards, sometimes to a degree that might be too much. Below shows three directions per demand:

The client loved the third one the most. But to my understanding, it was a monstrous hybrid of iOS and Android. Here was a vivid example of how visual design has direct impact on interaction and information hierarchy. In the world of Material design, every page component is flat and stacked on each other, as reflected by the strong emphasis on shadows and Google’s keyword of “elevation.” In comparison, Apple’s Jony Ive has made a famously apt analogy of the iOS screen being an “infinity pool.”

In the newest version of Material guideline, Google has even gone so far as to defining the specific “height levels” on which each page element floats. Indeed, elements can change, but each kind only morphs at its own dimension. This metaphor has a very important consequence: there is a definite, static “bottom” upon which layers and layers of quantum paper rests and transforms.

MATERIAL GUIDELINE ON ELEVATION LEVELS

SOURCE

MATERIAL GUIDELINE ON ELEVATION LEVELS

SOURCE

INFINITY POOL VS DEFINITE BOTTOM

INFINITY POOL VS DEFINITE BOTTOM

Top: Material guideline on elevation levels; Bottom: Infinity pool versus definite bottom (Source).

On the other hand, iOS makes no such requirement. Information can surely rest on a definite bottom like Instapaper or the stock Photos app, but it does not have to as long as the navigation is easy to comprehend and use. A good pair of examples is each’s browser. Safari on iOS employs the card stack, but the cards can go on for infinity as if they are floating in ether. Chrome on Android follows the same visual metaphor, but website cards are clearly stacked within one view. There is no extension into infinity or content being cut off by the screen border; the black background acts as the bottom.

Unlike iOS, Android users have to see the “bottom” on a Material app.

And in this exploration, what I am doing is exactly the violation of this implicit understanding that the user has to see the bottom on a Material app. I spent considerable time convincing them that not only did the card concept not fit with every type of content, it was also a bad idea to simplistically merge one’s visual metaphor in the other. Especially in the third screen: the user can only do back and forth scrolling, since it would be weird to swipe away cards among other stacks (not that one could, since it was other users’ content). It also greatly reduced the user’s context, whether chronological or algorithmic, since he/she is only seeing one piece of content at a time. Finally, it was a very inefficient use of screen space, since a large margin had to be reserved for emulating three-dimensional space, thus requiring the user to tap and expand a small card to see its full details. From both visual and interaction perspectives, it was a horrible choice that I was glad I avoided.

Main screen, with a Facebook-like feed.

Screen for composing a new status.

List of discussion groups (same layout as the editorial content section).

Posts in a group. Because of the bottom bar, FAB is replaced by a top bar button.

Screen for composing a new post within a discussion group.

Within a single post, showing the main post (cut off at top) and replies.

I also took on the swipe gestures trend, whose discoverability I now doubt…

Screen for replying to comment, right after swiping on one of the comments.

Inside a collection of editorial content are similar cards that could expand.

I also provided redline specs of each card style (partially shown).

I learned quite a lot from my first remote freelance work on a mobile app. Above all I have felt that the visual representation of content and content itself is so tightly linked that it is hardly possible to discuss content without addressing its medium, and vice versa. Both Android and iOS’s visual styles are driven by a different underlying metaphor that dictate the possibility and paradigm of user perception and (more importantly) interaction.

PREVIOUS
CHINESE IDIOMS

PREVIOUS
CHINESE IDIOMS

If I could go back in time, I wish I had drawn more paper wireframes than Sketch mockups. That way I could have enjoyed two or three more rounds of iteration, as there were still plenty of uncertainty regarding visual details and interaction patterns. For example, I used swipe gestures—is it possible to extend it further? Or, does it even conform to the ideals of Material design?

And last, now I know to be always cautious with the novelty urge.

PREVIOUS
CHINESE IDIOMS

NEXT
IDIOMS