Lithium Community

Improving the mobile experience for engaging with online communities.

Lithium Community hero

Info

  • My roles Interaction design, prototyping
  • Company Lithium Technologies
  • Date & duration Jul - Aug 2016 (3 weeks)

Overview

Lithium's Community platform is used widely by brands and enterprises to connect with their customers. However, the product's complex web user interface isn't entirely optimized for mobile.

Designing a reference app

Flow for the SDK reference appFlow for the SDK reference app
Various screen designs for the Android SDK reference app.

The Lithium Community SDK for Android is intended to make it easier for our clients to integrate basic features of Community into their native apps. I worked with a product manager and a senior designer to create the user flow for a reference app that will be shipped as part of the SDK documentation.

The app embodies an ideal workflow for a customer who seeks an answer to an issue with a product or service. It demonstrates key features of the kit: searching/browsing for answers from the brand's support community, composing a question, recieving notifications, and responding to replies.

Walkthrough of a medium-fidelity prototype I made with Marvel.

View Prototype

Removing ambiguity iteratively

With less than 2 weeks left in my internship, I met with the PM and my design colleague frequently for feedback. This iterative process allowed me to polish the flow and address parts of the interface that lacked clarity to the end-user.

Home view comparison
Home view: Instead of grouping the items, I used tabs to distinguish the user's content from community posts.
Browse view comparison
Browse view: I used the chat bubble icon to represent boards, and added right-hand chevrons to indicate that certain items progress the flow.
Thread view comparison
Thread view: I removed the tabs to merge all content into a linear view. Also, instead of using an accented highlight to indicate active state of action buttons, I used a dark gray shade to avoid drawing too much attention. Finally, the reverse label of “Accept” becomes “Unaccept” to clarify its function.

A browsing interaction that scales

While designing the browse view, I encountered an interesting challenge. A Lithium-powered community can contain infinite levels of folders and boards. However, existing UI patterns on mobile for browsing hierarchical data doesn't scale well spatially when diving into a deeply nested structure.

Nested structure patterns
A) retains a clear sense of hierarchy, but it can run into space issue
B) has a linear navigation, but can get confusing when the user wants to go back

I decided to experiment with an accordion-style interaction that emphasize on maintaining the user's orientation in the hierarchy without costing more space. Internal reactions to the Framer prototype I've made were positive although it won't be available in the first version of the SDK.

Demo of the accordion-style interaction for browsing a deeply nested hierarchy.

View Prototype

Retrospective

My contribution to this project laid the design foundation for how our clients may be able to integrate Community into their Android apps. If I had more time, I would perform usability tests on the interface to ensure that the end-users are able to use the core functionalities of the app.

Furthermore, I'd love to test out the accordion pattern with more people to see if it could be a reliable solution for browsing deeply nested information structures on mobile.

Other Work

  • Listing Recommendations Interaction design for Compass
  • Legends Onboarding Mobile design for Axiom Zen
  • Intensive Care First Aid Freelance brand + web design
  • Lithium Community Mobile design