https://www.fancynerddesign.com/home daily 1.0 2024-08-28 https://images.squarespace-cdn.com/content/v1/5f09d1d6515ec872b0b7517b/1594489542021-JW1G1N5JYHG1XC9GZG65/App+and+Web+Design.png Home https://images.squarespace-cdn.com/content/v1/5f09d1d6515ec872b0b7517b/1594490127706-2M50IJTHV3LKO6QKISDA/Testing+and+Optimization.png Home https://images.squarespace-cdn.com/content/v1/5f09d1d6515ec872b0b7517b/1594605847303-U1P70J18DVN797Y1CTU9/-+User+Research.png Home https://www.fancynerddesign.com/about daily 0.75 2024-01-01 https://images.squarespace-cdn.com/content/v1/5f09d1d6515ec872b0b7517b/1594593043201-ZBY4O9ZUN1VJ2VQ1XYFG/Photo.jpg About Me Me. A couple of years ago in Santa Cruz. https://www.fancynerddesign.com/test-figma-embed daily 0.75 2022-02-28 https://www.fancynerddesign.com/get-started daily 0.75 2020-07-11 https://www.fancynerddesign.com/get-started/p/relationship-with-youothers-jpx5r monthly 0.5 2019-07-05 https://images.squarespace-cdn.com/content/v1/5ced8e1d5fd4c700018dd761/1560190004400-XTA0DF0S9WOZJUG994C8/Stocksy_txp824ffa5crXt000_Original_845035.jpg Get Started - Relationship with You+Others https://www.fancynerddesign.com/get-started/p/relationship-with-others-amg3b monthly 0.5 2019-07-05 https://images.squarespace-cdn.com/content/v1/5ced8e1d5fd4c700018dd761/1560189982811-KFAJF1TCUH1SXZ827UMC/Stocksy_txp824ffa5crXt000_Large_844923.jpg Get Started - Relationship with Others https://www.fancynerddesign.com/get-started/p/relationship-with-you-k5jmg monthly 0.5 2019-07-05 https://images.squarespace-cdn.com/content/v1/5ced8e1d5fd4c700018dd761/1560189874730-3B0TSLDUHTQ93497V3L8/Stocksy_txp824ffa5crXt000_Large_844934A.jpg Get Started - Relationship with You https://www.fancynerddesign.com/projects daily 0.75 2024-01-01 https://www.fancynerddesign.com/projects/teacher-evaluations monthly 0.5 2020-08-24 https://images.squarespace-cdn.com/content/v1/5f09d1d6515ec872b0b7517b/1594490127706-2M50IJTHV3LKO6QKISDA/Testing+and+Optimization.png Projects - Teacher Evaluations - User Testing & Optimization This project is ongoing! We plan to test the prototypes with 3-5 users of each of the major personas, to find feedback, incorporate it, and improve the design. Once the changes release, I’m advising the client to instrument the code with analytics, so that we can gather quantitative information on the use of the software. We will use this to iterate and improve on the original design over time. https://images.squarespace-cdn.com/content/v1/5f09d1d6515ec872b0b7517b/1594593533468-UC8DP7MH9SEQFIWT54BJ/TV+Visual+Design.png Projects - Teacher Evaluations - Visual Design I chose a visual design, working with the client, that leaned heavily on stock Material Design, to reduce the customization effort on the development team. We incorporated branding on to the dashboard page. The corporate color scheme was brought forward into the new design to provide a sense of continuity. The dashboard was rethought completely, to allow a quick view of the most actionable information. When sections are not needed, they are completely hidden, rather than showing empty tables. https://images.squarespace-cdn.com/content/v1/5f09d1d6515ec872b0b7517b/1594495084002-TTOL7IUBWGT0PGLZU9JC/TV+Before+and+After.png Projects - Teacher Evaluations - What I did The stakeholders knew that the application could not be used on a small screen, and a redesign would be needed. Even a tablet-size screen led to usability challenges for a user. Even if the information was laid out in a readable manner, I suspected there were mismatches between the hierarchy of information displayed and the importance of tasks to the users. The same screen layouts were also being used for 2 user types that had quite different usage patterns. https://images.squarespace-cdn.com/content/v1/5f09d1d6515ec872b0b7517b/1594496459795-5FPKJBSD075JVPCT0SUG/User+Research.png Projects - Teacher Evaluations - User Research I discovered from the team what they felt were the current challenges, based on their experience training and supporting hundreds of users over the years. I quickly learned the user personas, key use cases, and impersonated users to learn the software for myself. To validate the language of the different users and understand task importance, I designed a survey to gather both quantitative and qualitative information about these areas. The survey was easily executed online, and we learned several useful pieces on information: For example, the most important term for the “School Principal” persona, “Evaluations” was rarely displayed in the user interface. In addition, the important Note and Photo Note taking and recording capabilities were inaccessible without several hard-to-discover clicks. https://images.squarespace-cdn.com/content/v1/5f09d1d6515ec872b0b7517b/1594593608277-DAIQC95B5O2K8KPL4T60/TV+Wireframe+Design.png Projects - Teacher Evaluations - Wireframe Design I always start in pencil! I grabbed my trusty notebook and started imagining different ways the capabilities could be laid out. Some of the design challenges included: Many of the screens included large tables, which would not scale well The “School Principal” user had 7 or 8 top level navigation items, which would not scale well to a tabbed display. Many of the evaluation forms to be filled out were large and long, and would be partially filled out over the course of days or weeks, so it was necessary for the user to determine what was still needed to be done. Developers had an aging component library that was in use, and “everything was a table” even when that was not necessarily the best user experience Using the Material Design system, I was able to create a new design that helped solve all of these issues and more. Some especially effective concepts included converting Tables to Material Design Cards at smaller screen sizes, and moving sorting and filtering capabilities (when needed) into a more mobile-friendly layout. https://www.fancynerddesign.com/projects/airline-trip-trading monthly 0.5 2020-07-13 https://images.squarespace-cdn.com/content/v1/5f09d1d6515ec872b0b7517b/1594595101286-6B3Q7SDHBW4V58W5I8OT/eTT+Wireframe+Design.png Projects - Airline Trip Trading - Wireframe Design Progressive disclosure was a key design challenge here. Although the users were technically savvy and used to complex controls in their experience with flying, users could be easily overwhelmed with all of the available options. Following design patterns for filters, such as those found in Smart Playlists, I simplified the initial state. By filling in fields with reasonable defaults, such as generating a name for the notification request based on the criteria chosen, we allowed the users to enter a minimum of information. Automatically loading matching trips once valid criteria were entered into an expandable section, saved the user a step. In the old design the button for this was well-hidden. The expandable section has the additional advantage of not cluttering up the screen if they are not looking to preview trips at the moment. I also determined the most critical information about matching flights to include in the text message notification, to ensure the user could get the info they needed at a glance, without launching in to the web app. https://images.squarespace-cdn.com/content/v1/5f09d1d6515ec872b0b7517b/1594508953611-84GV2C289MQBONSSKABY/ETT+Overview.png Projects - Airline Trip Trading - What I did One of the client’s other products had a similar feature, in a much older design style, and they wanted to bring it to the newer product. However, the older product was not designed with a mobile, responsive mindset, so we needed to keep the interactions familiar, but improve them for better usability. https://images.squarespace-cdn.com/content/v1/5f09d1d6515ec872b0b7517b/1594595399808-SMLQVB6ZHZIZZKUJ55L5/eTT+Visual+Design.png Projects - Airline Trip Trading - Visual Design I diverged from standard Material Design to include smaller sentence-based dropdown controls to allow for a narrative, readable filter that fit on a phone screen. I designed the visual trip indicators that show the segments of a series of flights including layovers and flight durations. For this work, we filed for a U.S. patent for the design. I also located an open source date range selection control for the development team to use, since Material Design does not have a standard one built-in at this time. https://images.squarespace-cdn.com/content/v1/5f09d1d6515ec872b0b7517b/1594595534494-SRFCO69L28W9GYJY6U53/eTT+Visual+Design+2.png Projects - Airline Trip Trading The entire story workflow. https://www.fancynerddesign.com/projects/dealer-management monthly 0.5 2020-07-13 https://images.squarespace-cdn.com/content/v1/5f09d1d6515ec872b0b7517b/1594591704414-YMJ67KCOVER71L9HP4M7/IdeaRoom+User+Testing.png Projects - Dealer Management - User Testing The client had a regular schedule of meetings with their customers and walked through the high-fidelity prototypes with them. The project is ongoing, and we have discovered during the user testing that they needed multiple sets of discounts (one per website). I adjusted the design based on the feedback. https://images.squarespace-cdn.com/content/v1/5f09d1d6515ec872b0b7517b/1594591392449-MYG0UY5TAMBVGSL2JAO3/IdeaRoom+Overview.png Projects - Dealer Management - What I did The client wanted a web app that could error-check the data entry process. Two of the more complex aspects of the setup were deposit amounts and discount tiers. After analyzing the data for existing clients, I suggested a single default set of discount tiers with a configurable override, since clients appeared to use a “standard” discount, and overrides in special cases. Deposits also had a complex additive combination of percentages and dollar amounts that were tricky to get right. https://images.squarespace-cdn.com/content/v1/5f09d1d6515ec872b0b7517b/1594591568985-FXMWSNMK8CKTVF69ID0F/IdeaRoom+Ux+Design.png Projects - Dealer Management - User Experience Design Some of the design challenges for this project included: For deposit amounts, how to allow the user to select an arbitrary number of data ranges that are all contiguous. I added new controls for deposit ranges that were intuitive, to allow clear overriding of default values and splitting of ranges. How to make sure that the client had entered data that matched their intent, especially for discounts. To support this I suggested a Preview capability. Making it possible to change the default deposit amounts early in the client’s setup, but later ensuring that the client does not unknowingly change it and mess up prices for hundreds of dealers. I suggested an extra warning message with very specific wording showing how many dealers would be affected. Since the client was already using Material Design, this project skipped the wireframe stage and went directly to high-fidelity design.