OFIR ATIA
OFIR ATIA
Three-Screens-4.jpg

Alphii Visual Design

Visual Design

 

Visual Design / UI Design

 
 
 

Alphii

 
 

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.

 
 
All-Components-Page.jpg
 
 

About

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.

 
 
Isometric-Right.jpg
 
 

Impact Driven

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.

 
 
 

Product Architecture

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.

Navigation

Alphii uses different navigation patterns on mobile (bottom navigation), tablet (navigation drawer), and desktop (persistent tabs).

 

 
 

Mobile Navigation

On Mobile, Alphii uses a bottom navigation to access the four top-level destinations.

1) Standard Bottom Navigation to access the four top-level destinations. 2) When navigating forwards - the bottom navigation transforms into a single action bottom app bar to improve browsing user experience.

1) Standard Bottom Navigation to access the four top-level destinations.
2) When navigating forwards - the bottom navigation transforms into a single action bottom app bar to improve browsing user experience.

 
Each destination is represented by an icon and paired with a text label to ensure clarity. 1) Active Icon 2) Active Text label  3) Inactive Destination 4) Badge to notify user of important information

Each destination is represented by an icon and paired with a text label to ensure clarity.
1) Active Icon
2) Active Text label
3) Inactive Destination
4) Badge to notify user of important information

 
 
 

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.

Tab Interactions

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.

1) Regular Top App Bar 2) Prominent Top app bar with nested tabs.

1) Regular Top App Bar
2) Prominent Top app bar with nested tabs.

 
 
 

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.

1) Contextual app bar with content selection 2) Contextual app bar with reverse peer navigation

1) Contextual app bar with content selection
2) Contextual app bar with reverse peer navigation

 
 
 

Desktop Navigation

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.

Desktop Navigation - the header menu remains visible as you scroll down, and the page’s content flows beneath it.

Desktop Navigation - the header menu remains visible as you scroll down, and the page’s content flows beneath it.

 
 
 

Tablet Navigation

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.

 
 
 
 

Layout

Grid System

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
Window: Medium
Columns: 12
Gutters: 24dp
Margins: 76dp

2. Tablet (Landscape): Large Tablet

Breakpoint Range: 1024 -1279
Resolution: 1024 x 768
Window: Medium
Columns: 12
Gutters: 24dp
Margins: 32dp 

3. Tablet (Portrait): Large Tablet

Breakpoint Range: 720 -839
Resolution: 768 -1024
Window: Small
Columns: 8
Gutters: 16dp
Margins: 24dp 

4. Mobile (Portrait) Small Handset

Breakpoint Range: 360 - 399
Resolution: 360 -600
Window: Xsmall
Columns: 4
Gutters: 16dp
Margins: 16dp

 
 
 

Elevation

Alphii uses a combination of shadows and transparency to express elevation and put an emphasis on key elements of the UI.

Key components like the the top app bar and bottom navigation bar use shadows allowing content scrolling behind them. This puts an emphasis that they are above the content and are persistent throughout the UI ensures the users have a consistent experience navigating the UI.

Alphii also uses transparency in key to show elevation. For example the top app bar is 95% opacity to show the content is scrolling behind it. Combination of shadow and transparency allows users to guide the eye, express hierarchy with little distractions.

Top App Bar Transparency & Shadow

Top App Bar Transparency & Shadow

 

Visual cues for selection

Shadows are used as a visual cues to emphasize interactive components on a page. For example, on the impact page when user is horizontally swiping through giving projects, when cards are hovered or active, a subtle shadow treatment is applied to raise the component from resting (2dp elevation) to selected (8dp elevation).

Giving project card selected (8dp)

Giving project card selected (8dp)

Scroll horizontally to reveal more giving project cards (resting at 2dp)

Scroll horizontally to reveal more giving project cards (resting at 2dp)

 

Scrimmed Backgrounds

Navigation drawers and dialogues use a scrimmed background to isolate the component and emphasize that they are above the rest of the UI.

 
 
Dialog with scrimmed background

Dialog with scrimmed background

Bottom drawer with scrimmed background

Bottom drawer with scrimmed background

 
 
 

Color Theme

Primary Colors

Alphii’s primary colors are black and white. This allows Alphii to convey information clearly and highlight beautiful photography and typography.

Accent Colors

Red and Blue accents are used sparingly throughout the UI drawing attention to key elements. Red is used for action items like buttons, switches or interactive components and blue is used to represent Alphii’s brand partnerships (charities, media, business ect..)

Secondary Colors

Alphii’s secondary colors are designed to represent each of the seven giving categories. These colors are used in the impact metrics section to visualize and communicate data to help users better understand the information.

 
 
 
Color-Scheme---Primary-Colors.jpg
Color-Scheme---Accents-Colors.jpg
Color Scheme - Secondary Colors.jpg
 
 
 

Primary Colors
1) Black and white components
2) Giving Project screen - emphasis on photography
3) Impact-focused article - content focused with full bleed images.

 
Accent Colors 1) Red accent colors on switch and text button 2) Blue accent for nonprofit partners 3) Blue accent for media partners

Accent Colors
1) Red accent colors on switch and text button
2) Blue accent for nonprofit partners
3) Blue accent for media partners

 
 
 
Secondary Colors are used to represent each charitable category.

Secondary Colors are used to represent each charitable category.

Secondary Color variations applied to key impact metrics elements such as the pie graph, chips, lists and details.

Secondary Color variations applied to key impact metrics elements such as the pie graph, chips, lists and details.

 
 
 

Typography

Calibre

Alphii uses the Calibre Font / typeface across the entire app.

Calibre is a sans inspired by engineered geometry. It’s a neo - grotesque sans - serif typeface designed by Kris Sowersby in 2011.

 
 
 
Calibre’s letterforms

Calibre’s letterforms

 
 
 
Calibre’s Letterforms close up

Calibre’s Letterforms close up

 
 
 

Type Scale

Alphii’s type scale provides variety of options to ensure clarity navigating through the app and across platforms.

 
 
 
Calibre-Typescale.jpg
 
 
 
Calibre Monospaced Numbers

Calibre Monospaced Numbers

 
Calibre compared to Roboto

Calibre compared to Roboto

 
 
 

Iconography

Alphii uses Material Design’s sharp themed icons. These are functional and don’t have a customized style. Alphii's iconography compliments Calibre’s geometric letterforms, resulting in a uniform and consistent look and feel to the UI.

 
 
Icon-Family.jpg
 
 

Grid Structure

Alphii’s icons all share the same underlying grid structure.

 
 
Icons-Black-and-White.jpg
Icons-Red-and-Blue.jpg
 
 
 
1. Calibre font paired with Alphii’s Icons. 2. A collection of Alphii’s Icons.

1. Calibre font paired with Alphii’s Icons. 2. A collection of Alphii’s Icons.

 
 
 

Components

Components pulled from Alphii’s internal style guide with references to its sketch library.