Introduction

Wikipedia app on Android

Wikipedia app on Android

Wikipedia app on iOS

Wikipedia app on iOS

Wikipedia app on kaiOS

Wikipedia app on kaiOS

Designing for mobile apps presents unique challenges and opportunities compared to traditional websites. Our Mobile apps run natively on Android, iOS and kaiOS and have access to system resources that are harder to access within web based architecture. Key characteristics of apps are:

We envision Wikimedia’s apps as essential to meet Wikimedia’s This is is for everyone design principle. Wikimedia apps are designed with the philosophy of mobile first in mind. One of the core principles of it is to embrace the constraints of a Mobile environment and with it, prioritize essential information, as there’s simply not enough room for everything.

Limited connectivity of people in certain areas of the world inspires us to create products that are performant and light on data. When building new features for people for Mobile apps, we strive for excellency in user experience and aim to break down complex existing flows and processes.

Strategy

Apps are mobile first experiences and are not trying to replace existing desktop or community tools. Through the apps, we aim to meet potential users where they are. We are interested in understanding and addressing barriers of those that have been historically left behind, while not compromising the integrity of the workflows of our long-time users on other platforms. Making participation fit naturally the mobile first lives we live.

Apps are a place to experiment. Due to development speed, richer capabilities and unique needs of our user base, we are able to experiment. It is on the apps where we think the future of mobile editing will be discovered. Notably, the apps are where we piloted micro contributions, our most successful editing intervention to this date.

Apps are a forcing function to make our technologies future proof. To provide an example: Right now Wikipedia’s web experience works as a website only and cannot be exported to new mediums. By building on the apps, we create technology that is platform independent and enables next generation experiences. Whether these use artificial intelligence, augmented reality or future technology that is changing our world.

Theming

Cover Plain Minimal.png

As mentioned in the introduction, iOS and Android both have platform specific guidelines. When building apps for the global Wikimedia movement, our goal is to create native experiences for the specific platform. In other words, When designing for mobile apps, guidelines for the platform sit at the top of the hierarchy. Throughout Wikimedia’s product suite, we follow Wikimedia’s Design Principles when designing solutions.

To create a seamless and familiar experience within Wikimedia’s products and services, we apply theming ****that is based on ****Wikimedia’s Visual Style guidelines. Theming allows us to customize the app’s look and feel, to better reflect our product’s brand. Theming is reflected in the entire UI, including individual components, like buttons. Here’s an example of applying Material theming for the Wikipedia Android app:

A standard Material button (image source)

A standard Material button (image source)

Chat toolbar in iOS messaging (image source)

Chat toolbar in iOS messaging (image source)

A themed button in the Wikipedia Android app

A themed button in the Wikipedia Android app

Editing toolbar in the Wikipedia iOS app

Editing toolbar in the Wikipedia iOS app

KaiOS standard progress indicator.

KaiOS standard progress indicator.

We used a planet animation progress indicator to show the vast amount of knowledge available on Wikipedia.

We used a planet animation progress indicator to show the vast amount of knowledge available on Wikipedia.

The design style guide’s color palette is also used in the apps. Since both the Android and iOS Wikipedia app is available in four different reading themes (Light, Sepia, Dark and Black), they are using an enhanced color palette for an optimal reading experience. Check out more details about the color palette for Android or iOS here.