Discover Chargeback App
Overview
The chargeback application was created for merchants and consumers to track document and make the process of getting their money back much easier and in a timely manner. This application was created to empower internal teams with expertise and automation that helps merchants lower dispute rates, improve win rates, and reduce labor costs
Problem
Solution
The applications tasks were previously carried out through operations services which put a lot of the functionality into the hands of the card provider. Discover needed to port these functions into a front facing application that would serve merchants as well as customers seeing a high volume of chargebacks in a short period of time.
By taking many of the processes the original operators were using and approaching the tasks from the perspective of the average user, we were able to compile a series of flows which would streamline the process and make the customers chargeback experience less cumbersome and easy to navigate and keep track of the changes made.
Discover Chargeback App
Context
Roles
Timeline
4 weeks
Information Architecture, prototyping, Design System
As a UI UX designer worked on this project using the design first approach in order to get a working prototype in front of the client as soon as possible
Persona
The process I use for persona is the same as a writer who dreams up his characters as he is writing a story. I sometimes use known celebrities or popular figures with backstory that fit the personality type Im looking to expound about. Types are broken into a myriad of different category including but not limited to ;
Needs
Personality
Problem
Feelings
Though these distinctions only make up a fraction of the possibilities the persona itself is a key instrument used to profile the user in such a way that allows me to cater to the specific needs of the target audience in areas such as;
buying habits
areas of interest
preferred way of communicating
price points
advertising and much more
Design Stage
Personas --- User Flow --- Wireframes --- Mood Board --- Style Guide --- Prototype --- Responsive Design
Click link for interactive view
Tasks & Flow Chart
The Flow chart for this particular application was design first approach so many of the application features were created in separate smaller flows and placed into the application according to hierarchy of importance.
Personas --- User Flow --- Wireframes --- Mood Board --- Style Guide --- Prototype --- Responsive Design
Click link for interactive view
Design Flow
Wireframe
Wireframing is the process of design that determines how an app will flow. The elements are placed in relationship to their need, use, and importance. The most common strategy to placement is a balance between when and how the element may come into play the wireframe is a quick and easy way of determining which flow is the least cumbersome for the user.
Design Flow
Personas --- User Flow --- Wireframes --- Mood Board --- Style Guide --- Prototype --- Responsive Design
Click link for interactive view
Mood Board
The Mood Board is definitely my playground for creativity and ideation. It is here that the look and feel are determined as a theme for the sight as a whole the color bar represents the colors to be used and the length of the color bar correlates to the amount of color to be used throughout the site for instance black and orange are primary and secondary and the yellow is for action buttons and accents this is a basic design rule that helps guide the users eyes and not overwhelm them with colors and unnecessary usage.
Design Flow
Personas --- User Flow --- Wireframes --- Mood Board --- Style Guide --- Prototype --- Responsive Design
Click link for interactive view
Style Guide
Style guide is a formulation of the colors font and font sized used for the various elements within the application focusing on contrast readability and appeal the style guide ensures a congruent look and feel throughout the interface and experience for a more streamlined effect overall. Specified colors for call to action, as well as set sizes for main, sub, and body text, are just a couple of examples a great style guide can really make an application pop and be understood at the same time.
Design Flow
Personas --- User Flow --- Wireframes --- Mood Board --- Style Guide --- Prototype --- Responsive Design
Click link for interactive view
Prototype
The prototype is the closest thing to a finished app the client can use to visualize the finished product and can be easily manipulated to meet the clients vision and needs down to the last punctuation.
The link provided is a sample of the full application I worked on with Worldpay its function is to simply demonstrate my abilities with font manipulation color placement and prototype creation It is not a full flow this flows features are:
look and feel
hamburger menu manipulation
accordion menu dropdown
Design Flow
Personas --- User Flow --- Wireframes --- Mood Board --- Style Guide --- Prototype --- Responsive Design
Click link for prototype
Responsive Design
project was mobile only application and did not require a web version
Design Flow
Personas --- User Flow --- Wireframes --- Mood Board --- Style Guide --- Prototype --- Responsive Design
Lorenzo Intisaar Design
Explore the sleek and minimalist portfolio showcasing the UI/UX design aesthetics of Lorenzo D Intisaar.
Contact
Services
info@lorenzointisaar.com
818-272-6313
© 2024. All rights reserved.