Nidoo Web SaaS • Parking Provider

in , ,

When leading the Product Design team (about 4) in this parking-ecosystem startup, I created, conducted and deliver everything from research to hand-off in this case. Initially the scope was to design the home-screen with a dashboard in mind, but I ended up redesigning the entire platform.

Deliverables: Interviews Analysis, Feature Map, Layout, Design Evaluation, UI Design

Methods: Stakeholder Interviews, Information Architecture, UI Design

Methodology: Design Sprint

Methods Addressed: Ask the Experts - Stakeholder Interviews, Learn through patterns, Map, Sketch, Prototype

Tools: G-Suite, InVision

 
 
 
 
 
 

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

Financial Advisor App

in , ,

Quick and dirty half a day exercise where I created everything. Through a very sprinted methodology I scoped the specific brief with the User Stories provided and translated these into a Golden Path (Future-State Map), a quick Feateure-Map and some Mid-Fidelity Wireframes.

Debrief

Objective:

“[C]reate an experience where advisors on our platform can log in to review and communicate with their clients.”

Task: Advisor logs in, reviews a client and communicates with her/him

  1. Login

  2. Select Client, aggregate list view

  3. Browse Individual client view

    1. Info

    2. Call

    3. Message

 

Value Proposition

A platform that allows –advisors, keep track of current business and new  business (UpWork/Fiver), where they can communicate and collaborate / CRM –keep track of client journey (phase1, p2, etc)

What are we solving?

Easily create, track, contact, record, schedule and conduct a financial relationship with clients. Grow the business while delivering a great experience.

User Scenario

  • Advisor typically between age 30-50Paper/ Handwriting

  • Paper/Handwriting

  • Call / Email

  • Spreadsheets

  • Don’t know there are better possibilities

  • “Easier, faster & works”

  • Responsibilities: discovery for potential clients (gather information/ match and assigning profile with servicing tools/ communicating with client)

  • Help people (Altruistic, curious)

  • Not most tech savvy –Less is more

 

What does an advisor typically

  1. Says: What’s next (step, heard from…, why or not moving forward, followup)

  2. Thinks: Don’t know there are better possibilities

  3. Does: Tracking different things/ Looking towards how to help

  4. Feels: They feel they don’t have enough time/ They are doing enough/ Opportunities to hone into for follow-up questions

Best practices of advisor-client communication

  1. What are the most recurrent actions?

    1. Milestones on the process revolve around meetings

      1. Before and after (planning, what to cover, reports, follow-up questions)

  2. Which pain-points should we tackle?

    1. Breaking down miscommunication

      1. Missing/Late to next meeting

    2. Not knowing digital lingo/language

We should design for: Phone and text communication

  • Preferably iOS, iPhone X and beyond

 

Golden Path –Key Steps to reach Value Proposition

Golden Path.png

User Stories

  • As an advisor I want to easily log-in so that I can Skim & Scan clients list

  • As an advisor I want to immediately identify what is my next appointment so that I can either call or message the client

  • As an advisor I want to easily view which are my follow-up clients so that I can keep in touch through email or phone

  • As an advisor I need to record client’s general info (Name, financial goals, key facts) so that I can manage my client’s relationship successfully

  • As an advisor I need to track my client’s financial history with its corresponding financial goals so I can successfully advise my client

    • As an advisor I need to write notes whenever I am meeting my clients so that I can successfully track my client’s financial history

  • As an advisor I want to access my client’s contact info (phone and email) so I can easily reach them

  • [Reschedule]As an advisor I want to be able to reschedule so that any unexpected events can be properly handled

Design Hypothesis

  1. Quick and easy log-in with email or Google/Apple

  2. 3 tabs to organize clients (Day-to-day, Alphabetically, Per Phase)

  3. A ‘Client View’ should quickly communicate the financial plan and performance so far with a graph

    1. A plan can be divided into milestones

    2. Each milestone should have leads, budget and actions

 

Mid-Fidelity Design

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.

 

Ideation Tool from Cooper Hewitt Museum API

in , , , , ,

This project is an ongoing pursue around the question of how to overcome a creative block? Partnered with Lutfiadi Rahmanto, we started out scribbling, sketching and describing the problem to better understand what it meant for each of us and how do we scope this problem and usually respond to it.

UX Research

From the first session we were able to narrow the idea onto a determined goal: A tool to aid inspiration in the creative process. This led us to consider various things around the sought scenario and allowed us to start asking other creatives around this. We sought to better understand –qualitatively– how creatives describe a creative block and more importantly how is creative block overcome? From this session we were also able to reflect on how to aid that starting point of ideating, often a hard endeavor. A resonating answer in the end, was through linking non-related words, concepts or ideas.

We also researched two articles with subject matter experts about Creative Block and Overcoming It ("How to Break Through Your Creative Block: Strategies from 90 of Today's Most Exciting Creators" and "Advice from Artists on Hot to Overcome Creative Block, Handle Criticism, and Nurture Your Sense of Self-Worth"). Here we found a collage between our initial hypothesis with additional components such as remix, from Jessica Hagy's wonderful analogical method of overcoming her creative block by randomly grabbing a book and opening it a random page and linking "the seed of a thousand stories". Another valuable insight was creating space of diverted focus from the task at hand generating the block. We also found a clear experience-design directive for our app, to balance between constrain –structured scrambled data from the API– and freedom –imaginative play–.

Brief, Personas and Scenarios

After validating our intuitive hypotheses on how to address the problem through the contextual inquiries and online articles we came up with a solid Design Brief:

Encourage  a diverted focus where people are able to create ideas by scrambling data from the Cooper Hewitt's database into random ideas (phrases). 

Through this research we created seven different behavior patterns and mapped them onto this two-axis map, that defines the extent to which personas would behave between casual/serious and unique/remix. 

For a more detailed description of these archetype behaviors visit this link

This enabled us to create our guiding design path through what Lola Bates-Campbell describes as the MUSE. An outlier persona to direct and answer the usual nuances behind designing, in this case, our mobile application tool to aid Mae Cherson in her creative block. We determined her goals and thus her underlying motivations, what she usually does –activities– during her creative environment and how she goes around between small and greater creative blocks in her working space. We also describe her attitudes towards this blocking scenario and how her feelings entangle whenever seeking for inspiration. There were some other traits  determined as well that can be reach in more detail through this link.  Overall we crafted this Muse as a reference point for creating an inspirational experience for the selected archetypes –The Clumsy Reliever and The Medley Maker–.

Engagement

Parallel to the archetypes mapping, we began thinking how to engage our audience –Artists, Designers, Writers, Thinkers, Makers, Tinkerers, all poiesis casters–. Soon we realize the opportunity of captivating our audience through a game-like interaction. A gameplay that requires simple gestures and encourages discoverability. Some of the games we took as reference are Candy Crush and 2 Dots. Two simple games that have out-stand for their heavily and widespread engagement.

Wireframe Sketches

By having research cues and possible game-like affordances in mind there's proliferous space to weave tentative design solutions. Hence we made a couple whiles to sketch layouts, concepts, poetic interactions and nonsense infractions.

On the other side we created sense and sought a balance between amusement and feasibility. At the end of this session we came up with three Design Layout Concepts and general Affordances (call to interaction): Linking, Discovering and Dragging.

Test Insight

From these concepts we started making interactive prototypes. While creating the Discovering prototype, we realize people's intuitive mental model beneath a Candy Crush-like interaction did not match with our design intent, and trying to match it resulted overly complicated and forced. This is why we created prototypes for the Linking and Dragging concepts.

Prototypes

Another prototype explores the underlying preference between text-driven inspiration and visually-driven inspiration. While testing these prototypes we realize some people tent to feel more inspired by imaging the words from a text, and other people feel more inspired by visual queues. This prototype allows both explorations.

The next step is to select one gameplay interaction from our user tests and sintactically address the text data from the API. 

This is another interaction mode –Remixing Mode–, thought after Katherine's valuable feedback on our final prototype that can be accessed in this link.

Mind the Needle — Popping Balloons with Your Mind 0.2

in , , , , ,
 

Concept

Time's running out! Will your Concentration drive the Needle fast enough? Through the EEG consumer electronic Mindwave, visualize how your concentration level drives the speed of the Needle's arm and pops the balloon, maybe!

Second UI Exploration

Second UI Exploration

Development & UI

I designed, coded and fabricated the entire experience as an excuse to explore how people approach interfaces for the first time and imagine how things could or should be used.

The current UI focuses on the experience's challenge: 5 seconds to pop the balloon. The previous UI focused more on visually communicating the concentration signal (from now on called ATTENTION SIGNAL)

This is why there's prominence on the timer's dimension, location and color. The timer is bigger than the Attention signal and The Needle's digital representation. In addition this is why the timer is positioned at the left so people will read it first. Even though Attention signal is visually represented the concurrent question that emerged in NYC Media Lab's "The Future of Interfaces" and ITP's "Winter Show" was: what should I think of? 

Showcase

Insights

What drives the needle is the intensity of the concentration or overall electrical brain activity, which can be achieved through different ways, such as solving basic math problems for example –a recurrent successful on-site exercise–. More importantly, this question might be pointing to an underlying lack of feedback from the physical devise itself, a more revealing question would be: How could feedback in  BCIs be better? Another reflection upon this interactive experience was, what would happen if this playful challenge was addressed differently by moving The Needle only when exceeding a certain Attention threshold?

Previous Iterations

Featured
Mind the Needle Iteration 0.1
Mind the Needle Iteration 0.1
UI Draft #2 BCI & Processing
blogPostBCIstudy.png

UI Draft #1

in , , ,

With the opensource JAVA toolkit Processing, I started exploring around User Interfaces, Time representation and Hover Timing. Hover Timing, might bring intersting possibilities for Natural User Interface such as the Kinect or Leap Motion, where different affordances come into place wtih simple tasks like selecting an element. The code for this draft can be found in this Github Repo

Interactive Dream Box

in , , , , ,

For children's month, we created a giant box to make a stronger bond between children and their parents. I was the Interactive Lead for this project making sure the hardware and software would run swiftly for a month and a half.

Methodology: Iterative Development

Tools: Arduino, OpenFrameworks

Deliverables: Interactive Experience triggered by levers and buttons that took children and parents through a journey

Concept

With a collaborative experience, people embarked in a journey in the world of dreams and imagination. To communicate children's boundless imagination and appropriation of everyday objects, we constructed a giant carton box as the ship, with two control panels were knobs and buttons are made out of plastic bottles and other every day objects. 

Technologies

Along with two Interaction Designers, we coded the project's software in OpenFrameworks and the hardware in Arduino. To ensure collaboration in the box's experience, both panels were made wide enough so they could only be triggered by at least two people. There are two starting knobs and two launching/landing levers. The other panel is as wide as the first one, and it has four buttons that light-up to a sequence. Lit buttons have to be pressed at the same time to defeat the violent thread in the journey.

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