The project and materials provided in this case were created entirely by me. The previous research materials (links before strategy) were provided by the contractee.
Methodology: Design Sprint
Methods Addressed: Map, Target, Wireframes, Documentation
Tools: G-Drive Suite, Figma
Deliverables: UX Strategy, Sitemap, User-Flow, Desktop & Mobile Wireframes, UX Documentation
If you would like to dig into the research provided by contractee, feel free to request access
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
For this project, I led the Product Design team (about 4). The things I created involved, metrics plan and follow-up with dev and implementation, Research Plans, Analysis/ Mapping, Product Architecture (Site-Maps, User-Flows and Wireframes), User Tests, some of the UI (G-Map Skin, Micro-Interactions and Oboarding Lottie Animations)
Methodology: Design Thinking & Human Center Design
Methods: Stakeholder Workshop, Current & Future State Mappings, UX Metrics creation & implementation, Screening Plan, Research Plans, Design System, Micro-Interactions, G-Map Design, Motion Design, Cognitive Walkthroughs (User Tests for Validation), Stakeholder Interviews
Tools: G-Suite, InVision, Draw.io, Google Material Design, Adobe After Effects
Deliverables: UX North Star, UX Metrics, Screening & Research Plans, Research Analysis -Mappings (Current & Future) & Personas, Feature-Maps, User-Flows, Wireframes, Test Plans and Findings, Interview Plans
Onboarding excerpt screens created with Adobe After Effects, Bodymovin & Lottie
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.
Link to Figma prototyped Wireframes
Link to Figma prototyped Wireframes
Cognitive Walkthroughs
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.
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.
“[C]reate an experience where advisors on our platform can log in to review and communicate with their clients.”
Login
Select Client, aggregate list view
Browse Individual client view
Info
Call
Message
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)
Easily create, track, contact, record, schedule and conduct a financial relationship with clients. Grow the business while delivering a great experience.
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
Link to prototype in InVision
Says: What’s next (step, heard from…, why or not moving forward, followup)
Thinks: Don’t know there are better possibilities
Does: Tracking different things/ Looking towards how to help
Feels: They feel they don’t have enough time/ They are doing enough/ Opportunities to hone into for follow-up questions
What are the most recurrent actions?
Milestones on the process revolve around meetings
Before and after (planning, what to cover, reports, follow-up questions)
Which pain-points should we tackle?
Breaking down miscommunication
Missing/Late to next meeting
Not knowing digital lingo/language
Preferably iOS, iPhone X and beyond
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
Quick and easy log-in with email or Google/Apple
3 tabs to organize clients (Day-to-day, Alphabetically, Per Phase)
A ‘Client View’ should quickly communicate the financial plan and performance so far with a graph
A plan can be divided into milestones
Each milestone should have leads, budget and actions
Link to InVision prototype
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
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.
Create a product that easily communicates the vast difference in results when there are slight changes in BPS for retirement plans.
Our app should convey immediateness, attractiveness and intuitiveness .
Communicate how these dramatic outcomes translate into their lives.
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.”
“The Best Retirement-Planning Apps” by Kate Anania, Investopedia, Dec./19
“Acorns” ‘Potential’ interactive simulation visually communicates simplicity, intuitiveness, attractiveness and potential impact in real-time
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
You can set another ‘Hypothetical Projection’ by selecting the “Change Your Potential” Button at the bottom
Another graph emerges and results are shown comparatively, ‘Recurrent Periodic Investment’ and ‘Current’
People can choose an amount of set money values (intervals of $5 & $10) and the periodicity of such amount (Day, Week, Month)
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
Simple UI with readable dashboards to have both a general understanding and details around spending and financial goals
Extensive “Budgeting” categories 19 (75 subcategories)
“Retirement Planner” Straightforward app with informative fields to have in mind
Ranked #1 in Investopedia, despite its poor Intuitiveness, Feedback and Visual Impact
Visually the difference between the 3 BPS outcomes are not perceived as “dramatically different”
Within an interactive environment such as mobile app, there's an opportunity where Data could be splitted, hidden and zoomed
Setting “Demographic Assumptions” with defaulted values and embed them in an interactive component like a “collapsible list”
“Scenario Assumptions” are the core of the simulation, so the three BPS buttons should always be visible
“Impact BPS Increase” give a general sense that withdrawal extends over time, but lacks meaningful possibilities for spending in hypothetical scenarios
Why are “Annual Withdrawal Amount”(s) and “Withdrawal %” the same regardless of BPS?
Assumption: The annual withdrawal amount is extended over more years
What if people would rather spend more over less years?
What kind of expenses are relevant (amounts and timespan)?
Are the years before retiring relevant when deciding a Retirement Plan?
Assumption: Since its a static data representation, it can’t change view
What if a closer “Retirement View” was presented?
Vital Info
Account Balance at Retirement Age
Annual Withdrawal Amount
Other info can be shown when selecting corresponding item
Interactively visualize the dramatic difference in outcomes that can result from slight changes in BPS.
Create a more dramatic view in the graph by zooming the X-Axis of Age. This will translate visually into a greater difference.
Similarly, communicating how could these changes translate into meaningful retirement scenarios such as more available spending on family visits per year or month.
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
Intro Screen (Demographic Assumptions)
Starting Balance: $0
Starting Age: 30
Starting Salary: $40,000
Retirement Age: 65
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)
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.
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.
General view of “Impact of BPS Graph” where default active graph is the “Baseline” (others are in inactive state [dark colors])
Selection of “+100 bps Scenario” where “Impact of BPS Graph” view zooms to relevant range and “Account Balance at Retirement Age” appears
Slide the value of “Withdrawal Scenario Age” deadline in “+100 bps Scenario” from 97 to 85, and “Annual Withdrawal Amount” updates
Select “Desired Expenses” and they appear in “Impact of BPS Graph” view within active Scenario, subcategories (“Family”,”Relax”,”Travel”) drop-down from “Desired Expenses” selection
I implemented Google’s Design Material since it presents a mobile OS agnostic approach for development.
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.
Tools: Adobe Illustrator, Keynote, G-Suite
Methodology: Human Center Design
Deliverables: User Interviews, User Surveys, Competitive Research, Design Principles, Sitemaps, Wire-Flows, UI Design, Clickable Prototypes, Micro-Interactions with Motion Design (Lottie with After Effects), Desktop Wireframes
Methods: User Research, Competitive Research, Information Architecture, UI Design, Pitch Deck, Prototypes
This was an iterative attempt towards a generative soundscape installation. I created everything from UX Design, concepting, PCB design, hardware prototyping, hardware fabrication and ensemble, testing and validating
Deliverables: Hardware prototypes (PCB modules)
Tools: Arduino, Eagle CAD, Other Mill
After a failed attempt of creating modules that would communicate through sound, I started looking into Infrared Communication.
This is a project that looks to experiment with Infrared Communication between various Modules. All modules come from the same design made in Eagle CAD. It is a through-hole board routed with The Other Mill. The overall board involves an embedded Arduino (ATMega328), 2 IR-Rx, 3 IR-Tx, a LED and a Push-Button.
Modules can transfer the code from any IR Remote and transfer it among their closest peers.
Evaluate power consumption to figure how can they be powered through batteries.
Having different sources to a place where creatives channel their creative blockage and funnel their frustration through a playful way of tentative sustainable ideas has come to: three types of interactions and a pre-screen that sets the turning-point towards fun.
The first screen is a feed of memes about creative block. A good way of setting perspective is through tragic comedy
Images are separated in three categories. The first is an unclaimed or abandoned object, the second is a highly sustainable material and the third a remake design. Whenever shuffling a new remix, the idea is to also create phrases. This phrase should include terms like as upcycle, reconfigure, renewable, inclusive, composting, durable and modular.
A Chrome extension that identifies websites' palindromic input.
Why is symmetry appealing? Are palindromes perceived and valued as visually symmetrical compositions like mirrored pieces and rosettes? Could palindromes reflect the overall review of a work? Is discovering and creating palindromes a fun way to postpone duties or just waste some time?
Last class as we explored the False Mythification methodology, the idea of an anthropomorphic figure who wanders through remixed ideas emerged as a tentative pathway for exploration beyond coding. A juggler of platonic solids embodying possible ideas from remixed unclaimed/abandoned/lost objects, blending them into reconfiguration. Through the informal streets of Bogota he mingles with the "amigos" AKA "chaceros".
From Portraits by Robby Cavanaugh
The idea behind unclaimed items in transit spaces such as airports have a curious reclaiming history. These are either resold by state-run surplus centers or at online auction sites.Places like www.govdeals.com www.unclaimedbaggage.com or www.greasbys.co.uk auction these.
The other component of this exercise (chacero), are a local/colombian figure that after a bit of online research replicates across other countries, whose economy hasn't entirely formalized. "Chacero" is the slang for street vendors in Colombia. These are wonderful examples of remixed and repurposed stuff through history.
After a first approach to the Design Guidelines and considerations behind the Cradle to Cradle ethos, broader possibilities come to mind when seeking to align the Ideation Tool with Sustainable assets. Currently, the Ideation Tool is one way to exercise creativity by remixing objects from the Cooper Hewitt API. This tool shuffles 3 objects from their database and in the background mixes their description to compose phrases that suggest tentative product scenarios. These phrases are composed through a template phrase where a noun, a verb and an adjective are chosen every time there's a tap. The template phrase is coded in the background like: "This could be a ADJECTIVE NOUN that VERB"
Incorporating VERBS that encourage REUSE, RENEWABLE, COMPOSTING and INCLUSION.
Encouraging a re-make approach through the images and materials included in the database.
Address one of the 4 chapters of the C2C Basic certification, for example
Creating an ideation tool that shuffles terms that reveal unhealthy materials
An ideation tool that encourages solar or wind driven objects.
Material Health
Material Reuse
Renewable Energy
Social Fairness
Potential Risks: Manufacture, Use and End of Use
This is an initial 360º Video prototype with Ricoh Theta
With the initial ideation tool concept and prototype, the idea is to explore ways of aligning it to sustainability. This is the reason its gonna be submitted to Cradle to Cradle Product Design Challenge. Even though it might be slightly off track, since its a digital product, the tool can be assessed to the challenge's description and requirements:
Central to Cradle to Cradle® as a design framework is to eliminate the concept of waste — recognizing that all materials are valuable and finite and when designed appropriately can be used in infinite cycles. Effectively implementing this design principle can have a significant impact on the environment and the economy.
The goal of this design challenge is to eliminate the concept of "waste" by designing products with materials that may be perpetually cycled to retain their value as nutrients to fuel growing global economies.
Download a pdf of the submission requirements or follow the instructions on this page. All submissions must be in English. All written material should be packaged as a single PDF document not to exceed five pages.
Submissions should be formatted following the outline below using the identical numbers and headings. Please read the Official Rules prior to submission.
References:
Cradle2Cradle by William McDonough and Michael Braungart
Framing the current Peace Process between the Colombian Government and the main guerrilla group FARC, this initiative conceives the strategic need of planning ahead towards coexisting opportunities in the post-conflict scenario. How can we create post-conflict opportunities of sustainable forgiveness? The hypothesis is by allowing people to conceive reasons and ways to reinsert, live and endure through on-site specific production alternatives that span the socially-entrepreneurial panorama.
By remixing local resources, with communities’ needs and unrelated concepts new opportunities may emerge and set the stage towards a coexisting mindset. Multiple socially-entrepreneurial stages that bridge the conflict’s verge and the post-conflict.
This hypothesis is highly inspired and guided by the HCD Toolkit, ethnographic documentary "Chocolate de Paz", Culture House “Casa del Pueblo” in El Salado and the Cacao initiative of San José de Apartadó’s Peace Community.
At the same time there's various conceptual frameworks this initiative aims to involve: Ethical Consumerism (human rights, animal rights, environmental pollution), the Open Source and DIY and Social Entrepreneurship.
Similar to brands like Patagonia or MUJI, whose corporate practices disrupt traditional practices, this initiative is in search to subvert consumerism and pos-conflict.
—"What would you think about these glasses, made by people who opt-out the conflict and nowadays create peace? What would you think when realizing it was product of the experience transmitted from a community victim of the conflict?" — Disruptive Consumerism
Having in mind Mobile Devices peripherals, I set onto creating a more playful interaction. An interaction from the intersection between common gestures in the real world and Mobile Phone's accelerometer.
I've borrowed two playful gestures from daily observations the reflexive spinning and the swift juggling. Two gestures that could be technically feasible and experientially engaging.
I've decided to simplify the interface towards the new experience. The accelerometer remixes the images, and a tap shows the prompt from a generated text. This text is a computational mix from the description of the objects shown on screen. This way, people can be inspired visually and textually.
The interactive prototype was made in Javascript using Cooper Hewitt Museum's API, a RiTa a toolkit for computational literature and the p5js library. This is where the Interactive Prototype can be experienced.
Through Javascript, I'm retrieving all the data from the Cooper Hewitt Museum including images and text from their online exhibition data base. I clean the information and select a topic, in this case, all objects in the museum related to 3D Printing.
Turns out the spinning gesture is one of the blind spots in Phone Accelerometers. This is why, the prototype will only respond to juggling-type gestures.
By retrieving the descriptions from the 3 objects shown in the screen, I create one phrase by remixing the tokens through a set of computational procedures. Every time the images shown change the tokens by which the phrases are created change.
Even though the prompted phrases have grammatical errors, embracing the computational glitchiness aligns with the overall playful and mind diverting concept of overcoming a creative block.
Empower women through inconspicuous stealth technology. If there shall be an outrageous moment of despair from a potential sexual assault, take action through corresponding means. Inspired by the combination of merkins, venus flytrap carnivore plant and bear traps, the Surface Traptor is a concept to counter-balance unjust and outrageous attempts of these sort.
The Surface Traptor is a device activated by sEMG (surface electromyography). In the medical industry, sEMG are used for diagnosis, but this can could sourced towards the mechanism of setting the Surface Traptor. According to the “Functional Anatomy of the Pelvic Floor and Lower Urinary Tract” by Daniele Perucchini and John O.L. DeLancey, the pelvic floor can be the muscle in charge of triggering the device. Specifically, there could be three potential female pelvic muscles: the legator animuscle (ATLA), the puborectal muscle (PRM) and/or perineal body. According to Clare J. Fowler and David B Vodusek in their “Electrophysiology” work, they write that around 50mV could be considered as a good signal for the surface electromyography sensors, since their recordings are likely to give the best results. Ideally, the Surface Traptor should be made from the material Buckypaper, which unreliable sources –Wikipedia– 1/10 and potentially 500 times stronger than steel. Combine that with a sharpen edge, and that's what the Surface Traptor is.
However for the heart fainted and non-believers the activation could also take place wirelessly, through Wonkeun Youn and Jung Kim’s work, “Development of a Compact-size and Wireless Surface EMG”. They’ve developed a system that’s 37 * 17 mm2 and 19gs. With this wireless component, women could trigger the Surface Traptor through whichever other muscle they’d like to. After talking with Almudena, she helped me realize that calf activation could be a potential useful trigger interaction. Given to the use of calf muscles, it seemed that in a potential adverse situation, these could be a very convenient way of setting off the device.
After an informal conversation with Sue —name changed— I've reconsidered my initial idea of having a merkin that reacts to females sexual arausal, and began exploring the scenario around anti-rape devices. As she explained, having that female arausal less evident than male bodies made her felt somewhat empowered, even though there still are visible signs around it. This is one reason I've started exploring beyond this idea, onto a mix between merkins, body-reactive and carnivorous plants.
The scenario I've started looking at is contemporary ways of avoiding rape. Even though I'm aware that the conversation, or speculative design shouldn't be directed towards avoiding rape from the victims perspective but guided towards the perpetrators, I've began exploring female anti-rape devices nonetheless. Its unexpected yet assuring how varied products are behind this outrageous phenomenon. Some that stand out are:
Here are a couple sketched ideas towards this path
Image from "Pubis Postiches" article in VICE Fahsion, France
For a general idea, concise article with interesting facts of what a Merkin is, if not familiarized with the term, visit this link "Pubic Wig Fashion". Merkins' broad use remain a niche market product. However, its audiences nowadays are mostly film industry and underground art scenes. For example, merkin's Wikipedia image article is a wig worn at the Burning Man festival. Besides merkin's current audience, there are three tentative concepts to arbitrarily explore:
Through associating the "TATA TOP" with merkins, both as wearables, the movement "Free The Nipple" emerges as a thriving campaign that's creating a lot of momentum. Free The Nipple advocates to "empower women [...] and stand against female oppression and censorship[.]" The issue around inequality of top-gender exposure is what drives its agenda. Consequences for female topless exposure can cause a woman up to three years in jail and $2,500 in fines. "Today, in the USA it is effectively ILLEGAL for a woman to be topless, breastfeeding included, in 35 states". The idea and logic behind its illegality reveals its coherent narrative and brave endeavor. Paradoxical facts ranging from what Violet Rose's remarks, "[i]t is illegal for women to go topless in most cities, yet you can buy a magazine of a woman without her top on at any 7-11 store. So, you can sell breasts, but you cannot wear breast, in America." (Alex S. Myles, in "Female Nipples causing an Internet Storm", extracted Sep. 11, 2015) Onto socially media policies like Scout Willies reflection on her Instagram banned account, "[w]omen are regularly kicked off Instagram or posting photos with any portion of the areola exposed, while photos sans nipple—degrading as they might be—remain unchallenged... So I walked around New York topless and documented it on Twitter, pointing out that what is legal by New York State law is not allowed on Instagram." (Alex S. Myles). Moreover, it was interesting to discover through this article and by Scout's account, that in the 1930s men's nipple exposure was illegal and after protesting, by 1936 men's bare chest were accepted.
