https://www.mathlete.com/portfolio daily 1.0 2023-11-13 https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220654526-FF3A37X7HNV84L7VPTYO/Breakout-A-1225.png Matty Sallin - In Breakout: The ball bounces upward off paddle towards the blocks. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/2495c9ac-74fc-4ad9-9bb7-d3ddc282955b/QWERTYBall_%F0%9F%94%8A.png Matty Sallin - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220654539-YGODPR60OW3E9MATWDVH/Breakout-B-1225.png Matty Sallin - In Breakout: The ball bounces downward off a block, destroying that block. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/9282d9d8-c4e4-4ba5-8b88-e4af03c00ecf/Game_Over.png Matty Sallin - Game over I thought it would be cute to make the Return key the submit button for entering your name, but this was abandoned in favor of a simpler modal window. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/74d11972-6440-42ad-9906-d3369cbde362/Left_Bounce.png Matty Sallin - Right bounce Ricocheting off the top left, the ball heads to the right. The user blocks the ball again by hitting a group of keys. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1842c83e-af77-44fa-8af2-2ba5d3e53a5d/resizeCanvas.png Matty Sallin - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/c00e6ac5-0e18-4292-9c4c-95cb93e1907e/Rest.png Matty Sallin - At rest Initially, there’s just a list of high scores and an invitation to play. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/f94a8153-a47a-4c55-8346-c305955c9dd9/QWERTYBall_Architecture.png Matty Sallin - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/736c0ac4-0f30-4d08-aba2-db19daa46f8a/Right_Bounce.png Matty Sallin - Left bounce As the ball heads to to top right of the screen, the user blocks the ball by holding down a series of keys. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/c28e0261-eea9-4754-bf27-4f70a8720fd3/Testing.png Matty Sallin - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/27145291-8abb-4e58-8004-1e10291a2be4/keyboardRow.png Matty Sallin - Transposing the keyboard onto the screen Not all keys are the same size, so the proportions need to be right. A spacebar is 5x the size of a letter key. Each key needed a reference name, a position described by row number and position number, a number of segments wide the key is, and a binary status indicating if the key were depressed or not. For example, the ⌘ key is referred to as “MetaLeft”, it’s in Row 4, Position 3, and is 1.5 key segments long. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/05a02293-d57e-49c1-9933-c9e5ac7e43b1/Sounds.png Matty Sallin - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/28f5a213-0b4a-41b9-afa0-1cad57708222/Init.png Matty Sallin - Game starts A ball appears at the center of the transposed keyboard, moving outwards. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220654554-87LSBQRFYPT70KNH3AAN/QBall-A.png Matty Sallin - In QWERTYBall: The ball bounces upward off spacebar towards the keys. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/9449932c-153b-4a27-81e1-87c987fbee15/collisionDetection.png Matty Sallin - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220654558-VT6FLN9I3VCX3NEYFJ2F/QBall-B.png Matty Sallin - In QWERTYBall: The ball bounces downward off a key, forcing the user to hit other keys to keep the ball from leaving the keyboard area. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220729711-MWH7VUZL73P8M2F4Z27D/Text--Setup.png Matty Sallin - Observation & Problem Statement Everyone I spoke to hated making budgets. They complained about the tedium of making a budget by hand, and they complained about the inaccuracy of automatic budgets like the ones Mint creates. Problem Statement: How might we keep a user’s finances on track without a traditional budget? https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220691836-0MYC8LGZ6SVG9TG1O1YU/Gray+vs.+Not.png Matty Sallin - Spent Money on Home Screen? I originally wanted to show spent money—depicted in gray portions of the stacks—on the Home screen. I thought it was important to show how much had been spent since payday. Turns out, users found the gray portions confusing at first, so I got rid of them. As a result, the Home screen was much more vibrant. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220742316-LYUS0FYVYEOPA5Z5STBF/Text--Goals.png Matty Sallin - Observation & Problem Statement During interviews, many people didn’t know how compounding interest worked or different between a 401(k) and an IRA. Their eyes glazed over when I would try to explain it to them, and would eventually admit that they didn’t want to learn. One said, “I don’t want to learn the finer points of personal finance. Just tell me what to do!” Problem Statement: How might we allow users to reach their financial goals without having to define them themselves? https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220672919-PBXT3DYVQ62F22LHRBMI/Setup-02.png Matty Sallin https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220691813-1511NO6EW9540ZIRY034/Home+to+Drilldowns+copy.2019-10-30+21_33_41.gif Matty Sallin - Final Version I wanted a crystal-clear connection between the Three Stacks on the Home Screen and the contents of each stack. The answer was to split the stack apart to show how each stack was earmarked. The animation also added a little visual delight, and users liked it. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220701017-I8JG974VRMJQY7WF72DM/Sketches+Keynote+Sq.05.png Matty Sallin - Exploration: Spent vs. Remaining Money I got positive feedback from my users for the isometric stacks design I used in the Concierge Version, so I decided to move forward with it. Here are a bunch of different sketches I made of how they could be arranged to show your Spending Per Day. I chose to use gray to denote spent money so the user could tell at a glance what was spent vs. what was remaining. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220672947-MLDKIVLJS1ZK9X2YGTFQ/Bills+Final+Copy+4.png Matty Sallin https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220691820-05Z7GVE2CJG24CIRYPII/Text--Home.png Matty Sallin - Observation & Problem Statement In a competitive assessment of personal finance apps, some users expressed frustration with the reliance of pie/donut charts as the only significant graphic component. One user said, “A pie chart show proportion. It doesn’t show me how much I’ve spent or how much is left”. Problem statement: How might we visualize a user’s money in a way that helps them understand where they stand financially? https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220742309-YDPRNWO3VEHDLAAUFNR0/Ghost+Stacks+Variations+v02b.png Matty Sallin - Explorations: Partial Stacks Once I had decided to represent money with the stack graphic, I needed a way to show progress towards a goal using the stack. The idea of showing a clear or vacant portion of the stack was moderately successful in testing, but it was the dotted-line approach that best communicated anticipated funds. This is also used in the Bills section to represent bill money that is only partially earmarked. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220742281-L95JQWD9MN7QRY25AABH/Goals.2019-10-30+21_38_33.gif Matty Sallin - Final Design Here’s how Goals works: Any money left over after Spending and Bills is directed towards Goals in a specific order, depending on the user’s balances in their savings account and on their credit cards. If we detect any high-interest debt, that is prioritized first. If there’s multiple credit card debts, we prioritize the smallest debt first, using the Debt Snowball methodology. Once the debt is paid off, we focus on savings. If we detect less than a 3-month Emergency Fund in the user’s Savings account, that’s the next priority. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220701028-YDESJYW3SNQWEKWM0MWL/Wireframe--Spending.png Matty Sallin - Exploration: How to Communicate Amount? When you look at a bank statement, there’s little visual difference between an $19 expense and a $91 expense. At a glance, the glyphs take up the same amount of space even though there’s a nearly 5x difference in value. So I took the opportunity to show a different stack height for different amounts of money whether it was spent (gray) or remaining (green). https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220742290-4OP8WYIHT3CQ106A4QR2/Concierge+Checklist_0.4.png Matty Sallin - The Big Idea: Don't Ask What They Want, Give Them a Plan For my initial set of test users, I customized this “Goals Checklist” according to my analysis of their financial situation and sent it to them as a PDF during the Concierge version of the service. They found the sequential aspect satisfying, but the most telling response I got was “That’s great, but can you just do it for me?”. I realized there’s a whole segment of the population who doesn’t want empowerment per se, they want automation. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220729682-5GAMW6AAJOQMYULMPRTU/Analysis_and_SetUp_Email-EmilyLeys_2014-05-16b-Sq.gif Matty Sallin - Experiment: Concierge Prototype To test the concept of 3-category macro-budgeting, I devised a “Concierge Prototype” of the service. I asked 8 test users to share their transaction data with me, and used statistical analysis to determine their paycheck and monthly bills. I used that information to break their income down into the three categories I was focusing on. I created a financial assessment and emailed it to them as a PDF. The dollar graphic and visual breakdown tested well and gave me the confidence to move forward with an app design. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220729660-5J61NGH244RKNHF7OITP/IntroAnimation-v16_1sec_ExtraLg_15fps-Op.gif Matty Sallin - Exploration: Isometric Stacks It sounds obvious, but research shows that consumers have an easier time associating graphics with money if the graphics actually depict money. I first tried out the isometric look for an animated demo I made, shown here. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220712516-PG19NU0WWUYA8Q00Z0RC/Bills.gifcask.2019-10-30+21_44_55.gif Matty Sallin - Final Version At the top are different amounts of paid bills, followed by the remaining earmarks for Near-term Bills. At the bottom are the partial earmarks for Far-term Bills. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220742303-FPZ83KI08QRQQE8JOMYA/Goal+Variations+Copy+3.png Matty Sallin - Explorations: Goals Our users didn’t want to choose their goals, learn about money, or discuss their finances, they just wanted the best practices of Personal Finance applied to their situation. I took the checklist from the Concierge version and sketched out a few designs for an interface that displayed (1) the entire list of goals, (2) which goals they had achieved, (3) and what their progress was in the current goal. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220672906-JJMPF1FM0ZCGCANT1KX4/Logo-v32--tight--wide.png Matty Sallin https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220701050-E1BQ29KTHQSH8CQKEHFR/Text--Spending.png Matty Sallin - Observation & Inspiration The most common financial issue in my interviews and online surveys was overspending. When I asked, “Was there a time when you felt your spending was in line with your earning?”, a subject talked about a recent work trip when they had a Per Diem. Determined to not spend any of their own money, they stuck to the $75/day allowance their company offered them for a week. I wanted to explore this idea to see if a user’s own spending money could be structured as a Per Diem. Problem statement: Could an allowance help users pace their own spending? https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220672941-34MTIM6500KNAQ31M3QW/Final+Spending+in+iPhone+Copy.png Matty Sallin https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220701042-3EG3U012XVGMCOJP9GYN/Spending.2019-10-30+21_40_21.gif Matty Sallin - Final Design At the top are different amounts of spent money arranged by day, followed by the remaining Per Diem. At the bottom is the anticipated next paycheck. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220712547-9TCN1MZM0OWYHZS9ACUY/Text--Bills.png Matty Sallin - Observation & Inspiration One of the people I spoke to explained that her attitude towards money shifted dramatically when she paid her rent, as it was her biggest expense by far. I was inspired to see how our fixed monthly expenses could be balanced out throughout the month to alleviate this lopsided situation. Problem statement: How might we smooth out a user’s cashflow so they don’t ride the rich-poor rollercoaster? https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220712506-3ZD7FXFFTTXFKEP6PVXS/Budgetaganza_v01.png Matty Sallin - Experiment: Balancing Expenses Over Time To try this idea out, I tallied up all my fixed monthly expenses aside from my rent and found the total was about the same as my rent. Since my rent is due on the 1st of the month, I manually changed the due dates for all my other bills to the 15th of the month. Since I got paid twice a month, I saw that if I put my first paycheck of the month towards my rent, and the second paycheck of the month towards all my other bills, I would have approximately the same amount left over to spend. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220712495-6VA1QVURK4FK859T2R0Z/DailyEmail-v02.png Matty Sallin - Exploration: What Does Prorating Look Like? The first priority of the Bills feature was to make sure the user had 100% of the money needed for bills that were due before payday—these I termed “Near-term Bills.” The second priority was to earmark 50% of the money needed for bills due after payday, which I called “Far-term Bills.” I first set out to make a chart that showed what was earmarked for Near-term bills vs Far-term Bills to see if people could understand it. The full rectangles compared to the rectangles made of dotted line tested well, so they persist in the design today. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220701002-Z7EHAIIOQF0API53E2TU/Per+Diem+Sq.png Matty Sallin - Exploration: What does a Per Diem look like? This is an early implementation of three different toggles of the same screen. This is the first time I split the stack apart to show a daily spending amount, a design which carries through to today. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220712525-H572AKZGIRT7X1CGHRA5/Higher+Fidelity+Sketches-Bills+v02_1x.png Matty Sallin - Explorations: Color and Layout of the Dollar Stack The dollar stack graphic was a big hit with the users of our Concierge Prototype. I played around a bit to find a balance between information density and busy-ness. I also tried out using red instead of purple to represent bills, but eventually went back to purple. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220729698-CY03BXMH5JSP73SWJ9QK/Setup.gif Matty Sallin - Final Version Users felt the Setup process was too long, so I used chevrons to indicate what step they were on. Finally, I added a screen at the end we called “Your Paycheck Plan” to summarize the user’s new paycheck budget. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220712481-KEJ3T9ULFVDOA2GG18VZ/Prorating+Demo_v01.gif Matty Sallin - The Big Idea: Prorating Per Paycheck About half the US is paid weekly or every other week, which doesn’t line up nicely with monthly expenses. While the original idea was to balance monthly expenses across two paychecks, I realized I needed to make the system more flexible. If enough of a cushion was saved up initially, you would be able to prorate all fixed expenses per paycheck, resulting in smooth cash flow. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220700994-K1V5FITE60TMVAP9WEHE/Mobile+SSheet+Sq.png Matty Sallin - The Big Idea: Per Diem as Allowance for Grownups To test this idea, I created a spreadsheet on my phone that divided my checking balance by the number of days until payday. Every day I would enter my balance, and it would calculate a daily average or “Per Diem”. While I never spent exactly my Per Diem, there was a natural feedback loop which allowed me to pace my spending. If my Per Diem went down one day, I knew to cool it until it went back up again. I loved this and wanted to incorporate this in the app. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220672928-08MZ6HE4J0DBZBA9SHM0/Home--iPhone-Mag-.png Matty Sallin https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220672950-PQD7HEF4YKT8Y73KIYN6/Goals+with+Frame.png Matty Sallin https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220729638-UTME5SU9I5579TJXTWWV/2013-11-14a-15fps_XtraLg_1sec-Op.gif Matty Sallin - The Big Idea: Macro-Budgeting For a user to break the paycheck-to-paycheck cycle, their income needs to serve three purposes: pay for essentials like bills, pay for everyday spending, and work towards financial goals (like debt payoff, saving, or investing). In the interest of simplicity, I wanted to partition a user’s money into just these three categories. I called this a “Macro-Budget”. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220729672-7M0E5LUCG575EJYMADIW/SetupAnimationBluePurpleGreen_v02-Op.gif Matty Sallin - Testing: Clickable Prototype My next step was to translate the PDF Concierge Prototype into a mobile app. This animation is from a clickable prototype I put on my phone for in-person testing. The most frustrating aspect was that I had to used canned figures for income and bills, and the inauthenticity was a distraction for users. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220675893-AC3IDHEXX8MGAB6RR71Y/7--COMT%2BCopy%2B3.png Matty Sallin https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/f2a1da4f-2012-44e0-8cca-8de565d6c9bb/Genetic_Report_v04_Copy_5.png Matty Sallin Looking for ways to rely on iconography instead of text, I thought of creating a mini helix icon to represent each gene that contributed to the disease we’re focusing on. There’s not really a need to explain what the gene does on this screen, so we removed that. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220675834-K8EU8884TBTIV8ER88O5/Landing--Above_Fold_Only.jpg Matty Sallin https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/f2aacab9-ec7e-465f-b871-35e42b389d6e/IGMT_Copy_18-Blurred.png Matty Sallin After a series of eliminations, I came to an arrangement that had potential. The tones were a little muddy, so I played with the shades, saturation, and brightness to liven it up. As a finishing touch, I added thin white outlines to make the vibrant colors pop even more. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/17fd2dbd-25de-4c2f-b813-7b7f4cdf11f9/7--COMT_Copy_3_Fuzzed.png Matty Sallin The finishing touches were using colorful graphics to explain all the possible variants a user might have, and whether they have it or not. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/29c49726-1df2-4cd2-b272-cc8104380529/Landing%2BCopy%2B9.jpg Matty Sallin After some hunting, I finally found a collection of photos on iStockPhotos of very different people in the same lighting and the same expressionless, forward-facing pose. I tried to choose faces that could have been one of a number of different ethnicities. Colorizing the faces later would further obscure a distinct ethnicity. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/a43fcff2-280d-4f06-9cfb-7dc7376ae26d/Landing_Page-Wider_Copy_2.png Matty Sallin Giving the tiles a charcoal background was better, but still too dreary. And the padding was too great between the tiles. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220679115-MKPL9MTTD3UBKIKQFBI4/Landing_Page__Viewport__Initial.png Matty Sallin At first, I wanted to see how it would look to slightly overlap a series of different faces in the colors of our new palette. These are test images I found through an image search, so they have different lighting and angles. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/750bda4f-b78e-48e9-9522-c83072cc20df/Logo--New--3-2.png Matty Sallin The final result: a more dynamic logo with clearly articulated colors overlapping. The rainbow-like variety that resulted from these colors overlapping does a solid job of communicating the infinite variety of genetic combinations that this company seeks to make sense out of. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/8ef305f3-f815-48bb-8f0c-bba1bca63571/4x6%2BShades%2B01.png Matty Sallin When I happened upon the design for the Landing Page—that of the tinted faces overlapping—I chose those four tints to be our new color palette. The added cool tones of green and blue gave the palette much more flexibility for the app design tasks that would follow. Now I needed to re-do the logo, so I re-arranged the colors in the 24 arrangements possible with 4 colors so I could see which overlaps would come closest to an attractive arrangement for the logo. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/babe8dbf-1b51-4c21-8601-558d206807b5/Gene_Page__GRIK3--T928G_Copy.png Matty Sallin At this point I had established the new color palette and was using our orange and green colors as an outline to draw attention to the callout rather than the yellow background of before. I also adopted a gray background to make the white of the report “page” stand out. I tried to add as much iconography as possible to add visual interest: body parts, genes, nucleotides, meters, and pie charts. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/8072ce2c-0f20-4c49-8837-35306781e477/4x6%2BShades%2B03.png Matty Sallin Key to the color order was the what the resulting circular logo would look like. Here’s the same 24 background graphics with the circle masked in the center. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/2af331f3-c882-4280-85d8-fcdd90f9a1c4/Logo--Orig--3-2.png Matty Sallin The original palette was limited to shades of orange and magenta. The lack of contrast meant that the logo appeared muddled at smaller resolutions. But more importantly, this limited palette didn’t give us a lot of choices when it came to representing data with color. And using color to communicate information was essential to make such a data-heavy service look visually appealing and maintain user interest. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220675858-DPTPECLHRQSMFYMIH5A8/Health+Reports.png Matty Sallin https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/bf2eda2a-2d8a-4ef3-b938-0fc5cc504e35/IMG_1595.jpg Matty Sallin At first, we didn’t really know what we would say on the Disease Report. We knew we wanted a description of the disease, a list of the gene variants the user had that contribute to the disease, and maybe a histogram explaining how the user’s variants compared to other disease sufferers. Beyond that, we weren’t sure what to present. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/719711c4-b16d-4ecf-b5e2-52dfe6b89c46/Precise_ly_Branding_2018-07-31a.png Matty Sallin One of my first assignments was to create business cards. I didn’t just want to drop the logo onto a white background, add the contact info, and call it a day. The original logo was a circle that masked a collection of overlapping area charts. The idea was: if we get a large group of people with a specific genetic illness to track their symptoms, we can observe correlations in the data that can point to novel treatments. This logo represented such a correlation. I ran with this idea and wanted to see what this group of overlapping graphs might look like if we zoomed out to see the whole screen. The result was beautiful and dynamic, so I played around with saturation and outlines until I found a graphic we could use on the business cards. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/abe0370a-2b9c-4564-8fe6-cfca679f3118/Landing_Page-Wider_Copy.png Matty Sallin It was just a quick and dirty sketch, but I realized that if I used our limited color palette to give the report tiles a bit of visual interest, we wouldn't be able to use those colors as visual cues elsewhere. I later decided to reserve green and orange to indicate the lack of or presence of a mutation, and purple-blue was used for hyperlinks. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/10610e99-9dda-46b6-b05a-9003d4f893fc/03a-MTHFR_Compound_Heterozygote_Example.jpg Matty Sallin In this early sketch, the report is divided into two columns: the left column states general information about the gene, while the right column shows the user what variants, if any, the user has, and what it means. The persona for our typical user was someone worn down by their condition, frustrated with the medical establishment, and seeking answers. This early sketch bombarded the user with data that wasn’t pertinent to them, and the text-heavy layout and restrained use of color was visually dull. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/8bbb0769-bad2-4e98-b953-cc8324f2502e/Genetic_Report_v04_Copy_4.png Matty Sallin The founders wanted to see an at-a-glance description of the disease, so I added a right-hand sidebar in a question-and-answer format. But the design remains too text heavy and dull. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/86681efb-7a32-44ff-aed6-a83bb0fa6dbf/Landing--Above_Fold_Only.jpg Matty Sallin After cropping the photos and colorizing them in the brand colors, the effect is complete. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/55177ab6-bb9e-45cc-897f-3a49e39267fc/Landing_Page-Wider_Copy_5.png Matty Sallin Changing from a background color to a colored outline made the layout feel much less heavy. The visual language is being established here—the blue is used to indicate hypertext, and the magenta is used for titles. Further refinement includes tightened-up padding, slight pin-striping to give the page organization, and the addition of small icons to give the page more visual interest. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/d20dcfe0-1bb2-4107-844a-637ea4a7432d/Genetic_Report_v03.png Matty Sallin We tried including a description of what each gene was responsible for, and whether the impact of that gene mutation was “high” or “low”. But designating a genetic mutation as having high or low impact is too reductive—it’s really the combination of genes that cause disease. Visually, it’s still too text heavy and boring. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/7e2512cc-d979-4acc-893a-4c4218e7d4b2/Landing_Copy_9b.jpg Matty Sallin After a lot of playing around, I settled on an order. I wanted a good mix of age, gender, and ethnicity to make the layout visually interesting. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220675877-4VSAIIBQXLN03PA0SWW2/MECFS%2BReport-%2BUnlocked%2BShortened%2BCopy.png Matty Sallin https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/cd544112-276e-403f-8c0f-cd8447ebf89e/MECFS%2BReport-%2BUnlocked%2BShortened%2BCopy-2.png Matty Sallin By organizing the bright blue symptom and organ icons into neat rows just below the orange and green gene icons, I had finally created enough functional visual interest to liven up the screen. I also got rid of any vertical sidebars in the web app and went to an entirely horizontal layout style, which is much cleaner. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/4d51bbfd-a992-46a3-87e9-aac13e58c408/Logo--New--3-2.png Matty Sallin - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220679121-V0SO9ELM31D9S196R1ER/Landing_Page__Viewport__Initial__1_.png Matty Sallin The design starts to look interesting once I made the overlapping more pronounced—where about half the face is overlapped with another face. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/91ae0de9-cff5-4d4c-abae-87b3c9bd9458/Gene_Report__Variant.png Matty Sallin I dropped the two column approach and used a horizontal stacking layout, which is much cleaner and less chaotic for the user to read. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/cb8037a0-25e3-4613-a7ea-d6a0a3e1cd65/Gene_Page__Full_Scroll.png Matty Sallin Going from one extreme to another, this next version was cleaner but colorful to the point of distraction. Clearly the overlapping area graph background wasn’t going to work, but the yellow callout box successfully got the user’s attention and game them the answer they were seeking: what are my results? https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/5afd2aef-564b-4893-afcb-27d754216596/Biz%2BCard%2BBlur_Editable_Copy_2.jpg Matty Sallin This is what I settled on for the early business cards—The overlapping graphs are present but with diminished opacity in the background, and reveal what the circular logo actually represents. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/4ca4da44-001e-4287-b946-35b03305cddd/Health%2BReports.png Matty Sallin The final touches that make the screen complete were making the tiles square for a cleaner look, adding a corner fold to indicate that the tiles represent documents and thus reports, and including the total gene count at the bottom of each tile to manage user expectations. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/d26b9447-edb5-4f2e-9547-6ed4b36b6d1b/4x6%2BShades%2B02.png Matty Sallin Once I figured out an overlap order I liked, I took that one and swapped out all the color positions to find the best ones. I’m nothing if not thorough! https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220739051-62UZN3AGEK9XXW1AQYCK/Matt+On%2C+Sus+Off.jpg Matty Sallin - Make it stand out When Matty walks in front of his sister’s photo frame, her frame of him flickers to life. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220739033-XZQJ19C7MRC77TJ0YABC/Matt+Off%2C+Sus+On.jpg Matty Sallin When Susannah walks in front of her brother’s photo frame, his frame of her flickers to life. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220748226-0TL92RNJBOBDHUUJMGD2/11g+Answerizer+Insights+Final+copy.png Matty Sallin Download the report https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220748220-SR9B6HE69K97Z49SVCJK/11g+Insights+-+Cleveland+Mornings+-+April+2013b.jpg Matty Sallin Download the report https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220748223-0SI0BD7OEHR92OGKAAL7/11g-Springfield_May2013-InsightsReport+copy+2.jpg Matty Sallin Download the report https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220748215-V5MEPYWZ4MNDQ38CTRT7/Header+Image-Colored.png Matty Sallin https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/84708765-d476-4215-8a0f-a29b13fdcfa8/User_Stories.png Matty Sallin - User Stories In my Workflowy outlines, I listed a series of simple user stories that I could refer back to throughout development to make sure I was on track. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/a2726dd0-da61-4464-98f9-332ec4adb8c9/Scrolled+scenario+1.png Matty Sallin - Quick n’ Dirty Wireframes Once I have my goals written out, I like to start wireframing in Balsamiq. The interface is starting to take shape. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/e539329e-f372-4b43-86f9-f555344a5e9d/DebtorToInvestor_Logo.png Matty Sallin - Make it stand out Rough sketches of the logo https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/160bad7e-f17c-4c50-94fb-c4630941f6f7/Screenshot+2023-09-22+at+4.49.10+PM.jpg Matty Sallin - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/ebaffb09-4c84-4cbb-8c8a-49a7f5064995/DebtorToInvestor_Logo_Final.png Matty Sallin - Make it stand out Final version of the logo https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/3fb58cf4-48f2-4e0a-914b-a76e30547308/Debugging.png Matty Sallin - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/ffc22f5f-f636-4807-b29f-c316ded06b37/PriRothSingleTween_js_%E2%80%94_frontend-money-2.png Matty Sallin I ended up creating 36 different screens for different paths the user might take. This required some fairly ridiculous naming conventions. For Roth IRAs alone, I had 15 different scenarios. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/3c5bb0a5-fcc2-4821-bbca-481c7400575f/WorkFlowy-3.png Matty Sallin - Brain Dump With the general goal in mind, I like to do a brain dump into an infinite-bullet app called Workflowy. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/042961e8-a3d6-4bff-9f06-82c60205f3d9/ChooseYOAdventure.png Matty Sallin - Concept No one actually wants to read a personal finance self-help book. Even if you do, you have to slog through all the stuff that doesn’t apply to you. For that reason, I thought a “Choose Your Own Adventure” format would work really well. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/3dd98f4c-142b-43ea-a3ce-e394cd5052a1/DebtorToInvestor_Logic_numbers.png Matty Sallin - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/a4f8b6c9-a676-4cd6-8498-e9b47cb16adc/Investment+v03.png Matty Sallin - Transposing the keyboard onto the screen Not all keys are the same size, so the proportions need to be right. A spacebar is 5x the size of a letter key. Each key needed a reference name, a position described by row number and position number, a number of segments wide the key is, and a binary status indicating if the key were depressed or not. For example, the ⌘ key is referred to as “MetaLeft”, it’s in Row 4, Position 3, and is 1.5 key segments long. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220732684-P7XT8SPK4BA3ARYEGKKY/Kinfo+Logo.png Matty Sallin - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220732690-RKVLWM5UWUTTA2WQR1BC/Kinfo-03-2x.png Matty Sallin - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220646081-4OEXPJPPMJF581OPUN2O/Pulse+Lamp+on+Table-02.jpg Matty Sallin - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/49f9eda3-1207-4430-b848-8e1aee6c8eaf/GQ+Italia.jpg Matty Sallin - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220694754-DQ02BGA6LUZ09Z7PSJKQ/Building+it-v01.jpg Matty Sallin - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220694719-RCOZU4ENJND9NOLU9L28/WakeNBacon+Triptych.jpg Matty Sallin - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220694748-KEG5JLHKUME9HIJ6JP2I/GMA+and+Shark+Tank.jpg Matty Sallin - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220755806-5S2MRQC504CF1OTJSKJ4/Chitchat-FIxedForeground-Crop.jpg Matty Sallin - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220648226-5BGUZH8IP6IAZDPKSE58/Screen+Shot+2018-03-28+at+21.07.58+PM.png Matty Sallin - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220648246-S3JPSWRM5JSTGSK9IVAB/Screen+Shot+2018-03-28+at+02.24.36+AM.png Matty Sallin - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220648236-77ZYQIY16L5UWNYZEHIG/Screen+Shot+2018-03-28+at+21.07.55+PM.png Matty Sallin - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220757717-E9GNA928M6ROKJW4DFQI/admt-Green.png Matty Sallin - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220757767-TWIC77W5XFUSBCHYJA5E/Cubes-Big-v01.png Matty Sallin - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/38a45004-6d0e-42fe-aa4e-8cb8461b3519/1+%287%29.jpeg Matty Sallin - Make it stand out Me visiting the Ad Museum in 2019 https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220757735-MCTU9MQ0AYMNUW4D8RLF/admt-Purple.png Matty Sallin - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220757746-NXTVVPTVRHQVASGA9KF3/admt-Orange.png Matty Sallin - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220675801-5XRMJRWLU2PHQMDK84S4/Landing.jpg Matty Sallin https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220748197-72HNYXDUADZEULSOWIBZ/Banner+Image-Colored.png Matty Sallin https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1693090587659-T297MHRT40ZYGA7HU1MC/1519800919139.jpeg Matty Sallin https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1693265440610-4WEUHBRJ6XNS34Z7VDCF/Matt+On.jpg Matty Sallin https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1694204015274-RU0ZSDWSTR4J6N4KDQ88/QWERTYBall_%F0%9F%94%8A.png Matty Sallin https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1695593305109-8Z76YSIEWOZYVIABRSZP/d2i-logo.png Matty Sallin https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220732654-NKP2RFKLC1L1FTK6CGTV/kinfo-hedge-mom-detail-2.png Matty Sallin https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220646081-4OEXPJPPMJF581OPUN2O/Pulse+Lamp+on+Table-02.jpg Matty Sallin https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220755806-5S2MRQC504CF1OTJSKJ4/Chitchat-FIxedForeground-Crop.jpg Matty Sallin https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1693265931702-AGXYBKMK1XM273DPVVD1/78DA6981-90D5-47BA-8DAB-400F309BDC60_1_105_c.jpg Matty Sallin https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220648253-980VJG7H0QXABJFQSY25/Screen+Shot+2018-03-28+at+21.07.00+PM.png Matty Sallin https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220757690-YNFZ6M1I3RODI5JRI69H/admt-Purple+Detail.png Matty Sallin https://www.mathlete.com/interiors daily 0.75 2023-12-06 https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220660018-91KYK23HUC2ZVV8ZVUZ1/Lightboxes--Stained+Glass+Close.jpeg Interiors 3’x3’ lightboxes in the entryway show transparencies of stained glass William Earley, sourced on the internet https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220659995-D0KKY2LCU5YLL8WSJYFG/Birthday+Party.jpeg Interiors Living room decorated for a birthday party. Table from EQ3, bookshelf from Craigslist https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220660008-F20J9YJAR98ITBWP62YF/Lightboxes--Candida.jpg Interiors 3’x3’ lightboxes in the entryway show transparencies of photographs by Candida Hoefer, sourced on the internet https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220659991-9E03K8L5WO72S6Q31PVK/Sectional.jpeg Interiors Vintage botanical engravings and metal box side table from Alameda Antique Fair, tripod lamp from West Elm (yes, the walls are in desperate need of color, but the landlords wouldn’t allow paint) https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220659987-XL65UGRYGNQ5NLMYLKZZ/Fireplace--Side.jpeg Interiors Moose antlers from Alameda Antique Fair, mirror from Ikea https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220660000-YHBB3RY3EMNRJEAL3FDM/Candles.jpeg Interiors Tablescape of different crystal candlesticks, various sources https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220660005-65WNBLROTXQI9USVXLYI/Holiday.jpeg Interiors Living room festively decorated for a large family Christmas dinner https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220682302-OGV468BV6C88Z9GWMPZC/LR+Mirror+Table.jpeg Interiors Custom mirrored top with beveled edge to display client’s collection of crystal objects. Mirrored Triptych is Venetian dressing mirror, circa 1840. Lamp is antique English Crystal Column with stepped base, circa 1820. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220682370-XLBLXEDIRO91Z1OI0OJP/FR.jpeg Interiors Barcelona table by Mies van der Rohe. Antique Italian open arm chair, circa 1800. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220682362-HC4N0CMNSGSPMTOAKIK2/Breezeway+Desk.jpeg Interiors Desk is a reproduction of Louis VIII writing desk. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220682374-3EB75WGRLC5AXFT07MFG/image-asset.jpeg Interiors Console table is antique English country pine refectory table, circa 1840. Left lamp was custom made from Chinese vase, right lamp custom made from a French desktop statue, circa 1800. Collection of Chinese Porcelain grisaille with animals, figures, and landscapes, circa 1790-1840. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220682345-G7XOZ4CWK5GTSOZ0XR5S/China.jpeg Interiors Antique French iron and brass bread rack with glass shelves, circa 1840. Client’s collection of Chinese and Japanese Blue & White Celadon porcelain. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220682298-KEW71LA3D8XS5EYU5V3V/LR+Card+Table.jpeg Interiors Table custom made from parquet flooring from French chateau. Chandelier is Louis XIII from Robert Minton, shades are custom made from Etsy. Chairs are British Chinoiserie. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220682321-R6IJCE7XYRYDYF5BBRGP/Breezeway+Chest.jpeg Interiors French chest is Louis XV provincial commode serpentine front, singed C. Turcot, circa 1750. Collection of figurines is a mixture of Japanese and Korean. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220682355-FKP0HN95DJFBZGACJPXL/IMG_8036%2Bcopy.jpg Interiors Biedermmeier chard table, circa 1870. Picasso pitcher and platter from the artist’s ceramics workshop is Vaullaris, France. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220682349-LI1W6PD824SPN4KES296/DR.jpeg Interiors Dining room table is Florence Knoll walnut and stainless steel oval conference table from 1950s. Candelabras from MoMA. Chair is antique Irish Chippendale country dining chairs with velvet cushions, circa 1790. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220682330-OFCF3BT5O724R4NCC166/Divider.jpeg Interiors Crystal candlesticks are a mixture of contemporary and antique, various sources. Antique Venetian Mirror is hung on a custom paneled mirror mounted on the wall. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220682377-ECGG6B5R7CZ3SHA4D9M7/Entryway.jpeg Interiors https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220682291-93BI1N7NPDN5DFXPCMZO/LR.jpeg Interiors Glass table is custom made, left side table is 18th Century Toile Chinoiserie tray made into a table. Couches are custom made, carpet is Oushak circa 1840 https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220682365-58OL6YIC4715TFKJYZ05/image-asset.jpeg Interiors Mirror is antique Chinese gold and black lacquered dressing mirror, circa 1830. Santos figure is from South America. Crystal is a mixture of antique and contemporary English decanters. Vases designed by Stig Lindburgh in Sweden, circa 1950. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220682327-2ZHRI8L6LU4UUNU8RG62/LR+Biblioteque.jpeg Interiors French Country Oak Bibliotheque with wire doors and paneled sides, circa 1870. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220688431-ARZZOLLHGU0HHQVSHTGS/Entry+Way.jpeg Interiors Entryway has vintage George Nelson Miniature Chest and vintage globe both from Alameda Antique Fair. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220688421-47BOIFQD2986O0JQJNNA/LR+Eames+Chair.jpeg Interiors Eames lounger and ottoman given to me from my parents as they no longer had room for it. Pillow is Google’s top searches for 2007 from Etsy. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220688411-WE38FSDD3N0FD789PV7Y/LR+Towards+TV.jpeg Interiors Noguchi coffee table, vintage Persian rug and console table found on Craigslist https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220688414-CKQOKVR10MUALV2FPDT6/LR+towards+Door.jpeg Interiors I turned one of the closets in the living room into a bar. You can see the antique butler’s tray topped with crystal decanters sources from the Alameda Antique Fair. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220688427-9JKFLQE8V3ABO5P44ZYM/Hallway+Straight+On.jpeg Interiors Another view of lenticular art from Visionaire 48 https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220688407-4KJSMVY1CJ3ZYEUY4P2X/Corner+Sectional+-+1+of+1.jpeg Interiors My first solo apt in San Francisco! Couch is Ikea, coffee table is CB2, chrome lamp is West Elm, Sputnik chandelier found at a Hollywood prop house. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220688424-5XWXFJ5HLHB1TIOREQ2X/Hallway.jpeg Interiors Ledge display from CB2 holds lenticular art from Visionaire 48 https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220719710-GYT295XEQFUXSV24PD81/LR--Fireplace.jpeg Interiors Couches from Article, vintage Persian carpet from Alameda Art Fair https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220719738-L3WJ2985FYFP1N7XC18R/BR--Painting.jpeg Interiors Detail of painting by René Garcia Jr https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220719695-F3CK8TD1V14DGUBDJF6H/Hallway.jpeg Interiors Menagerie Chinoiserie Wallpaper by Voutsa, Vintage Persian rug, bookcase, and bench from Alameda Antique Fair, nickel-plated manzanita branch menorah from West Elm https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220719715-CUHW6WQHHJCL0IN1IKFE/LR--Hallway.jpeg Interiors Tiffany lamps from Craigslist, succulent pillow from Aure, paintings by Sandra Sallin https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220719743-THO3OQWOKL4MBL0YECSC/DR--Kitchen.jpeg Interiors Detail of Tiger Raj table settings by Lynn Chase https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220719727-UY4QH8P34G3URCV5RQ3T/DR.jpeg Interiors Vintage Singer dining table from Craigslist, tablecloth by Kate Spade, Tiger Raj table settings by Lynn Chase, mirrors from Alameda Antique Fair https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220719748-VQ70M8ZBN6K2K7G6RV27/BR--From%2BHallway%2B2.jpg Interiors Art by René Garcia Jr, vintage Persian rug from Craigslist, paisley bedspread by Ralph Lauren https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220719719-DIVUV9KLP3NSF0GJPZ6N/LR--Long+Couch.jpeg Interiors Another view of the Living Room https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220719733-3204N1XFNY0HWQLHJETI/image-asset.jpeg Interiors Detail of vintage mirrors and crystal decanter collection https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220719702-6MAE8RZ6NPQIEZCIKXFT/LR--Fireplace--Close.jpeg Interiors Vintage peacock fireplace screen from Miss Jessie May’s Antiques in Santa Cruz https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220724381-941GFQ2R4KGDV7X98V0Y/Ovens--Pre.jpeg Interiors BEFORE: Cabinets & oven https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220724342-L80CRFX6WXOAFVL1XWKE/Counter%2C+Sink--Pre.jpeg Interiors BEFORE: Counter & sink area https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220724386-XFIEB4GU1P9HQN043WUC/Range%2C+Sink--Pre.jpeg Interiors BEFORE: Range https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220724395-BJ96HVLSY6R4PBA9NRXD/Ovens--Post2.jpg Interiors AFTER: Cabinets and oven https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220724348-DIJWRZV2DLD3BM6Q5WJ7/Fridge%252C%2BCounter--Post.jpg Interiors AFTER: Counter & sink area https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220724391-SM5CAXRDJ89ME8SO49C5/Laundry%252C%2BWindow--Post.jpg Interiors AFTER: Back wall https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220724361-AB09E297NC3H434FOLB3/Laundry--Post.jpeg Interiors AFTER: Laundry closet https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220724354-RO8VWZGCMWTFM0F4LRSQ/Laundry--Pre.jpeg Interiors BEFORE: Laundry closet https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220724368-PL1EGV8J3836WF6X969Y/Laundry%2C+Window--Pre.jpeg Interiors BEFORE: Back wall https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220724398-G1QRF74PFM6SS6G5002I/Range%252C%2BSink--Post.jpg Interiors AFTER: Range https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220659976-OSRUS9O4JI0MW2OC92TO/Sectional.jpg Interiors https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220682284-4YP8S04NF008KR02V8II/LR.jpeg Interiors https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220688402-805M3W93W1CAU2RMRIIM/Corner+Sectional+-+1+of+1.jpeg Interiors https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220719647-1G5XLSDQVS4SOXF2CB2J/LR--Fireplace.jpeg Interiors https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220724325-B1IUNEJH37UUWWPTNJNS/Ovens--Post2.jpeg Interiors https://www.mathlete.com/salamanders daily 0.75 2023-06-20 https://www.mathlete.com/about daily 0.75 2023-08-29 https://www.mathlete.com/foo daily 0.75 2023-09-24 https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/3c5bb0a5-fcc2-4821-bbca-481c7400575f/WorkFlowy-3.png GENERIC PROJECT - Brain Dump With the general goal in mind, I like to do a brain dump into an infinite-bullet app called Workflowy. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/3a48d77e-8a28-407b-85fa-a9f8255ebdcb/Screenshot+2023-09-22+at+5.41.52+PM.png GENERIC PROJECT - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/3fb58cf4-48f2-4e0a-914b-a76e30547308/Debugging.png GENERIC PROJECT - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/ffc22f5f-f636-4807-b29f-c316ded06b37/PriRothSingleTween_js_%E2%80%94_frontend-money-2.png GENERIC PROJECT I ended up creating 36 different screens for different paths the user might take. This required some fairly ridiculous naming conventions. For Roth IRAs alone, I had 15 different scenarios. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/a4f8b6c9-a676-4cd6-8498-e9b47cb16adc/Investment+v03.png GENERIC PROJECT - Transposing the keyboard onto the screen Not all keys are the same size, so the proportions need to be right. A spacebar is 5x the size of a letter key. Each key needed a reference name, a position described by row number and position number, a number of segments wide the key is, and a binary status indicating if the key were depressed or not. For example, the ⌘ key is referred to as “MetaLeft”, it’s in Row 4, Position 3, and is 1.5 key segments long. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/042961e8-a3d6-4bff-9f06-82c60205f3d9/ChooseYOAdventure.png GENERIC PROJECT - Concept No one actually wants to read a personal finance self-help book. Even if you do, you have to slog through all the stuff that doesn’t apply to you. For that reason, I thought a “Choose Your Own Adventure” format would work really well. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/160bad7e-f17c-4c50-94fb-c4630941f6f7/Screenshot+2023-09-22+at+4.49.10+PM.jpg GENERIC PROJECT - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/84708765-d476-4215-8a0f-a29b13fdcfa8/User_Stories.png GENERIC PROJECT - User Stories In my Workflowy outlines, I listed a series of simple user stories that I could refer back to throughout development to make sure I was on track. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/a2726dd0-da61-4464-98f9-332ec4adb8c9/Scrolled+scenario+1.png GENERIC PROJECT - Quick n’ Dirty Wireframes Once I have my goals written out, I like to start wireframing in Balsamiq. The interface is starting to take shape. https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1695593305109-8Z76YSIEWOZYVIABRSZP/d2i-logo.png GENERIC PROJECT https://www.mathlete.com/4816-ne-15th-ave daily 0.75 2023-12-06 https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220719738-L3WJ2985FYFP1N7XC18R/BR--Painting.jpeg 4816 NE 15th Ave Detail of painting by René Garcia Jr https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220719702-6MAE8RZ6NPQIEZCIKXFT/LR--Fireplace--Close.jpeg 4816 NE 15th Ave Vintage peacock fireplace screen from Miss Jessie May’s Antiques in Santa Cruz https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220719715-CUHW6WQHHJCL0IN1IKFE/LR--Hallway.jpeg 4816 NE 15th Ave Tiffany lamps from Craigslist, succulent pillow from Aure, paintings by Sandra Sallin https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220719719-DIVUV9KLP3NSF0GJPZ6N/LR--Long+Couch.jpeg 4816 NE 15th Ave Another view of the Living Room https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220719733-3204N1XFNY0HWQLHJETI/image-asset.jpeg 4816 NE 15th Ave Detail of vintage mirrors and crystal decanter collection https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220719710-GYT295XEQFUXSV24PD81/LR--Fireplace.jpeg 4816 NE 15th Ave Couches from Article, vintage Persian carpet from Alameda Art Fair https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220719748-VQ70M8ZBN6K2K7G6RV27/BR--From%2BHallway%2B2.jpg 4816 NE 15th Ave Art by René Garcia Jr, vintage Persian rug from Craigslist, paisley bedspread by Ralph Lauren https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220719727-UY4QH8P34G3URCV5RQ3T/DR.jpeg 4816 NE 15th Ave Vintage Singer dining table from Craigslist, tablecloth by Kate Spade, Tiger Raj table settings by Lynn Chase, mirrors from Alameda Antique Fair https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220719743-THO3OQWOKL4MBL0YECSC/DR--Kitchen.jpeg 4816 NE 15th Ave Detail of Tiger Raj table settings by Lynn Chase https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220719695-F3CK8TD1V14DGUBDJF6H/Hallway.jpeg 4816 NE 15th Ave Menagerie Chinoiserie Wallpaper by Voutsa, Vintage Persian rug, bookcase, and bench from Alameda Antique Fair, nickel-plated manzanita branch menorah from West Elm https://images.squarespace-cdn.com/content/v1/6490f1a2cd7938092826138b/1687220719647-1G5XLSDQVS4SOXF2CB2J/LR--Fireplace.jpeg 4816 NE 15th Ave