https://phillipn.com phillip n. Wed, 27 Jan 2021 07:10:31 +0000 https://phillipn.com en https://phillipn.com/BUCKETS Wed, 27 Jan 2021 07:10:31 +0000 phillip n. https://phillipn.com/BUCKETS BUCKETS is the result of 3+ years of documenting Portland’s most unique neighborhood basketball hoops resulting in a brand and coffee table book. ︎︎︎ Branding Book Design Packaging Design for BUCKETS2020 Design &amp; Art Direction: Phillip Nguyen Photography &amp; Videography: Grant Lemons <img width="2560" height="1440" width_o="2560" height_o="1440" data-src="https://freight.cargo.site/t/original/i/2d542876843f37c565156aedf0e9f86ef26e22915a6319760a3bff2c23262d31/cover.jpg" data-mid="97157314" border="0" src="https://freight.cargo.site/w/1000/i/2d542876843f37c565156aedf0e9f86ef26e22915a6319760a3bff2c23262d31/cover.jpg" /> <img width="2560" height="1440" width_o="2560" height_o="1440" data-src="https://freight.cargo.site/t/original/i/0e53809dc186ecf46133f19599d0f9ba3731b425914200d0120d16b1725df656/branding.jpg" data-mid="97157313" border="0" src="https://freight.cargo.site/w/1000/i/0e53809dc186ecf46133f19599d0f9ba3731b425914200d0120d16b1725df656/branding.jpg" /> Beginning in 2017, I was approached by my co-worker/friend, Grant Lemons with the idea of creating a coffee table book that documents our city’s basketball hoops. At the time, Grant and I were already photographing hoops on our own, and the project probably couldn’t have happened in a more organic way. Combining our love of basketball with our skills in design/photography — we had a goal to create an ode to our city of Portland that offers others a unique view of our hometown through its neighborhood hoops. <img width="2560" height="1440" width_o="2560" height_o="1440" data-src="https://freight.cargo.site/t/original/i/721142f32bb2a800fad41873e6975af3116bd01e1c8fa978c84fca33fbd8174a/process-1.jpg" data-mid="97157319" border="0" src="https://freight.cargo.site/w/1000/i/721142f32bb2a800fad41873e6975af3116bd01e1c8fa978c84fca33fbd8174a/process-1.jpg" /> &nbsp; &nbsp; <img width="2560" height="1440" width_o="2560" height_o="1440" data-src="https://freight.cargo.site/t/original/i/721142f32bb2a800fad41873e6975af3116bd01e1c8fa978c84fca33fbd8174a/process-1.jpg" data-mid="97157319" border="0" src="https://freight.cargo.site/w/1000/i/721142f32bb2a800fad41873e6975af3116bd01e1c8fa978c84fca33fbd8174a/process-1.jpg" /> A view into some of the process leading up to the creation of BUCKETS. Zigzagging through countless neighborhoods for 3+ years, we documented over 350 basketball hoops in Portland. Some were found organically through random walks, runs, drives, and even from our friends leading us to them with their awareness of the project.A few of the hoops we held off on capturing until it was the right season to do so as well (ex: hoops surrounded by good amounts of foliage/trees we waited on because we knew it might look better in the Spring or Fall). Looking at all the photos we collected, patterns and pairings started emerging that influenced the overall organization of the book. Through all of this, we ended up with four sections: Place: Hoops defined by their unique placements, environments, or local nods to the city. Color: Hoops that pop through the colors of their&nbsp; details, homes, or natural surroundings. Shape: Hoops characterized by distinct or common shapes. Texture: Hoops with a story you can feel by their age, material, or backboard prints. <img width="2560" height="1440" width_o="2560" height_o="1440" data-src="https://freight.cargo.site/t/original/i/4a8ece84ebafab306da9299b1a46ec598bae9cbf039a0e2b2dd579704958eb79/spread-2.jpg" data-mid="97157321" border="0" src="https://freight.cargo.site/w/1000/i/4a8ece84ebafab306da9299b1a46ec598bae9cbf039a0e2b2dd579704958eb79/spread-2.jpg" /> <img width="2560" height="1440" width_o="2560" height_o="1440" data-src="https://freight.cargo.site/t/original/i/18270e54512d88f450a39c63fca3d70afec76fbd8f2ed414e82b6e7f96e9e158/spread-1.jpg" data-mid="97157320" border="0" src="https://freight.cargo.site/w/1000/i/18270e54512d88f450a39c63fca3d70afec76fbd8f2ed414e82b6e7f96e9e158/spread-1.jpg" /> A few spreads from the Shape and Texture sections. As we were gearing up for launch during the holidays, I wanted the packaging of it to not only act as an attractive gift box, but also as a celebration for the completion of the project that we had the opportunity to share with all our friends and followers who were anticipating the release. Taking inspiration from the tradition of college basketball teams cutting down the net after a winning a national championship, I wanted to bring that same act of celebration into the unboxing of our book. The box included a sticker wrap with a net graphic that the recipient would cut through in order to open the box. Through this included a social media push with the hashtag #CUTTHENET, where buyers of the book reposted their unboxings by cutting the net on their individual packages. <img width="2560" height="1440" width_o="2560" height_o="1440" data-src="https://freight.cargo.site/t/original/i/2f2adb16543614c5efeda5ccf987dfa048a7483cc614698bfec7246190d94202/packaging.jpg" data-mid="97157315" border="0" src="https://freight.cargo.site/w/1000/i/2f2adb16543614c5efeda5ccf987dfa048a7483cc614698bfec7246190d94202/packaging.jpg" />The packaging of the book. <img width="2560" height="1440" width_o="2560" height_o="1440" data-src="https://freight.cargo.site/t/original/i/721142f32bb2a800fad41873e6975af3116bd01e1c8fa978c84fca33fbd8174a/process-1.jpg" data-mid="97157319" border="0" src="https://freight.cargo.site/w/1000/i/721142f32bb2a800fad41873e6975af3116bd01e1c8fa978c84fca33fbd8174a/process-1.jpg" /> &nbsp; &nbsp; Dating back to the 1920s, cutting nets is a tradition in basketball to celebrate a major win. Shown above were a few Instagram Stories we shared with our audience. <img width="2560" height="1440" width_o="2560" height_o="1440" data-src="https://freight.cargo.site/t/original/i/721142f32bb2a800fad41873e6975af3116bd01e1c8fa978c84fca33fbd8174a/process-1.jpg" data-mid="97157319" border="0" src="https://freight.cargo.site/w/1000/i/721142f32bb2a800fad41873e6975af3116bd01e1c8fa978c84fca33fbd8174a/process-1.jpg" /> &nbsp; &nbsp; A few videos showing the cutting of the net and opening of the box in action. Today, Grant and I are still continuing our journey documenting hoops around our hometown of Portland. Through the years, we’ve found these snapshots in time become more meaningful, as some of the hoops we return to are either broken or don’t exist anymore. Learn more about BUCKETS at bucketsbook.co or on Instagram at @buckets.book. https://phillipn.com/Circle-Parental-Controls-App Mon, 19 Oct 2020 03:10:32 +0000 phillip n. https://phillipn.com/Circle-Parental-Controls-App The Circle Parental Controls app helps parents manage their family’s time on the Internet for their connected devices. ︎︎︎ UI/UX Mobile App Design for Circle Media Inc. 2019-present Product Design Lead (UI/UX): Phillip Nguyen Design Intern/Assistant: Parampal Singh Development (iOS): John Anderberg, Michael Higgins, Kia Teymoury Development (Android): Yasin Ahmed, Alec Reyerson, Marco Suson, Reebal Abelson <img width="2560" height="1440" width_o="2560" height_o="1440" data-src="https://freight.cargo.site/t/original/i/7b1bf459e2274ae3f3ae404c2fc71f33376a6818acb5a0850820d218a9193bd6/circle_lifestyle1.jpg" data-mid="85996204" border="0" src="https://freight.cargo.site/w/1000/i/7b1bf459e2274ae3f3ae404c2fc71f33376a6818acb5a0850820d218a9193bd6/circle_lifestyle1.jpg" /> Beginning in February 2019, I was brought on to help Circle improve the mobile app experience of their Circle Parental Controls app. At the time, Circle was undergoing an brand refresh/overhaul that had impacts on the mobile apps—which included updated brand colors, typography, UI components, and illustration/asset styles. <img width="2560" height="1440" width_o="2560" height_o="1440" data-src="https://freight.cargo.site/t/original/i/9780f246ac437aeabf2eeea61bb079e00617c0dcc588f87f98e7af95cfc46401/circle_ui_improvements.gif" data-mid="85995453" border="0" src="https://freight.cargo.site/w/1000/i/9780f246ac437aeabf2eeea61bb079e00617c0dcc588f87f98e7af95cfc46401/circle_ui_improvements.gif" />The before and after of some of the UI improvements of the Circle Parental Controls app. As the sole design lead for the product, I worked closely with the marketing, customer support, engineering teams, and external agencies we partnered with to improve the overall experience not only through visual design—but also from a user experience standpoint as well. I lead the UI/UX design for the mobile app which included updates to: ︎︎︎ Improved app onboarding to avoid user sign-up drop off and hardware set-up confusion. ︎︎︎ Streamlining the sign-in/up process with a UI/UX overhaul, solving for problems we found during usability testing and heard by users and our support team. ︎︎︎ New features such as Focus Time, a feature for parents to set specific times during the day for their kids to only be able to access certain websites (such as Google Classroom, or any education-related app or website) while blocking everything else. ︎︎︎ App prototyping for internal usability testing for new features and designs. ︎︎︎ Overall UI/UX improvements for every feature of the app to get it up to standard with iOS/Google Material guidelines as well as present-day mobile app design standards. <img width="2842" height="1599" width_o="2842" height_o="1599" data-src="https://freight.cargo.site/t/original/i/20c785598df76ff5802daf3a1fa9f745999e4f092535906b0055e80ffb380780/Lifestyle-6.jpg" data-mid="85996425" border="0" src="https://freight.cargo.site/w/1000/i/20c785598df76ff5802daf3a1fa9f745999e4f092535906b0055e80ffb380780/Lifestyle-6.jpg" />Pin-up board breaking down the past onboarding experience before we broke it up and re-designed it. Working under the product team at Circle, we shaped new features and UX updates around what our customers were asking for and what problems our customer support team was hearing. The biggest one included an onboarding overhaul, which was one of the biggest pain points our users were facing. Users were getting stuck at the sign-up/log-in screens, as well as getting confused whether they needed to purchase additional hardware to use the app, all of which we weren’t making clear to them up front (which lead to excessive amount of support requests, as well as user drop-off). <img width="2560" height="1440" width_o="2560" height_o="1440" data-src="https://freight.cargo.site/t/original/i/b1d4d777261255a65fc5daf37feda479fa38ea7e8a3f0019860a7faa7c26071b/circle_usabilitytesting.jpg" data-mid="85996586" border="0" src="https://freight.cargo.site/w/1000/i/b1d4d777261255a65fc5daf37feda479fa38ea7e8a3f0019860a7faa7c26071b/circle_usabilitytesting.jpg" />We did a few months of usability testing via Zoom on real users/parents of the parental controls app to improve features and test out new designs. Working with a UX researcher and inviting new and current users of the Circle product, we also did rounds of internal usability testing that included: ︎︎︎ A/B testing for old vs. new onboarding UX ︎︎︎ Testing a re-designed login experience ︎︎︎ Hardware and app setup ︎︎︎ Family profile setup Using Invision to make high-fidelity app prototypes, usability testing helped us study our users journey through setting up our product. Looking for areas of confusion, pain points, how long it took to set up the app and hardware—we gathered feedback on new features before releasing it to the public. Users shared ideas on what they liked, what they would like to see improved, and what would allow the product to better fit their use cases at home. <img width="2560" height="1440" width_o="2560" height_o="1440" data-src="https://freight.cargo.site/t/original/i/d7e69001fc83a8936f40f3275a2059a70805fa19f4dae01a22c176e155c8cff1/circle_ui_new-copy.jpg" data-mid="85997575" border="0" src="https://freight.cargo.site/w/1000/i/d7e69001fc83a8936f40f3275a2059a70805fa19f4dae01a22c176e155c8cff1/circle_ui_new-copy.jpg" />Left: screenshot from a UI overhaul of the sign-up/login experience (a screen we seen a lot of user drop-off at). Center + right: designs from the Bedtime section. Beginning in the summer on 2019, I was given the opportunity to hire on a design intern. Working with junior designers in both the past and present day, I approached each opportunity from an empathetic standpoint. From sharing stories of my past experiences being a design intern or junior designer, teaching Interface Design at Portland State University, to my present day position—sharing these experiences helped me gain trust and a build connections with those who I took under my wing. I introduced them the latest industry standards in UI/UX tooling (tools such as Sketch, Figma, Overflow, and more), as well as interacting with engineers and product managers, all of which they’ve never had experience with before joining the team. Working closely with them on the product allowed me to not only lead by example myself, but I also gave them moments of opportunity for them to lead smaller projects and present their designs to key stakeholders in the company to build their confidence and experience. We also worked on how to best display their work in their design portfolio by working on pitch decks, case studies, and how to best present their UI and UX work in order to set them off in the right direction as they start to build their young career. <img width="2560" height="1440" width_o="2560" height_o="1440" data-src="https://freight.cargo.site/t/original/i/10824d564b0c29be27fe86c1ff8ebfd88c0879b47ef1056b5e84ecc4dec7d1a1/circle_ui_focustime.jpg" data-mid="85997746" border="0" src="https://freight.cargo.site/w/1000/i/10824d564b0c29be27fe86c1ff8ebfd88c0879b47ef1056b5e84ecc4dec7d1a1/circle_ui_focustime.jpg" /> UI for Focus Time—a feature heavily requested by parents to limit their access on their kid’s devices to non-school related apps during specific times out of the day. <img width="2560" height="1440" width_o="2560" height_o="1440" data-src="https://freight.cargo.site/t/original/i/caf89061c0dc216a4cb57b2f11ca9c865a32a3c43fedb7a1ee8b754a98b035dd/circle_lifestyle4.jpg" data-mid="85997784" border="0" src="https://freight.cargo.site/w/1000/i/caf89061c0dc216a4cb57b2f11ca9c865a32a3c43fedb7a1ee8b754a98b035dd/circle_lifestyle4.jpg" /> The Circle Parental Controls app is available in the Google Play Store and App Store today for Android and iOS devices. https://phillipn.com/YA Mon, 19 Oct 2020 06:04:57 +0000 phillip n. https://phillipn.com/YA YA is a pizza pop-up restaurant serving plant-based sicilian-style pizzas in Portland, Oregon. ︎︎︎ Branding + Art Direction for YA Pizza 2018 External Links instagram.com/yapizzapdx <img width="2500" height="1406" width_o="2500" height_o="1406" data-src="https://freight.cargo.site/t/original/i/89be86c60bf42c307fa29a2da53a754ce71c8823ddc6572d5102f828e80d28b3/slices-1.png" data-mid="86108888" border="0" src="https://freight.cargo.site/w/1000/i/89be86c60bf42c307fa29a2da53a754ce71c8823ddc6572d5102f828e80d28b3/slices-1.png" /> YA is branding for a side-passion of mine—combining both my design and pizzamaking into a thing of its own. It was sparked with the intent to just have a good Sicilian slice that evolved into an obsession over crafting the (in my opinion) “perfect” pizza. 🍕️ Tasks for the creation of YA included: ︎︎︎ Logo design ︎︎︎ Packaging design ︎︎︎ Menu design ︎︎︎ Merch/promo material ︎︎︎ Photography ︎︎︎ Eating my own pizza <img width="2500" height="1406" width_o="2500" height_o="1406" data-src="https://freight.cargo.site/t/original/i/ca6426cf20bd8b993753b84bc449cafbd795fa36a97e0ee088a30acf1ba1d4b4/ya-logo.gif" data-mid="86108901" border="0" src="https://freight.cargo.site/w/1000/i/ca6426cf20bd8b993753b84bc449cafbd795fa36a97e0ee088a30acf1ba1d4b4/ya-logo.gif" />YA wordmark and secondary logo. <img width="2500" height="1406" width_o="2500" height_o="1406" data-src="https://freight.cargo.site/t/original/i/281defea53e6eff906e89f69dc1b5775ed4da265b10317b195fc2f6698e5fd06/eating-w-menu.png" data-mid="86108892" border="0" src="https://freight.cargo.site/w/1000/i/281defea53e6eff906e89f69dc1b5775ed4da265b10317b195fc2f6698e5fd06/eating-w-menu.png" />A couple of YA slices sitting alongside the printed menu. Through the minimal and simple menu, I wanted the art direction and branding for YA to match the food itself. From leveraging the square shape that the Sicilian-style pizza lends itself to, down to highlighting the labor and love that make up the pizza (naturally-leavened 72-hour dough, house-made chili oil, hand-crushed sauce, etc.) I wanted to the brand to own exactly what it was—a quality slice made distinct by its style, ingredients, and time put into it to be at the forefront to sell itself. <img width="2500" height="1406" width_o="2500" height_o="1406" data-src="https://freight.cargo.site/t/original/i/49054c069aac28da279818659143f6a0da29535ff2f345c70fbae64d812b51a1/pattern.png" data-mid="86108896" border="0" src="https://freight.cargo.site/w/1000/i/49054c069aac28da279818659143f6a0da29535ff2f345c70fbae64d812b51a1/pattern.png" />Box liners, pizza toppers, and chili flake packets to make a pattern. <img width="2500" height="1406" width_o="2500" height_o="1406" data-src="https://freight.cargo.site/t/original/i/7d8357d72c5584a9643d0a4e97f81b35d29b4566d29bddf41ed0e3b567219ee4/pizza-pattern.png" data-mid="86108898" border="0" src="https://freight.cargo.site/w/1000/i/7d8357d72c5584a9643d0a4e97f81b35d29b4566d29bddf41ed0e3b567219ee4/pizza-pattern.png" /> Squares on squares on squares. <img width="2500" height="1406" width_o="2500" height_o="1406" data-src="https://freight.cargo.site/t/original/i/b92e5b5e412f87b5cb63c121ee3984a39d166e0c23338ccb18ac674628728e40/loyalty-card.png" data-mid="86108894" border="0" src="https://freight.cargo.site/w/1000/i/b92e5b5e412f87b5cb63c121ee3984a39d166e0c23338ccb18ac674628728e40/loyalty-card.png" /> YA loyalty cards blank and filled. <img width="2500" height="1406" width_o="2500" height_o="1406" data-src="https://freight.cargo.site/t/original/i/430d11026030c65d13c99f3874d339ad38f3320f03130670b6150edb93645e7c/pizza-w-card.png" data-mid="86108899" border="0" src="https://freight.cargo.site/w/1000/i/430d11026030c65d13c99f3874d339ad38f3320f03130670b6150edb93645e7c/pizza-w-card.png" /> “The Potato” pizza—potato cream sauce, yukon gold potatoes, sliced onions, rosemary, parsley, &amp; olive oil on a naturally leavened pizza dough. <img width="2500" height="1406" width_o="2500" height_o="1406" data-src="https://freight.cargo.site/t/original/i/19cc3e2f3ce87186760d13f1e31dd2c189f3cdc33c28081a4340de98070817f6/tote-bag.png" data-mid="86108900" border="0" src="https://freight.cargo.site/w/1000/i/19cc3e2f3ce87186760d13f1e31dd2c189f3cdc33c28081a4340de98070817f6/tote-bag.png" />YA tote bags with the primary and secondary marks. <img width="1920" height="1400" width_o="1920" height_o="1400" data-src="https://freight.cargo.site/t/original/i/5effffed7b00f45bd7fe74e8b6d3187da74051d0245bf1d6cae9950b8a7b6d36/IMG_1980.png" data-mid="86108893" border="0" src="https://freight.cargo.site/w/1000/i/5effffed7b00f45bd7fe74e8b6d3187da74051d0245bf1d6cae9950b8a7b6d36/IMG_1980.png" />YA’s Instagram profile page. <img width="2500" height="1406" width_o="2500" height_o="1406" data-src="https://freight.cargo.site/t/original/i/f840f61fd3259e4c2fb44d517ca3ddceec098ee34eb9014a7c5126f4214f1e2e/crust.png" data-mid="86108891" border="0" src="https://freight.cargo.site/w/1000/i/f840f61fd3259e4c2fb44d517ca3ddceec098ee34eb9014a7c5126f4214f1e2e/crust.png" /> https://phillipn.com/PSU-Interface-Design Mon, 19 Oct 2020 06:04:54 +0000 phillip n. https://phillipn.com/PSU-Interface-Design Interface Design is a class that introduces students to user experience and interaction design using industry standard tools through mobile and non-traditional interfaces. ︎︎︎ Adjunct Professor for Portland State University 2018 Most importantly 🙃: a 5/5 rating on RateMyProfessors (woo!). <img width="2500" height="2819" width_o="2500" height_o="2819" data-src="https://freight.cargo.site/t/original/i/0830e5fc749ff0350fa59a396683046289c9ff82b4ea5c0334a7b970f75d7207/4BD49E66-0732-4FD5-8393-A3CFFADE95D9.jpeg" data-mid="86224017" border="0" src="https://freight.cargo.site/w/1000/i/0830e5fc749ff0350fa59a396683046289c9ff82b4ea5c0334a7b970f75d7207/4BD49E66-0732-4FD5-8393-A3CFFADE95D9.jpeg" /> Beginning with a foundation laid for me by my ex-colleague Matthew Noe, I approached teaching this class through my own experience when I was a student taking the same class I was about to teach. Interface design was the last studio class I took when I went to Portland State for graphic design, and coincidentally the work I got out of it lead to my first job after I left the program. I wanted to curate my curriculum based on what I thought worked well when I was a student, while filling in any gaps with the experiences and skills I learned during my time working as a designer at Uncorked Studios. <img width="1500" height="1000" width_o="1500" height_o="1000" data-src="https://freight.cargo.site/t/original/i/d6eced41197231e7ac377225ce9e2b207488df8c6c44321f89152659ff92620c/Interface-Design-_-Keynote-Screen.png" data-mid="85999684" border="0" src="https://freight.cargo.site/w/1000/i/d6eced41197231e7ac377225ce9e2b207488df8c6c44321f89152659ff92620c/Interface-Design-_-Keynote-Screen.png" />A slide from my first day Keynote presenting who I am to my students. <img width="1800" height="1200" width_o="1800" height_o="1200" data-src="https://freight.cargo.site/t/original/i/5af7500d898ad4de21e6d39406c29d46a813d840d0d3dc7155aae18bb8ae2e1c/Interface-Design-_-Wireframes.png" data-mid="86224024" border="0" src="https://freight.cargo.site/w/1000/i/5af7500d898ad4de21e6d39406c29d46a813d840d0d3dc7155aae18bb8ae2e1c/Interface-Design-_-Wireframes.png" /> Laken Wright’s wireframes and app flow for her mobile app project. <img width="1800" height="1200" width_o="1800" height_o="1200" data-src="https://freight.cargo.site/t/original/i/25c0f0e78c3d09807152a35f11dc01d5ee85f0212d13f426f2874788a69defda/Interface-Design-_-User-Testing.png" data-mid="86224023" border="0" src="https://freight.cargo.site/w/1000/i/25c0f0e78c3d09807152a35f11dc01d5ee85f0212d13f426f2874788a69defda/Interface-Design-_-User-Testing.png" />Eileen Ewing helping her classmate Maryana Kuznetsova prototype out her interactive gym interface based on her storyboarding. Empathy was important for me in each of the terms I taught, as I knew the difficulty for some of my students learning experience and interaction design for the first time during their last term or year in the program. When I was a student taking this class, I remembered how daunting it was learning and doing something new for the first time when I was just about to graduate, in the time that you thought you established your identity and interests in what you wanted to do in design. Prepping to get the job ready, I introducted my students to industry standard tooling. Design tools included: Using Sketch for UX/UI design, InVision&nbsp;for rapid prototyping with tools, and Overflow for UX documentation and design. I wanted to really streamline my term in allowing my students to learn these new tools and put them to use in two projects. Going through the process of UX documentation and research, and using that towards the interface design of their experiences to make portfolio ready pieces (as these students were just about to graduate and/or prepping their design portfolios). <img width="1800" height="1200" width_o="1800" height_o="1200" data-src="https://freight.cargo.site/t/original/i/0e020bd3915c8ac185bd536331f3cc87687c966d991925153a9bd1606b87a551/Interface-Design-_-Rian-Long.png" data-mid="86224022" border="0" src="https://freight.cargo.site/w/1000/i/0e020bd3915c8ac185bd536331f3cc87687c966d991925153a9bd1606b87a551/Interface-Design-_-Rian-Long.png" />Rian Long’s app Rezound that allows you to make collaborative playlists for house parties.&nbsp; <img width="1800" height="1200" width_o="1800" height_o="1200" data-src="https://freight.cargo.site/t/original/i/5ada1049ed25567d746dfeaec7e1774868098184d799aba6acc90bdd84d667d4/Interface-Design-_-Laken-Wright.png" data-mid="86224021" border="0" src="https://freight.cargo.site/w/1000/i/5ada1049ed25567d746dfeaec7e1774868098184d799aba6acc90bdd84d667d4/Interface-Design-_-Laken-Wright.png" />Designed around her frustration of using Facebook for learning about music shows, Laken Wright’s app GIG allows users to learn and interact with upcoming shows while still preserving the beauty of gig posters. <img width="1800" height="1200" width_o="1800" height_o="1200" data-src="https://freight.cargo.site/t/original/i/926bde28ffdef3ab17bcb2f1f76437df23143c162b491ca25d72ef0ae915e36a/Interface-Design-_-Anya-Gearheart.png" data-mid="86224019" border="0" src="https://freight.cargo.site/w/1000/i/926bde28ffdef3ab17bcb2f1f76437df23143c162b491ca25d72ef0ae915e36a/Interface-Design-_-Anya-Gearheart.png" />Anya Gearheart’s input list generator app for my winter term class showcased her skills in smart UI design. <img width="1800" height="2400" width_o="1800" height_o="2400" data-src="https://freight.cargo.site/t/original/i/c1fab8103f6eb2c47b62b13af5f5542ddda7fc4f584ab01ff63cbf67512be868/Interface-Design-_-6.png" data-mid="86224018" border="0" src="https://freight.cargo.site/w/1000/i/c1fab8103f6eb2c47b62b13af5f5542ddda7fc4f584ab01ff63cbf67512be868/Interface-Design-_-6.png" /> A mix of some UI screens from my 2018 winter and spring term students. https://phillipn.com/LEGO-Movie-Maker-App Mon, 19 Oct 2020 06:04:37 +0000 phillip n. https://phillipn.com/LEGO-Movie-Maker-App LEGO® Movie Maker is a movie making app for builders of all ages to record, make, and share their own lego adventures through stop-motion video. ︎︎︎ UI/UX Mobile App Design for LEGO® 2015 Updates Only ︎︎︎ Design Lead (UI/UX): Phillip Nguyen ︎︎︎ Development: Scott Bates &amp; Spencer Williams ︎︎︎ Photography: David Ewald <img width="2500" height="1406" width_o="2500" height_o="1406" data-src="https://freight.cargo.site/t/original/i/6ab3e3b3d914d2bc4e93522d57948048e0446982c21e75ebba7b31a33eaa6ea6/LEGO32x.jpg" data-mid="86226893" border="0" src="https://freight.cargo.site/w/1000/i/6ab3e3b3d914d2bc4e93522d57948048e0446982c21e75ebba7b31a33eaa6ea6/LEGO32x.jpg" /> In 2015, I was brought on this project as a UI/UX designer to integrate new experience features and create new title cards, interstitial cards, and stickers themed after the LEGO® Ninjago series and The LEGO® Movie. After getting briefed on the project, I knew I had to quickly immerse myself in the LEGO® world. so I (willingly) spent weekends watching seasons of the Ninjago series along with The LEGO® Movie. I ended up designing and illustrating 70+ stickers and 30+ title/interstitial cards for the app. For an experience standpoint, I designed features such as designing easy to understand affordances, streamlining the movie making process, integrating “Add from Camera” and “Add from Album” paths, and a “Snap (fingers) to capture” feature in creating a stop-motion video. <img width="1800" height="1200" width_o="1800" height_o="1200" data-src="https://freight.cargo.site/t/original/i/99cf170c15e575235946f1dcf6dfd790fdc620bf57874265f02a3183b45232c8/Lego-4.jpg" data-mid="86226860" border="0" src="https://freight.cargo.site/w/1000/i/99cf170c15e575235946f1dcf6dfd790fdc620bf57874265f02a3183b45232c8/Lego-4.jpg" />Home screen for the LEGO® Movie Maker App. <img width="1800" height="1200" width_o="1800" height_o="1200" data-src="https://freight.cargo.site/t/original/i/3f782525304ba49a403a01632f6ad89cd1627c098bcb30e97baf850fe424bc5d/Lego-_-Movie---Ninjago.png" data-mid="86226855" border="0" src="https://freight.cargo.site/w/1000/i/3f782525304ba49a403a01632f6ad89cd1627c098bcb30e97baf850fe424bc5d/Lego-_-Movie---Ninjago.png" />I spent weekends watching The LEGO® Movie and the Ninjago series to get myself familiar with what I was designing. <img width="1800" height="1200" width_o="1800" height_o="1200" data-src="https://freight.cargo.site/t/original/i/103089a031da4a1ade7b9c22a942256054db62d631dd14aaa88c30a16ec226bc/Lego-1.jpg" data-mid="86226857" border="0" src="https://freight.cargo.site/w/1000/i/103089a031da4a1ade7b9c22a942256054db62d631dd14aaa88c30a16ec226bc/Lego-1.jpg" />Camera mode for capturing screens. <img width="1800" height="1200" width_o="1800" height_o="1200" data-src="https://freight.cargo.site/t/original/i/64ffa44fc4700f342b2db24287f13b2af819c6351ec74d7fd14d153187b49322/Lego-2.jpg" data-mid="86226858" border="0" src="https://freight.cargo.site/w/1000/i/64ffa44fc4700f342b2db24287f13b2af819c6351ec74d7fd14d153187b49322/Lego-2.jpg" />Some of the interstitial cards designed for the Ninjago and The LEGO® Movie theme. <img width="1800" height="1200" width_o="1800" height_o="1200" data-src="https://freight.cargo.site/t/original/i/a0639508d4b2e1721c9605fe00c600b34bedef35bb0ce4c815f63c8729948615/Lego-3.jpg" data-mid="86226859" border="0" src="https://freight.cargo.site/w/1000/i/a0639508d4b2e1721c9605fe00c600b34bedef35bb0ce4c815f63c8729948615/Lego-3.jpg" /> A few of the stickers I designed for The LEGO® Movie. <img width="1800" height="1200" width_o="1800" height_o="1200" data-src="https://freight.cargo.site/t/original/i/2355631a4403e0018742b838ed1649f3b3dfee64b69d3af8bf6be59188c84fdf/Lego-_-Users.png" data-mid="86226856" border="0" src="https://freight.cargo.site/w/1000/i/2355631a4403e0018742b838ed1649f3b3dfee64b69d3af8bf6be59188c84fdf/Lego-_-Users.png" /> A few users using the LEGO® Movie Maker App to make their own stop motion videos with their own sets. Note: LEGO® Movie Maker App was supported up until the release of iOS 10, and is no longer available in the App Store. https://phillipn.com/It-s-Lit Mon, 19 Oct 2020 06:04:19 +0000 phillip n. https://phillipn.com/It-s-Lit It’s Lit was a holiday package made for the friends of Uncorked Studios that included our original hot sauce, a felt pennant, enamel pin, and custom packaging. ︎︎︎ Product + Branding + Packaging Design for Uncorked Studios 2016 Art Direction:︎︎︎ Matthew Noe Design Lead + Creative Direction:︎︎︎ Phillip Nguyen Design Support:︎︎︎ Melodee Dudley, Ali Gary, Emily Skaer, &amp; Miguel Higgins-Moy Photography:︎︎︎ David Ewald <img width="1800" height="1200" width_o="1800" height_o="1200" data-src="https://freight.cargo.site/t/original/i/0e0b1010f06a18368ac7f0cf9408140b92cfe60fa24a2c416e62e51ac1cfcfec/LIT-6641.jpg" data-mid="86227911" border="0" src="https://freight.cargo.site/w/1000/i/0e0b1010f06a18368ac7f0cf9408140b92cfe60fa24a2c416e62e51ac1cfcfec/LIT-6641.jpg" /> A common challenge of giving out gifts each year (whether it be birthdays, anniversaries, holidays, etc.) is how do you better your last good gift? Working with the team at Uncorked Studios, we aimed to top our holiday gifts the previous years by setting some stakes in the ground in determining that we wanted to do: ︎︎︎&nbsp;Make something completely unexpected. ︎︎︎&nbsp;Pick a theme that represented the whole year. ︎︎︎ Making as much as we could in-house and with our own hands. ︎︎︎ Create something that represented our brand through a design POV, without slapping a logo on something. <img width="1800" height="1200" width_o="1800" height_o="1200" data-src="https://freight.cargo.site/t/original/i/ea1065704325da4ba3eadac65d4bc7d2cca8df3b992870d3cf87d3eddba9329c/Lit-7.jpg" data-mid="86227914" border="0" src="https://freight.cargo.site/w/1000/i/ea1065704325da4ba3eadac65d4bc7d2cca8df3b992870d3cf87d3eddba9329c/Lit-7.jpg" />Initial type and sketch explorations for the word mark. <img width="2500" height="2001" width_o="2500" height_o="2001" data-src="https://freight.cargo.site/t/original/i/1034e7eb831462c3856b79faf81aa7f68967eb8b623077182e4a5b91973a7f51/8EB179CE-223C-425A-A4D5-954648E9071C.jpeg" data-mid="86227906" border="0" src="https://freight.cargo.site/w/1000/i/1034e7eb831462c3856b79faf81aa7f68967eb8b623077182e4a5b91973a7f51/8EB179CE-223C-425A-A4D5-954648E9071C.jpeg" />Early prototyping for the gift packaging for the 3 items done in-house with our laser cutter. The design team on this project saw this opportunity to leverage our print roots and skills to showcase our skills outside of digital design, where we made use of tools such as our laser cutter machine we had in house to build and prototype potential packaging options. We landed on using corrugated cardboard to not only house the three gift items, but also we designed it to be durable enough to ship in without damaging any of the contents. <img width="1800" height="1200" width_o="1800" height_o="1200" data-src="https://freight.cargo.site/t/original/i/4a1e36eb8c03d98083a5fba42b19a68a63f74b1f136f3f127467ff0c5d2c2e01/FullSizeRender-6.jpg" data-mid="86227908" border="0" src="https://freight.cargo.site/w/1000/i/4a1e36eb8c03d98083a5fba42b19a68a63f74b1f136f3f127467ff0c5d2c2e01/FullSizeRender-6.jpg" />Pin-up board breaking down the past onboarding experience before we broke it up and re-designed it. <img width="1800" height="1200" width_o="1800" height_o="1200" data-src="https://freight.cargo.site/t/original/i/fcdcc236574cc5f1140896dfaf6ae04cabd8630920168ea2f334a3b5bf068cf2/Background.jpg" data-mid="86227907" border="0" src="https://freight.cargo.site/w/1000/i/fcdcc236574cc5f1140896dfaf6ae04cabd8630920168ea2f334a3b5bf068cf2/Background.jpg" />Our custom box opened up revealing the contents inside (photo credit: David Ewald). Along with doing custom illustration and type design for the pennant and pin, we also had our hands in recipe and bottle design for the custom hot sauce. We worked with Beaverton Foods to come up with our own blend for our sauce where they helped us do variations of the sauce along with some user experience testing with the bottle design to the viscosity and pour of the sauce. Anything we could have our hands in and leverage from a design POV, we tried to maximize with every opportunity. Along with Beaverton Foods, we also strived to work with local and/or respectable companies such as Ways &amp; Means and Oxford Pennant to help produce some of our items. <img width="1800" height="1200" width_o="1800" height_o="1200" data-src="https://freight.cargo.site/t/original/i/b644e1d1e42b204cfb4425034659b3f66c7cd3b8418e2ffe4a18b4f5596af3d6/Lit-6.jpg" data-mid="86227913" border="0" src="https://freight.cargo.site/w/1000/i/b644e1d1e42b204cfb4425034659b3f66c7cd3b8418e2ffe4a18b4f5596af3d6/Lit-6.jpg" /> Bottle production for our Lit sauce at Beaverton Foods (Photo Credit: Matthew Noe). <img width="2500" height="1689" width_o="2500" height_o="1689" data-src="https://freight.cargo.site/t/original/i/1c5368f79fd66893a7f98eba736523e949d250cabdde1c84e8067a92d8807988/LIT-6670.jpg" data-mid="86227912" border="0" src="https://freight.cargo.site/w/1000/i/1c5368f79fd66893a7f98eba736523e949d250cabdde1c84e8067a92d8807988/LIT-6670.jpg" />Bottles of Lit Sauce (Photo credit: David Ewald). <img width="1800" height="1200" width_o="1800" height_o="1200" data-src="https://freight.cargo.site/t/original/i/187a548afaf7c694401524d0c796d8971211b2dc296685abff05bbec94253ac0/LIT-5251.jpg" data-mid="86227909" border="0" src="https://freight.cargo.site/w/1000/i/187a548afaf7c694401524d0c796d8971211b2dc296685abff05bbec94253ac0/LIT-5251.jpg" /> Custom illustrated enamel pin (illustration design by Emily Skaer; photo credit: David Ewald).<img width="1800" height="1200" width_o="1800" height_o="1200" data-src="https://freight.cargo.site/t/original/i/b107fb21294436f230514c91f5c9059835d18661c42fc6633e64856c3e6efdb5/LIT-6480.jpg" data-mid="86227910" border="0" src="https://freight.cargo.site/w/1000/i/b107fb21294436f230514c91f5c9059835d18661c42fc6633e64856c3e6efdb5/LIT-6480.jpg" /> Custom felt It’s Lit pennant (photo credit: David Ewald). https://phillipn.com/Adidas-All-Day Mon, 19 Oct 2020 06:04:29 +0000 phillip n. https://phillipn.com/Adidas-All-Day All Day is a product that empowers behavior change and leads people to healthier lives—whether that be through getting enough sleep, physical activity, practicing mindfulness, or even nutrition. Working in a cross-disciplinary team with Uncorked Studios and adidas, we looked to not only design a beautiful looking app, but also a system to encourage people to build new habits that'll stick. ︎︎︎ UI Mobile App Design for adidas 2017 With the Uncorked Studios team: ︎︎︎ Creative Direction: Felix Ballerstedt ︎︎︎ Art Direction: Matthew Noe ︎︎︎ UX Design: Megan Hansen, Melissa Chan, &amp; Sarah Cespedes ︎︎︎ UI Design: Phillip Nguyen, Ali Gary, &amp; Melodee Dudley <img width="1800" height="1200" width_o="1800" height_o="1200" data-src="https://freight.cargo.site/t/original/i/a96c77f048689b99b731cf3d2b6de18b99428fbb207339bb691d4367abefbeec/All-Day-1.jpg" data-mid="86228333" border="0" src="https://freight.cargo.site/w/1000/i/a96c77f048689b99b731cf3d2b6de18b99428fbb207339bb691d4367abefbeec/All-Day-1.jpg" />All Day home screen that tracks your activity all in one view. <img width="1800" height="1200" width_o="1800" height_o="1200" data-src="https://freight.cargo.site/t/original/i/af72a8458a85cb67b81a7e0a3cc00c8f765691c8bf4c17965eb75a64531bdb5c/All-Day-2.jpg" data-mid="86228334" border="0" src="https://freight.cargo.site/w/1000/i/af72a8458a85cb67b81a7e0a3cc00c8f765691c8bf4c17965eb75a64531bdb5c/All-Day-2.jpg" /> Monthly activity view as well as a recipe library for healthy eating. https://phillipn.com/JB-App Mon, 19 Oct 2020 06:38:28 +0000 phillip n. https://phillipn.com/JB-App Jordan App was an internal team communication app for Jordan Brand. Team members could create custom content feeds based on their individual needs such as news, shoe releases, locations, and more. To help celebrate the user and the brand itself, we built a “Colorway” function that allowed users to skin the app to match their favorite sneaker release from the Air Jordan line. ︎︎︎ UI Mobile App Design for Nike/Jordan Brand 2014 Creative Direction: David Ewald Design Strategy/IA: Justin Spohn Design Lead: Matthew Noe Design Support/Animation: Phillip Nguyen <img width="1800" height="1200" width_o="1800" height_o="1200" data-src="https://freight.cargo.site/t/original/i/02921c9a9c1e4eab3b43723b6258b5bc55a50c16f5fc9420110a74503b4f46c7/Jordan-App-Logo.jpg" data-mid="86229109" border="0" src="https://freight.cargo.site/w/1000/i/02921c9a9c1e4eab3b43723b6258b5bc55a50c16f5fc9420110a74503b4f46c7/Jordan-App-Logo.jpg" /> <img width="1800" height="1200" width_o="1800" height_o="1200" data-src="https://freight.cargo.site/t/original/i/b6dd9f9f1304c62e1968b1fc82039d98c81875afa53ca7d4bc567df48f77f358/Jordan-1.jpg" data-mid="86229107" border="0" src="https://freight.cargo.site/w/1000/i/b6dd9f9f1304c62e1968b1fc82039d98c81875afa53ca7d4bc567df48f77f358/Jordan-1.jpg" />3-way navigation of the app (from left: menu, home screen/feed, messages) <img width="1800" height="1200" width_o="1800" height_o="1200" data-src="https://freight.cargo.site/t/original/i/fdbc392db8491e2680a4a72dd3f711c75c3d5c568a4416a54d46768c6453c309/Jordan-2.jpg" data-mid="86229108" border="0" src="https://freight.cargo.site/w/1000/i/fdbc392db8491e2680a4a72dd3f711c75c3d5c568a4416a54d46768c6453c309/Jordan-2.jpg" />Colorway setting inspired by notable Air Jordan sneakers. <img width="640" height="1136" width_o="640" height_o="1136" data-src="https://freight.cargo.site/t/original/i/e0bcbff42f21efaa367c9459f531af40864c3862ded28bd53a343121e3dc9308/Pull_to_Refresh-v10.gif" data-mid="86229110" border="0" src="https://freight.cargo.site/w/640/i/e0bcbff42f21efaa367c9459f531af40864c3862ded28bd53a343121e3dc9308/Pull_to_Refresh-v10.gif" /> Custom pull to refresh animation we created for the feed. https://phillipn.com/Homepage Mon, 19 Oct 2020 03:10:34 +0000 phillip n. https://phillipn.com/Homepage