Visual Design / UI Design
Alphii is a charitable giving platform that uses Material Design components and Material Theming to create a personalized donation experience that is inspiring and easy to use.
The goal of this project was to become familiar with Material Design principles and apply them to the Alphii app. This study follows the basic structure of Material studies - creating a theme, illustrating key design decisions and establishing the brand's visual design language.
Alphii is a charitable giving platform that is linked to a user’s alphii cuff - a chic payment-enabled wearable that allows users to make contactless-payments and automatically round-up purchases to directly fund giving projects.
The Alphii app allows users to manage their payments, personalize interests and discover giving projects to support. Through the app, users can see the impact of their donations and have access to a curated section of impact-focused news.
A new perspective on giving
Alphii’s brand is designed to create a new giving experience and remind people that making a difference in this complicated world can, in fact, be a simple and beautiful thing. To communicate this message, the brand aesthetic is simple, elegant, and aspirational.
Alphii’s UI focuses on creating a personalized giving experience to inspire action.
Users can fine-tune their interests, choose projects, and see how dollars translate into real impact on three different levels: as an individual, as a group of friends and as a collective community.
Alphii features an impact-focused news feed where users receive curated articles based on their personal interests. This creates awareness and educates users about how we can create long-term impact.
The activity section brings the social aspect to giving. Users can see the projects their friends are following, donating to, and can even match their donations. This highlights the collective effort of Alphii and emphasizes the need to work together to create real change.
Alphii’s information architecture is organized into a catalog structure. Alphii’s content is separated into four top-level destinations: Impact, News, Activity, and Profile - which consist of peers that contain subordinate data. After clearly defining user needs, this architecture allows users to quickly navigate to an area of interest from anywhere in the app.
Alphii uses different navigation patterns on mobile (bottom navigation), tablet (navigation drawer), and desktop (persistent tabs).
On Mobile, Alphii uses a bottom navigation to access the four top-level destinations.
Top app bar and tabs
Alphii’s top app bar provides content and actions related to the current screen. The top app bar can transform into a prominent app bar with nested tabs.
When the activity destination is selected, the prominent top app bar contains tabs that are used to toggle between two sub-sections: Giving Feed and Notifications.
Top app bar interactions
Upon scrolling the top app casts a shadow to communicate the content is scrolling behind it.
Users can navigate between tabs by tapping a tab or swiping anywhere on the screen. The content below does not have swipe-able content to ensure the swipe gesture is consistent for users while navigating through the UI.
Contextual action bar
The top app bar can transform into a contextual app bar to adapts to meet user needs on specific sections. It can display branding, navigation, page titles, contextual actions, and an overflow menu.
When the top app bar transforms into a contextual action bar, the bar color stays the same to ensure consistency throughout the UI. The key difference is the top left action icon will either turn into a back arrow button or a close button and remain active until an action is taken or it is dismissed.
On desktop, Alphii uses persistent tabs to access the four top level sections.
Each destination is represented by a text label. When active, the text label is underlined and changes to black. The more section contains a dropdown menu to toggle between additional sections.
On Tablet, Alphii uses a dismissible standard drawer to access the four top-level sections.
Users can open and close the drawer by tapping the navigation menu icon in the top app bar. The drawer remains open until the menu icon is tapped again.
Alphii uses a responsive grid system, with flexible columns and padding. This allows the content to scale and reflow after certain breakpoints.
1. Desktop: Large Breakpoint
Breakpoint Range: 1280 – 1439
Resolution: 1280 x 850
2. Tablet (Landscape): Large Tablet
Breakpoint Range: 1024 -1279
Resolution: 1024 x 768
3. Tablet (Portrait): Large Tablet
Breakpoint Range: 720 -839
Resolution: 768 -1024
4. Mobile (Portrait) Small Handset
Breakpoint Range: 360 - 399
Resolution: 360 -600