Tags: #shift-nudge #ui-design ## Final(ish) Concepts ![[sn_final_revision_using_reference_material.png]] If you want, you can poke into the Figma file [here](https://www.figma.com/file/5fU9KdH01W70m6P8ixAIg1/1-%E2%80%94-Start---Bobbie?node-id=23111%3A12962) and check out all my initial explorations and revisions. Beware, it's a mess in there. ## Prompt Pick 2 or 3 designs you really like and screenshot them. Write down the things that you feel really make the design work. 1. Using the same style, match the color/layout/typography and create a UI element in the same style--like it would be an extension of the app. 2. Using either the same reference material or a different one, "steal" ONE and only one element ofo the design and remix it for your own design. Use either the same type treatment, color treatment, layout, etc. It's important to pick only one. Try to use it as inspiration and create something brand new. ## Summary ### Dating card component inspired by Co-Star I emulated the Co-Star interface to create a dating card component. I also considered a stocks app screen. In my head, both dating and stocks have a natural synergy with astrology -- it’s all about how we try to make sense of the world around us and act accordingly with the trends and patterns. But ultimately I went with dating. (Check out https://bullandmoon.com for a cool take on stocks and astrology) Not 100% sure on how the UI would work, instead of the swipe right/left to infinity, I envisioned the experience to be more like a user gets 3 “auspicious matches” per day based on astrological signs, and they scroll down through a feed with these 3 matches and decide whether or not to match with them. But I struggled to organize all the info that would be in a normal dating card in Co-Star’s feed style. So what I have here is a more classic dating card, and a “cosmic match” button. ### Space travel booking app inspired by Poolside.fm For this one I used the Poolside.fm layout to design a space travel inquiry/booking screen. Thought it would be cool to combine Poolside’s nostalgic throwback vibes with something far in the future like commercial spaceflight booked by app. I hope it looks new and different enough. Using the same layout makes it feel a little too similar to me. I envision this UI experience to be like a user sees some kind of list of trips -> select one trip -> land on the UI screen I designed -> inquire for more information and a form. ## Initial Submission ![[sn_initial_sub_using_reference_material.png]] ## Feedback Sought 1. For Co-Star dating screen - overall layout. I think the dating card component itself is ok on its own, but it just feels like a plain box. I like how Co-Star’s main horoscope page has no boxes on it and the text floats around on the screen’s space. I tried to do it that way, but couldn’t reconcile it with the UX pattern I have in my head of a dating card you swipe on. 2. For Co-Star dating screen - the “cosmic match” button. Co-Star didn’t really have button styles for me to copy, so I took a stab. It’s not great UX, because a user would likely have no idea what it means initially, but maybe they could learn? Open to ideas. 3. For Poolside inspired spaceflight app - color palette. I went with the black and cream because I figured the app would be showcasing space imagery and wouldn’t want to clash with it, but open to suggestions! 4. For Poolside inspired spaceflight app - does it feel different enough from the poolside app to be novel? I think picking the layout to emulate might have constrained me a bit 5. For Poolside inspired spaceflight app - I used the asterisks/stars both as decoration and to convey hierarchy, similar to how poolside has dots all over the main screen. think that was a good choice? are there other options I could have tried? ## Feedback Received ### Dating card component inspired by Co-Star - Iterate on placement of "cosmic match" floating action button. Would want to see consistent padding around the right and bottom of the button, explore different spacing values. - Agreed, incorporated into final revision. Originally the button was 15px from bottom and 30px from right. I changed this to be 16px from both. - Revisit spacing on the dating proflie attributes (where it says Shepherd, Musician, Psalmist). It all looks pretty wide, and then distance on either side of the emojis look somewhat similar, making it fel like the emoji/text wasn't paired correctly. - Agreed, incorporated into final revision. Tightened the spacing between the emoji and respective text from 11px to 4px. ### Space travel booking app inspired by Poolside.fm - Line height on "What's Included" list feels a bit tight and difficult to read. - Agreed, bumped up to 140%. - Try having the "What's Included" label be a separate piece of text so you have more flexibility around the spacing. Possibly play with a slightly heavier font weight. - Agreed, incorporated. ## Final(ish) ![[sn_final_revision_using_reference_material.png]] ## Learnings 1. try a lot of different things 2. just get started. Co-Star and Poolside.fm designs were daunting to work with, but this exercise is a reminder to myself to not compare my skills, and also that making Co-Star and Poolside.fm is not the point of the assignment. The point is to learn more about using reference material for inspiration. 3. as always, have fun! --- Created: October 21, 2021 Last Modified: December 8, 2021