Dondo Barter App

in , ,

The entirety of this project was done by me. Through a Sprint-like methodology I took the brief given by the client, define a scope, identified assumptions, ideate through How Might We(s), chose a target and design hypothesis, establish success UX metrics from the proposed product, define Design Principles, mapped the Golden Path(s) for both platform roles, sketched and created the User-Flows. With Figma I created the wireframes displayed in this case. I also created a Research Plan for validating the design hypothesis based on the ‘Cognitive Walk-through’ -mediated method.

Brief

Artboard 3.png
Artboard 4.png
 

Debrief

Artboard 6.png
Artboard 7.png
 

Mapping

Artboard 9.png
Artboard 10.png
Artboard 11.png
Artboard 12.png
Artboard 13.png
Artboard 14.png
Artboard 15.png
Artboard 16.png
Artboard 17.png
Artboard 18.png
 

Sketching

Artboard 20.png
 

Userflows

Artboard 22.png
Artboard 23.png
 

Wireframes

 

User Testing Plan

Cognitive Walkthroughs

Artboard 27.png
Artboard 28.png
Artboard 29.png
Artboard 30.png
Artboard 31.png
Artboard 32.png
 

App Consejero Financiero

in , , ,

I was solely involved in the deliverables presented in this project. The closest methodology I aligned with is Design Sprints, were I de-briefed the given requirement through the 4 Jobs To Be Done provided and redesigned a financial advisor app. There was an initial app-evaluation, domain research, design hypotheses, Golden Path, Product Information Architecture and Mid-Fidelity screen-designs. The Mid-fidelity wireframes were delivered through Figma and Google’s Material Design system.

Brief

Artboard 4.png

Debrief

Artboard 6.png

Entregable 1 — Solución Visual del Home

Entregable 2 — ¿Cómo se llegó a la solución visual?

Entregable 3 — Justificación del Proceso de Diseño

Diagnóstico Inicial – Evaluación de Principios Interactivos

Diagnóstico Inicial — Revisión Tecnológica

Hipótesis de UX

Mapeo

Arquitectura de Información

Retirement Plans Bank Feature

in , ,

Tools: G-Slides, G-MD Color Tool, Figma

Deliverables: UX Research & Analysis, Information Architecture, Wireframes, UI Design & Prototype

Methods: Challenge, User Research -Online, Competitive Research & Analysis, Design Hypothesis, Information Architecture (Tasks, User-Flow), Wireframes, UI Design.

 
First screen from the Figma Prototype

First screen from the Figma Prototype

Debrief

For a successful job opportunity test, I was asked to visually communicate the dramatic outcomes that can result from slight changes in BPS (Basis Points) –retirement plans, in an attractive intuitive and immediate way. This is what I came up within the 48 hour timespan. If you want to skip to the Figma Prototype.

Objective

Create a product that easily communicates the vast difference in results when there are slight changes in BPS for retirement plans.

UX Strategy

Stakeholder’s Desire 

Our app should convey immediateness, attractiveness and intuitiveness .

UX Design Hypothesis 

Communicate how these dramatic outcomes translate into their lives.

Key Question: What do people care about/value when choosing retirement plans?

Investopedia

“One of the most challenging aspects of creating a comprehensive retirement plan is striking a balance between realistic return expectations and a desired standard of living. The best solution is to focus on creating a flexible portfolio that can be updated regularly to reflect changing market conditions and retirement objectives.”

3 Things Most Americans Want In Retirement And How To Get Them, Forbes

“First, people want to experience freedom from financial worries in retirement. This should not come as a surprise as 95 percent of respondents stated that freedom from financial concern is important to their definition of success in retirement.[...] 

Second, Americans want flexibility in retirement. Almost all respondents, 96 percent, stated that having the flexibility to do what they want in retirement is an important component to their definition of a successful retirement.[...]

Third, retirees want to spend time with family, to relax and travel as part of a secure retirement. For instance, 93 percent of the survey respondents stated that spending time with family was important for a successful retirement, 92 percent stated that relaxing was an important factor, and 80 percent stated that having the time to travel was crucial to a successful retirement plan.”

 

Competitive Research (Click here for more)

“The Best Retirement-Planning Apps” by Kate Anania, Investopedia, Dec./19

Findings

  • “Acorns” ‘Potential’ interactive simulation visually communicates simplicity, intuitiveness, attractiveness and potential impact in real-time

    1. With a vertical slidable graph selector, people can determine the time at which the simulation sets the ‘Hypothetical Projection’ in terms of the user’s age

    2. You can set another ‘Hypothetical Projection’ by selecting the “Change Your Potential” Button at the bottom

      1. Another graph emerges and results are shown comparatively, ‘Recurrent Periodic Investment’ and ‘Current’

      2. People can choose an amount of set money values (intervals of $5 & $10) and the periodicity of such amount (Day, Week, Month)

      3. CTA "Turn on" button to activate “Recurrent Investment” feature, becomes very persuasive as you can perceive in real-time the vast difference from a small change

 

  • “Mint” harnesses integrations with financial products and presents them in a way that is useful and insightful from a daily and planning perspective

    1. Simple UI with readable dashboards to have both a general understanding and details around spending and financial goals

    2. Extensive “Budgeting” categories 19 (75 subcategories)

  • “Retirement Planner” Straightforward app with informative fields to have in mind

    1.  Ranked #1 in Investopedia, despite its poor Intuitiveness, Feedback and Visual Impact

 

Data Interpretation –from provided graph

  1. Visually the difference between the 3 BPS outcomes are not perceived as “dramatically different”

  2. Within an interactive environment such as mobile app, there's an opportunity where Data could be splitted, hidden and zoomed

    1. Setting “Demographic Assumptions” with defaulted values and embed them in an interactive component like a “collapsible list”

    2. “Scenario Assumptions” are the core of the simulation, so the three BPS buttons should always be visible

    3. “Impact BPS Increase” give a general sense that withdrawal extends over time, but lacks meaningful possibilities for spending in hypothetical scenarios

  3. Why are “Annual Withdrawal Amount”(s) and “Withdrawal %” the same regardless of BPS?

    1. Assumption: The annual withdrawal amount is extended over more years

      1. What if people would rather spend more over less years? 

        1. What kind of expenses are relevant (amounts and timespan)?

  4. Are the years before retiring relevant when deciding a Retirement Plan?

    1. Assumption: Since its a static data representation, it can’t change view

      1. What if a closer “Retirement View” was presented? 

  5. Vital Info

    1. Account Balance at Retirement Age

    2. Annual Withdrawal Amount

    3. Other info can be shown when selecting corresponding item

 

Information Architecture

What is(are) the necessary feature(s) to accomplish the objective?

  1. Interactively visualize the dramatic difference in outcomes that can result from slight changes in BPS.

  2. Create a more dramatic view in the graph by zooming the X-Axis of Age. This will translate visually into a greater difference.

  3. Similarly, communicating how could these changes translate into meaningful retirement scenarios such as more available spending on family visits per year or month.

 

Outline

3. Relevant Expenses Section Shown in BPS Increases Graph when selected

  • Necessary (Yearly, Monthly, Weekly) [Fixed and correspond to selected General BPS value of Age]

    • Food

    • Health

    • Home

    • Bills & Utilities

    • Transport

    • Taxes & Fees

  • Desired (Yearly, Monthly, Weekly) [Slidable in Age, X-Axis]

    • Family

    • Relax

      Travel

  1. Intro Screen (Demographic Assumptions)

    • Starting Balance: $0

    • Starting Age: 30

    • Starting Salary: $40,000

    • Retirement Age: 65

  2. Impact of BPS Increases Graph

    • “Account Balance at Retirement Age 65” (Visible when selecting type of BPS, default “Baseline")

    • “Annual Withdrawal Amount” (Updates according to interactions)

    • Select BPS (Zoom to range from “Retirement Age” to “Life Expectancy”)

      • Account Balance at Retirement Age updates

    • Slide value -horizontal axis to choose a spending “Withdrawal Scenario Age” deadline in selected BPS (“Annual Withdrawal Amount” updates)

 

Wireframes

I have decided to take a mobile first approach, meaning the mobile app interaction will start from a phone layout since it is more widely used than tablets.

User Flow

2.WANDR_ABCcapital.jpg
 

Assumptions

I’ve decided to choose Mexico’s Bank “ABC Capital” since the American ABC Capital is a real estate company and the other ABC Capital is a Chinese Venture Capital whose website is in chinese.

 
 
 

Interface Design

I implemented Google’s Design Material since it presents a mobile OS agnostic approach for development.

Color

Screen Shot 2020-06-12 at 9.31.42 AM.png

ABC Capital’s brand colors include Blue (#00457D) and Red (#E62C38).

Using Material Design’s Color Tool as the starting point for managing color alternatives.

Both primary colors showcase a vibrant result when they are combined (low readability). This is why, following some color theory, I have composed three alternatives around the blue spectrum, with the primary brand’s color and the two variants created with this tool. 



Color Variations

Screen Shot 2020-06-12 at 9.45.25 AM.png
 

Figma Prototype

In this link.

 

Panic App

in

By the end of 2014, crime rate -deaths- in Bogota, Colombia decreased. Mugs however remained, and to tackle the common smartphones theft, in Pinedot Studios we attempted to solve it. We created this concept app and pitched it to INTEL Colombia.

Wireframe

Mockup

Lab Time App

in ,

With Pinedot Studios we created a pick-up scheduling app, to aid clinical labs organize their samples. I was the Product Designer (UI/UX) behind it. It is natively available in iOS and Android. We decided to build on top of the current scheduling system which categorizes samples by color and letters. This way, we ensured the the application could be easily learned by the target audience, in this case Lab Assistants and Managers.

Unisabana App

in , , , , ,

By mid 2014, along with Jenny Robayo and a team of students, we launched the official mobile application for Universidad De La Sabana. It was a creation process that involved a Human Centered Design approach and a semester of hard work. I was the Product Designer behind it, from UX Research to UI Development, good old generalist.

Methodology: Human Center Design

Methods: Focus Groups, Interviews, Stakeholder Prioritization, Design Principles, Personas, Wireframes, Mockups & Prototypes

Tools: Adobe Illustrator, Keynote, G-Suite

Deliverables: Research Analysis, Information Architecture, Screen Designs and Assets

From left to right, Rafael Rodriguez (Integration Lead), Ricardo Sotaquira (Information Technology Engineering Director and Project's Director), Francisco Ramirez (Design Lead), Jenny Robayo (Development Lead), Juan Pablo Velasquez (Student), Alejandro Zambrano (Student). Two students missing: David Piñeros and Nicolas Guzman

Even though this project involved NDAs, the overall process began with the core team (Director and Leads) drafting the Project's Proposal and Design Concept. After an agreed Brief with the stakeholders, we conducted User Research to validate our initial hypotheses and discover new opportunities. 

The video at the left is an excerpt from the User Research activities I conducted. They were held in the first Design phase, hearing our main audience, the student community.

Out of this research we crafted Design Principles that would guide us in the App's UX and UI. We also created personas that aided the scenarios.

By overlapping Needs from users and Desires from stakeholders, and the development team's Abilities we decided which features approach first. Once having everyone on the same page, I created tentative layouts through Wireframes and Mockups, that I translated later into tap-through prototypes.

We delivered a Mobile App with a set of features with breakthrough feature to encourage students to improve their performance (virtual academic advisor) and the campus community's daily activities (news, menu, events). The advisor is a tool that will suggest what should a student aim for his next graded assignment (exams, projects, homework) according to a desired course-grade.

This is a run through the different services, natively developed in iOS and Android available for download in their corresponding links

Electronic Vote

in , , , , , , ,

In 2013 we created an electronic vote system through Android tablets that were remotely activated by a Laptop. I was the UI/UX Designer and Industrial Designer –Cubicle. Our main Design Challenge was to create an election system easily perceivable and predictable –intuitive– enough so grown-ups with no previous experience with mobile devices could vote. It was a successful system that didn't got in the way, with 93% of participation.

Storyboard

I created this storyboard so stakeholders could better understand the sought experience.

Scrutiny's visualization

For the scrutiny I developed this visualization in Processing

Enrutate iOS App

in , , , , ,

Back in 2013 with two developers, we created this Mobile App. I designed the UI including the simplified map of Bogota and the promotional motion graphics. It was the first Mobile Application to interact directly with the map. A more perceivable and predictable –intuitive– interaction comparing it with the competition (public transport apps in Bogota, Colombia). 

Flux iPad App

in , , , , ,

Concept Development

Flux is a mobile application for tablets that introduces college students to System Dynamics. Its Design Objective involves a new visual representation to improve the user experience in System Dynamic softwares. I was the Visual and Interaction Designer behind its creation. The second iteration at the right was created with a micro-organism metaphor in mind.

For this project I worked closely with a PhD in Applied Sciences directing and implementing the mathematical models behind it, and a junior iOS Programmer.

Bertalanffy’s General Systems Theory sprung from Biology, thus a micro-organism metaphor for the final design seems convenient and captivating. Elements within the aqueous environment resemble organic-like shapes. Both features, the animated elements and organic forms contribute to Flux's aim to bridge users’ mindset onto a unified perceivable and predictable interface.

Iteration 1

Ripple effect concept were elements' behaviors interfere like waves disturbing water. 

Iteration 2

Micro-organism concept were elements have a biological look and the interface borrows visual queues from a petri-dish 

Brand Identity

In System Dynamics the concept of cycle is essential. This is why the logo's starting point is a cycle. Afterwards, a double cycle resembling the infinity symbol was used for the name's starting point.

Logo

 

Splash-screen