UX-UI Design Archives - GM Creative https://gmcreative.design/portfolio-category/ux-ui-design/ GM Creative Tue, 17 Aug 2021 02:06:53 +0000 en-US hourly 1 https://wordpress.org/?v=6.5.2 196635901 Citi ID https://gmcreative.design/portfolio/citi-id/ Tue, 03 Aug 2021 16:52:05 +0000 https://gmcreative.design/?post_type=liquid-portfolio&p=9228 The post Citi ID appeared first on GM Creative.

]]>

Citi ID

In 2018 Citi Bank gained an interest in customer data protection and storage. Testing the concept of creating a digital identification/ central personal information hub, allowing customers to take control of their digital footprint.

Date

2019

Client

Citbank

Category

Mobile App

Project Overview

In 2018 Citi Bank gained an interest in customer data protection and storage. Testing the concept of creating a digital identification/ central personal information hub, allowing customers to take control of their digital footprint.

  1. To gain a better understanding of the personal/file storage space and its potential users.
  2. An attempt to combine business requirements with user needs.

To create a product/feature that helps in the following:

  • Awareness
  • Education
  • Action

Answer customer need and streamline the storing and real time functionality of important personal information and data.

  • Create new feature set within the current application.
  • Educate users on taking control of their digital footprint.
  • Create/Define User Personas

  • Design Mood-board
  • Research competitive landscape
  • Develop user personas
    -Head of household
    -Asset Manager
    -High net worth clients
  • Wire framing concepts
  • User Test (2 Rounds)
    -Unbranded Concept
    -Branded Concept
    -Refine designs based on learnings

Visual Mood Board

Un-Branded Stimuli

Branded Stimuli

Branding Concpets

Key Metrics

514 Citi customers TESTED via Cspace

49%

Are at least
somewhat interested

29%

Are uninterested

70%

At least are potential customers

The post Citi ID appeared first on GM Creative.

]]>
9228
Share A Radio https://gmcreative.design/portfolio/share-a-radio/ Tue, 03 Aug 2021 04:10:54 +0000 https://gmcreative.design/?post_type=liquid-portfolio&p=9208 Winter is coming

The post Share A Radio appeared first on GM Creative.

]]>

Share
A Radio

I built digital experiences, and print materials that communicate clearly and look fantastic.

Project Overview

Concept Design + UI/UX Design

As I approached this visual design exercise, creating the “Share a Radio” application, I was immediately intrigued by the assignment for several reasons. As a music aficionado, I was excited to work through the visual and user flow of how this application could be made into an incredible experience for a broad demographic of prospective users. After looking at the four wireframes provided, I immediately assessed that I would be supplementing additional screens in order to create a cohesive idea and execution of my user experience vision and design. Throughout this design, I was lending keen attention to the callouts in the exercise guide- specifically, the concept of this application having both recording and sharing capabilities of personal and commercial music. I researched a variety of existing music platforms to generate perspective on functional and aesthetic improvements I wanted to incorporate into my design. Understanding the target demographic of users of music applications, I created a smooth, uninterrupted user flow for this application.

Share on

The post Share A Radio appeared first on GM Creative.

]]>
9208
Developer Hub https://gmcreative.design/portfolio/developer-hub/ Fri, 30 Jul 2021 03:21:55 +0000 https://gmcreative.design/?post_type=liquid-portfolio&p=9141 The post Developer Hub appeared first on GM Creative.

]]>

Developer Hub

Scroll

Project Brief

In 2016, Citi Bank launched a global API developer portal. Allowing developers to rapidly build applications leveraging the various API’s. The main objective of this redesign was a user-centric experience focused on providing particular user groups with the information necessary to learn more about the offering and overall capabilities of the API’s

Citi has teamed up with several leading companies, including Mastercard, Virgin Money, and Wonder. Earlier this year in the U.S., Citi’s Pay with Points API started providing Citi ThankYou® Rewards members with an eligible Citi credit card the option to use points to cover all or part of their purchases with a statement credit when using their card to make purchases on BestBuy.com and in the Wonder App.

Client

Citbank

Role

UI Designer

Date

2018

Design Challenge

The original website was built to meet basic business requirements and lacked a user-centric design and educational approach. It also featured a limited number of reusable design system components.

Previous homepage design 2016*

Project Goals

Take advantage of the experiential-learning opportunities built into many programs. You can work in labs on and off

REFINE USER
EXPERIENCE

EDUCATE VISITORS ON API OFFERINGS

CREATE/DEFINE USER PERSONAS

ESTABLISH A DESIGN SYSTEM

User Research

Evaluated The Current Experience

The initial step was an audit of the current experience. We reviewed click heat maps, web analytics and support tickets. These helped us make informed product and design decisions.

CLICK HEAT MAPS

WEBSITE ANALYTICS

SUPPORT TICKETS

Persona Development

Established User Personas

Based on the data collected and reviewed we took a further look into the types of users visiting the site. This gave us a better understanding on how to structure the information and overall experience.

Building products using the API and reviewing documentation.

Understand the API offerings and how they reacted to product needs.

Focused on use cases and data to make informed product decisions.

Design Process

Wire framing & Validation

Our learnings from the previous steps and combined them into a homepage wire that featured paths for each user group while also fulfilling business goals and requirements.

Design Process

Design System Audit

After reviewing the existing design system, I discovered the following items needed to be addressed:

  • Type Ramp
  • Brand Colors
  • Grid System
  • Spacing Rules
  • Icon Set

Design Process

Engineering Requirements

After completing both the wireframe validation and an audit of the current design system, our next goal was to understand the key requirements from our engineering team.

  • Drupal CMS Integration
  • Breakpoints & Grid System
  • Typography Scaling
  • Color Variables
  • Animations
  • Hand Off Process

Design Process

The Design System

When initiating the high fidelity designs, the goal was to create a set of reusable components which featured an editorial and modern design aesthetic while maintaining a strong brand presence within Citi’s product portfolio.

Key Metrics

514 Citi customers TESTED via Cspace

49%

Are at least
somewhat interested

29%

Are uninterested

70%

At least are potential customers

Share on

The post Developer Hub appeared first on GM Creative.

]]>
9141