Tags: #shift-nudge #ui-design ## Final(ish) Concepts If you want, you can poke into the Figma file [here](https://www.figma.com/file/ijg2qD4mMMswcyJL7AADJC/2-%E2%80%94-Typography---Bobbie?node-id=22742%3A4763) and check out all my initial explorations and revisions. Beware, it's a mess in there. ![[sn_final_font_weight.png]] ## Prompt Design a conceptual "Settings" screen for controlling a coffee cup via a mobile device. Parameters for the design: - Use the SF Pro font. - Assume that the would'be coffee cup is already connected to your phone. - Use no more than 4 type sizes for all your data. Use either 24pt, 17pt, 15pt, or 13pt. - Design on either an iPhone X canvas size (375x812) or the size of the device you have in your pocket. If possible, mirror to Figma, etc. while designing. - Try to use text as much as possible as the interface. Try not to rely on too many boxes or button shapes. Think of this as a coffee cup for typography nerds. - Possible attributes for the settings screen to design: - Name of Smart Cup - Temperature of liquid (possible notification when desired temperature has been achieved) - Cup LED color - Status of cup - Last used time and date - Battery percentage - Check for updates - Firmware version ## Initial Submission ![[sn_font_weight_initial_sub.png]] ## Feedback Sought 1. How can I improve on using text as the interface? I think I still relied a lot on the shapes of boxes to guide the interface. 2. How can I improve on my typography decisions here? I find that I gravitate toward using Apple’s Human Interface Guidelines directly, maybe there’s room to break out of that. 3. Overall, how can I improve on the goal of creating a Settings screen? Does this effectively display the coffee cup information to the user? Does this allow the user to control the coffee cup effectively? ## Feedback Received - In the settings menu, consider removing the dotted line, making it not dotted, or using a lighter color for the line. - If focusing on making the typography the interface, consider removing the coffee cup illustration and seeing what happens if all you use is typography. You could go more dramatic with the type sizes. - Consider removing the coaster. It stands out a lot on the background and doesn't seem to be adding information on the page, or achieving the goal of using text as the interface. Overall, I personally was not happy with this homework at all. I struggled a lot with the idea of using text as the interface, and this was an uncomfortable moment for me as a designer. In my everyday work I'm typically working from an existing design system. I realized that I absolutely hide behind boxes and button shapes. So I scrapped this design and started from scratch. --- ## Second Submission ![[sn_font_weight_second.png]] ## Feedback Sought 1. How can I improve on using text as the interface? I think there’s probably some opportunities with the bottom menu buttons, and maybe with the cup info in the header. 2. How can I improve on my typography decisions here? I stayed within the four type sizes constraint, but perhaps there’s room to simplify further with styles? Or maybe I shouldn’t shy away from all the styles, as long as there’s a reason. 3. Overall, how can I improve on the goal of creating the coffee cup status screen? Does this effectively display the coffee cup information to the user? Does this allow the user to control the coffee cup effectively? ## Feedback Received - **Consider increasing font weight on buttons to better signify an action.** In the original submission for this round I had the button labels at 17pt/SF Pro/Regular. I bumped the font weight up to 17pt/SF Pro/Semibold, and I agree that the button labels now better signify an action. - **Consider consolidating the app info (the "last used date" and the software version) to one line.** I experimented with this and ultimately landed on removing the last used date. Of course if this were a live app I'd lean on any research about what our user might want to see the last used date for, but for our fictional user, I think we can remove it, or tuck it away in settings somewhere. - **Consider consolidating the battery and connected status to one line. Also, is there a way to further show the connected status--perhaps with color?** I consolidated the battery and connected status to one line and added icons for both. Although the purpose of this homework is to lean into using text as the interface as much as possible, I do agree that it is helpful to have iconography here to support the text. - **Consider reversing hierarchy - using large 48pt font but thin weight for the temperature (140 F) and the smaller 24pt but bold weight for drink status (ready to drink) seems conflicting.** I went back and forth on this, I'm not sure whether coffee lovers would find the temperature or the drink status more important. Ultimately I opted to prioritize the temperature, giving it a large 48pt font with a "black", the heaviest weight. For the drink status I also added back some of the language from one of my earlier drafts, saying "Bobbie, your cappuccino is ready to drink." instead of "Ready to Drink". Thought it provided an opportunity to play with the typography some more and add some contrast to the drink name (cappucino) and drink status (ready to drink). - Made some tweaks to spacing to make the overall layout more balanced. - For the drink presets - **It's not clear if this is an actionable selection state or an indicator of the drink in the cup. Can you tap on this? If not, perhaps darken the others? If so, I might try for another way to display the items here. One other note is to consider all of the screen sizes that exist within the world of iPhone. Would this layout work on the smallest one? The largest?** I tried a couple of ideas you can check out in the Figma file, such as a carousel, decreasing # of items, and adding a background to denote the selected state. What I landed on was to decrease the number of presets and reduce the layout to a two column grid, which should work better at smaller widths (and with longer preset names). I also added a background to the selected preset. I'm not too happy with the background because I use the same type of background for the menu item buttons, and they're different things! Drink presets are selectable states for you drink, the menu item buttons wil navigate you to different screens. I even tried removing most of the menu items to see what wil happen. I also tried using a different color for the drink preset background. Not 100% happy with this, but in the interest of time I'm going to move on. If the inspiration strikes me later on I'll come back and work on it. ## Final(ish) ![[sn_final_font_weight.png]] ## Learnings 1. I procrastinated on this one for a while! This is a reminder to me to submit for feedback even if I am not happy with it yet. 2. I’m pretty happy with how this came out. I found it quite challenging to stick to using type as the interface, I realized I’ve definitely been using boxes and other interface elements as a crutch. Enjoyed the opportunity to experiment and improve at typography. 3. Wondering if sticking to type as the interface makes things a bit murky accessibility wise. I’d think that the difference between the unselected and selected drink presets might be slightly difficult to see. But perhaps it’s worth playing with as an academic exercise. --- Created: January 6, 2021 Last Modified: January 6, 2021