https://work.claudrod.me Work • Claudine Rodriguez Thu, 21 Oct 2021 12:21:20 +0000 https://work.claudrod.me en http://work.claudrod.me/Untitled-page Thu, 21 Oct 2021 12:21:20 +0000 Work • Claudine Rodriguez 413661 Sh Message me to view select work/case studies. Love, Claudine 🙋🏻‍♀️ <img id="loading" class="z" src="https://cortex.persona.co/t/original/i/2ab1fd528db1ba3faa171856d1759db03259b897edddea25b708deebe4b92d26/fyeo_circle4.png">  Home About Claudine Sh Message me to view select work/case studies. Love, Claudine 🙋🏻‍♀️  Home About Claudine http://work.claudrod.me/Work-index Fri, 17 Sep 2021 00:23:20 +0000 Work • Claudine Rodriguez 412068 <img src="https://cortex.persona.co/t/original/i/6d99c2c5f95b166638d5732e37a77fad1d2b8aa270a6d230f9d0dbfe7cd77df4/claudrod_hello_greeting.gif" alt="An emoji or a graphic caricature of a girl with midlength black hair, smiling, in a fuschia-colored shirt, with eyes blinking"> Some of my (Claudine’s) past work. Updating soon! Last updated: April 2020 Art Bar  Waku Waku  Mama Sita Foundation  JFM x Ishinomaki Lab  Good Code  NYRA Studio  Studio berGaia  Projects graveyard Send me an email Back to top  Some of my (Claudine’s) past work. Updating soon! Last updated: April 2020 Art Bar  Waku Waku  Mama Sita Foundation  JFM x Ishinomaki Lab  Good... http://work.claudrod.me/Studio-berGaia Sun, 08 Mar 2020 11:03:31 +0000 Work • Claudine Rodriguez 358499  IndexGraveyard  Studio berGaiaBrand identity Helped in setting up the visual identity of the new studio space in Jakarta, Indonesia; manifesting mostly in social media and environmental graphics. As a space mostly catering to lifestyle and fashion brands, the photo and video studio aims to deliver a feel of elegance and strong feminism, while embracing eco-friendly practices (hence the name bearing ‘Gaia’ ). View Instagram page&nbsp; <img width="2560" height="1277" width_o="2560" height_o="1277" src_o="https://cortex.persona.co/t/original/i/fd7b0ec61452577a3bfc1c6a760e74f2967408d7d0633734df440d7acd0fe9d5/bergaia-01b.jpg" data-mid="909594" border="0" /> Out of the use of the typeface Marcellus for the wordmark came a quick idea sketch using the lowercase letter g. And the flower-shutter icon was born! <img width="1078" height="1078" width_o="1078" height_o="1078" src_o="https://cortex.persona.co/t/original/i/f2d771f62e4f85e850a36ffa850cc2636f27515f8bc1d329aacbc94cafd0ad28/bg_icon_animation-test.gif" data-mid="876427" border="0" data-scale="70"/> Monograms were created to be used as branding markers, in place of the wordmark in other executions. <img width="1438" height="890" width_o="1438" height_o="890" src_o="https://cortex.persona.co/t/original/i/1fa54788035d67ea1e709ef8758e99e7616db4bab7e7cef8df161765a463d6f0/bergaia-02.jpg" data-mid="891714" border="0" /> <img width="1280" height="853" width_o="1280" height_o="853" src_o="https://cortex.persona.co/t/original/i/f98c114b5eb47281376f1e423966acae75eb0604ed598bd3a5deb02c95372d6d/Studio-2-b_edit.jpg" data-mid="891716" border="0" /> <img width="1280" height="853" width_o="1280" height_o="853" src_o="https://cortex.persona.co/t/original/i/64719ec1839cf4d7f1f0ed0cf7a99d4445154aca54be664f31bb6098b52d77d7/Studio-2-a_edit.jpg" data-mid="891715" border="0" /> <img width="5472" height="3648" width_o="5472" height_o="3648" src_o="https://cortex.persona.co/t/original/i/7641c90c28d892369a3dbd136c7d0b8a2b9f5133a6e389d1d3dbb3f03d328328/bergaia-04.jpg" data-mid="891718" border="0" /> Photography by Adhytia Putra  / Jessica Triputri <img width="3000" height="2250" width_o="3000" height_o="2250" src_o="https://cortex.persona.co/t/original/i/86b707041aa57a3efba0e5632909bc1e10e569c0b4511c2ac7f9042b49afb37a/bergaia-05.jpg" data-mid="891719" border="0" /> <img width="1959" height="1235" width_o="1959" height_o="1235" src_o="https://cortex.persona.co/t/original/i/103a459df967e40b430c1fb3ea982008abec48f3e5e4483476474cc20fe3db4f/bergaia-03.jpg" data-mid="891712" border="0" />  Prev Back to top  Next   IndexGraveyard  Studio berGaiaBrand identity Helped in setting up the visual identity of the new studio space in Jakarta, Indonesia; manifesting mostly in... http://work.claudrod.me/Changelog Sun, 15 Sep 2019 12:08:23 +0000 Work • Claudine Rodriguez 337526 Changelog05 April 2020 Added a link to a new project: branding for Studio berGaia&nbsp;  12 March 2020 Changed type from Monokrom’s Aften Screen to Production Type’s Spectral (via Google Fonts) 22 December 2019 Changed journal link from notes.claudrod.me to clippings.claudrod.me Changed type from Mike Abbink’s IBM Plex Mono to Monokrom’s Aften Screen April 2019 Added work for the film Nowhere to Go&nbsp;  Back Changelog05 April 2020 Added a link to a new project: branding for Studio berGaia&nbsp;  12 March 2020 Changed type from Monokrom’s Aften Screen to... http://work.claudrod.me/X-Nowhere-to-Go Fri, 05 Apr 2019 04:26:39 +0000 Work • Claudine Rodriguez 318602  IndexStudio Bergaia  Nowhere to Gosite Design The NYRA Studio folks (fka Sparc Stories) have been passionate about sharing the stories of the refugees in Indonesia, having developed a relationship with a community of Hazara refugees in West Java. They made a film featuring select profiles, and had it first screened at a literary festival&nbsp;.To extend the life of the film, an online campaign was proposed through the creation of a simple, bilingual website, both housing content in Bahasa Indonesia and in English. The site aims to present the film alongside supplementary information and a call-to-action to help the featured organization by linking viewers to other relevant sites. Visit Website&nbsp; <img width="90%" src="https://cortex.persona.co/t/original/i/a6b485cc1e40cb153679c2d150c23ef2c14d6dc7e77bfc65df0d16f23a5bd293/fyeo_ntg_03.png" alt="Nowhere To Go movie poster featuring Muhaddisa, an Afghan girl wearing a white hijab and a rose colored jumper in a library"> <img width="90%" src="https://cortex.persona.co/t/original/i/078a520c6ef4f86511ca07c6629577aaa34e07014285cabe65226b77bd46baf0/fyeo_ntg_02.png" alt="Nowhere To Go movie poster showing a crowd of Hazara refugees with 2 girls at the center, one smiling to someone in front of her"> Poster Design and Wordmark by Miranty Annisareta Based on the existing poster design made for the initial screening at Ubud Readers and Writers Festival, the site was styled to follow that material.&nbsp;  Prev Back to top  Next   IndexStudio Bergaia  Nowhere to Gosite Design The NYRA Studio folks (fka Sparc Stories) have been passionate about sharing the stories of the refugees in... http://work.claudrod.me/FYEO Sat, 09 Mar 2019 07:41:16 +0000 Work • Claudine Rodriguez 314996 <img id="loading" class="y" src="https://cortex.persona.co/t/original/i/2ab1fd528db1ba3faa171856d1759db03259b897edddea25b708deebe4b92d26/fyeo_circle4.png"> function passWord() { var testV = 1; var pass1 = prompt('Enter Password'); while (testV < 3) { if (!pass1) history.go(-1); if (pass1.toLowerCase() == "not-public") { alert('Thank you!'); window.open('/464f5220594f55522045594553204f4e4c59'); break; } testV+=1; var pass1 = prompt('Access Denied - Password Incorrect, Please Try Again.','Password'); } if (pass1.toLowerCase()!="password" & testV ==3) history.go(-1); return " "; }  Home  Home http://work.claudrod.me/x-464f5220594f55522045594553204f4e4c59-stoax Wed, 06 Mar 2019 06:34:39 +0000 Work • Claudine Rodriguez 314505 &nbsp; &nbsp;  Index: FYEO Projects FYEO - Nowhere to Go  <img id="loading" class="z" src="https://cortex.persona.co/t/original/i/2ab1fd528db1ba3faa171856d1759db03259b897edddea25b708deebe4b92d26/fyeo_circle4.png"> Stoa StudiosProject Management, Style Guide Creation, Art DirectionIn their desire to share the thoughtful products they create to a wider audience, lifestyle brand Stoa Studios wanted to explore a simple ecommerce solution.&nbsp; Visit website&nbsp; <img width="1280" height="920" width_o="1280" height_o="920" src_o="https://cortex.persona.co/t/original/i/f865f37284e487fa341e0d2a074976a2ea19d1023b8b0678ccd4a94d4d42085d/fyeo_stoa_01.jpg" data-mid="659742" border="0" /> A style guide and an art direction approach translated to an ecommerce site was created by working with existing photography and simple branding elements. <img width="2000" height="1228" width_o="2000" height_o="1228" src_o="https://cortex.persona.co/t/original/i/11a8190b8eb16baa2b2ce3609d8c9268529be550103b696133466315b645560e/fyeo_stoa_02.png" data-mid="661234" border="0" /> <img width="1794" height="2336" width_o="1794" height_o="2336" src_o="https://cortex.persona.co/t/original/i/d8d75bfd8e43e05ed0c1215af387e0cdb2497c6d5011723ae2fd7c251dc5109b/fyeo_stoa_04.jpg" data-mid="660646" border="0" /> Photography by Armi Millare and Jake Verzosa Working with a straightforward Shopify template, we had to make sure that whatever styling changes that are applied would still be in line with the brand.  FYEO Back to Top  FYEO - MB  &nbsp; &nbsp;  Index: FYEO Projects FYEO - Nowhere to Go  Stoa StudiosProject Management, Style Guide Creation, Art DirectionIn their desire to share the... http://work.claudrod.me/4d4554524f42414e4b Tue, 26 Feb 2019 05:48:51 +0000 Work • Claudine Rodriguez 313322 Hi, thank you for visiting this page. Sadly,&nbsp;‘Metrobank Mobile Banking on iOS’ is no longer publicly available. Message me to view select work/case studies. Love, Claudine 🙋🏻‍♀️ <img id="loading" class="z" src="https://cortex.persona.co/t/original/i/2ab1fd528db1ba3faa171856d1759db03259b897edddea25b708deebe4b92d26/fyeo_circle4.png">  Home About Claudine Hi, thank you for visiting this page. Sadly,&nbsp;‘Metrobank Mobile Banking on iOS’ is no longer publicly available. Message me to view select work/case... http://work.claudrod.me/x-464f5220594f55522045594553204f4e4c59 Sat, 16 Feb 2019 10:13:13 +0000 Work • Claudine Rodriguez 311900  Home<img width="160" height="160" width_o="160" height_o="160" src_o="https://cortex.persona.co/t/original/i/9fe14c3303c8162393a01405769489f1336bb75211a370f2ac970d7809c3c702/claudrod_hello_fyeo.gif" data-mid="659051" border="0" data-scale="40"/> Not Public, aka For Your Eyes Only &nbsp;👀 Hi! I’m Claudine Rodriguez, a designer and art director based in Manila&nbsp;. This is not quite the upside down. You were brought to this section of my port­folio as part of my application to your or­ganization. In here, you will find a sample of my UI/UX work done within the past months. <img width="1900" height="1900" width_o="1900" height_o="1900" src_o="https://cortex.persona.co/t/original/i/3105c177a49022197167447b135b57ba7722f070772c11cc2aa2c082c63e1e0b/fyeo_thumb_mb.jpg" data-mid="659716" border="0" />Metrobank&nbsp;Feb. 2019, spec work: As an exercise in potentially working on a project with Metrobank, I was tasked to translate an online banking feature into a feature available on a mobile app.View work&nbsp; <img width="1900" height="1900" width_o="1900" height_o="1900" src_o="https://cortex.persona.co/t/original/i/686b6fb16ec6782d846d783db04ff1e5254a00cc0859d7f3ed163f8abaf00ee5/fyeo_thumb_lbc.jpg" data-mid="659715" border="0" />LBC Express&nbsp; Jan. 2019, in Havas: UI/UX work for the interim site of LBC in transitioning to new assets, as part of their ‘digital transformation’ efforts. View work&nbsp; View my main folio  View my CV&nbsp;Fun fact (?): 464f5220594f55522045594553204f4e4c59 is ‘For Your Eyes Only’ in hex. Back to Top  About Claudine  Home Not Public, aka For Your Eyes Only &nbsp;👀 Hi! I’m Claudine Rodriguez, a designer and art director based in Manila&nbsp;. This is not quite the... http://work.claudrod.me/x-464f5220594f55522045594553204f4e4c59-mb Wed, 13 Feb 2019 02:17:08 +0000 Work • Claudine Rodriguez 311478  Index: FYEO Projects FYEO - LBC&nbsp; <img id="loading" class="z" src="https://cortex.persona.co/t/original/i/2ab1fd528db1ba3faa171856d1759db03259b897edddea25b708deebe4b92d26/fyeo_circle4.png"> Note: This is speculative work. The contents of this page were viewed as presented below by the Metrobank product design team. Annotations on the work are placed in a gray box, just like this. Metrobank Mobile Banking: Bills Payment on iOS The task: translate either the Bills Payment or Funds Transfer process (as seen on this demo site&nbsp;) to a mobile app design. Being someone who turns to her iPhone for a lot errand-related conveniences (i.e. ordering food, grocery shopping, messenger pick-ups, etc.), I chose to design the bills payment feature on iOS. Task/Goals Review <img width="1720" height="1574" width_o="1720" height_o="1574" src_o="https://cortex.persona.co/t/original/i/160e343fc322c9de25aecf4350ba54412d108c31d759a5186ceb99b9c0487d1d/mb_survey_new.png" data-mid="646637" border="0" data-scale="77"/> I started the whole exercise with a quick survey on people’s thoughts when it comes to online banking in the Philippines, particularly in paying their bills on mobile. Their responses were mostly neutral. An already ‘positive’ experience would mean basically getting the job done—a transaction is called a success when payment center/bank lines are skipped. ‘As long as the job gets done conveniently.’ In reviewing the responses, a question arose: ‘If the experience already delivers the bare minimum, how else can it be improved?’. The collated responses helped me in determining some principles to my approach: the app should be easy to use, reassuring, ‘guiding’ (there’s clarity in wayfinding), straightforward. Online Demo Walkthrough + Outlining Steps + Initial Wireframes<img width="2560" height="1871" width_o="2560" height_o="1871" src_o="https://cortex.persona.co/t/original/i/53147ebc88ec22d14064bdeb7eb10c6e5388063919e552a234ba0b9e2a479859/mb_task_sketch_1.jpg" data-mid="646404" border="0" /><img width="2560" height="1871" width_o="2560" height_o="1871" src_o="https://cortex.persona.co/t/original/i/a1743fb1a6b3435219d3929ada8a74f31769134cb229f73a78c5ec3f398a93f1/mb_task_sketch_2.jpg" data-mid="646405" border="0" /><img width="2560" height="1871" width_o="2560" height_o="1871" src_o="https://cortex.persona.co/t/original/i/4d8a7dc9898c9499863131a6ea647ac16303ed8f5f6f7bdc3988b5cfde166765/mb_task_sketch_3.jpg" data-mid="646406" border="0" /> To begin the process of translating the feature on mobile, I went through the online demo site and outlined the steps taken to accomplish the task of successfully paying bills via Metrobank. The outline aided the process of creating the initial wireframes. Visual Direction <img width="2560" height="1871" width_o="2560" height_o="1871" src_o="https://cortex.persona.co/t/original/i/65ecee0388c64af1ff94fb0470968474452a67f1b6597cbd400b634372332bca/mb_brand_audit.jpg" data-mid="644571" border="0" /> A quick online search led me to a number of current Metrobank assets with varied branding executions. Some common things seen include the use of the following: The color blue, in different shadesSimilar looking sans-serif typefaces (with weights in Regular and Bold used within the same layout)Icons (mostly outlined)Rounded rectanglesGradient backgroundsPhotography/illustrations featuring happy-looking subjects Base Visual Style Guide <img width="2899" height="1634" width_o="2899" height_o="1634" src_o="https://cortex.persona.co/t/original/i/703aa9db73765fd39ac38dc774b0e89029c8221fc1b4338741d902a1854659ae/mb_colors.png" data-mid="646143" border="0" /><img width="2899" height="1634" width_o="2899" height_o="1634" src_o="https://cortex.persona.co/t/original/i/5c150a54f9eaf1e3c1e4ae10ac74416008c8888eda96f8fd97f13b4a770717f4/mb_rounded.jpg" data-mid="646230" border="0" /><img width="2899" height="1634" width_o="2899" height_o="1634" src_o="https://cortex.persona.co/t/original/i/c205e49d1e7f3ea6cf3253b40fa72d33e575cedc10fd68a53d7953faf9fe098a/mb_type.png" data-mid="646159" border="0" />Based on the brand materials found, I created a simple base style guide for the visual direction of the app. Color palette: Mostly has hues of blue, each one selected to work effectively to contrast when placed along with another hue, and using the same blue hues to generate a linear gradient as the app’s main backgroundTypeface: Found a close option similar to what is being used in branding materials, and known to be a good UI type choice for its readability and weight options—IBM Plex Sans (served free by Google Fonts&nbsp; and Bold Monday&nbsp;), comes in 7 font weights, from Thin to BoldShapes: Rounded rectangles, used as information containers with an approach inspired by Google’s Material Design &nbsp; UI Preview <img width="992" height="1860" width_o="992" height_o="1860" src_o="https://cortex.persona.co/t/original/i/ed38387c0f70d95b615647185d68c28d38d5819ad125fa352a4e7682ec3a4c2a/mb_ui_phone_01.png" data-mid="647643" border="0" data-scale="85/"/><img width="992" height="1860" width_o="992" height_o="1860" src_o="https://cortex.persona.co/t/original/i/30c9f6b2ccf7877891325c0ce392795bb07885167cf62c728d1db1443fc29efc/mb_ui_phone_02.png" data-mid="647647" border="0" data-scale="85/"/><img width="992" height="1860" width_o="992" height_o="1860" src_o="https://cortex.persona.co/t/original/i/64a4f99d7c896dd8857753c9fdb475c947b549dd0e602288377602187f6bd184/mb_ui_phone_03.png" data-mid="647644" border="0" data-scale="85/"/><img width="992" height="1860" width_o="992" height_o="1860" src_o="https://cortex.persona.co/t/original/i/a7ed1eccf43004f2a6a39a5930bca3dbdfa362a6e143f03b6cdf40fb479e977c/mb_ui_phone_04.png" data-mid="647646" border="0" data-scale="85/"/><img width="992" height="1860" width_o="992" height_o="1860" src_o="https://cortex.persona.co/t/original/i/3d9a229b46cbd5d2d1fadcf77fce52a9f33b34f40a9aee3f09f52b7075f69950/mb_ui_phone_05.png" data-mid="647641" border="0" data-scale="85/"/><img width="992" height="1860" width_o="992" height_o="1860" src_o="https://cortex.persona.co/t/original/i/36efa7453bdee1cdd58ea961929b2b95d6cbc80fe0f22f3bb1072afb23f9baa2/mb_ui_phone_06.png" data-mid="647640" border="0" data-scale="85/"/><img width="992" height="1860" width_o="992" height_o="1860" src_o="https://cortex.persona.co/t/original/i/3b4a4a9074614badad769af137d37d28c5d877fa2d466461655b0a4d67874767/mb_ui_phone_07.png" data-mid="647645" border="0" data-scale="85/"/><img width="992" height="1860" width_o="992" height_o="1860" src_o="https://cortex.persona.co/t/original/i/e0843d51c49c91ddbddc41d1a0cfc4e9c2c50805bba96ceeb5d2fa536df7f4ce/mb_ui_phone_08.png" data-mid="647642" border="0" data-scale="85/"/> [Download updated PDF file of all screens here .] Note: I made a simple tracking system by using bit.ly URLs to track number of visits on the actual page (as I don’t use analytics on my site, for personal reasons) and for views on the sample UI screens linked above as a PDF file. This preview covers the following (click on screen or press  and  to navigate): Log In Welcome screen/Your Accounts Bills Payment: Select Biller Bills Payment: Select Account to Debit Bills Payment: Payment Details Bills Payment: Summary Bills Payment: Confirmation Menu (expanded submenu based on location within the app, applicable to Bills Payment and Funds Transfer)A follow-up thought on possible additional screens, in extending the exercise (not included in this submission): Error messages, confirmation messages, and empty states - if developed well, may be a solution for possibly addressing the concern on security in using the app (e.g. If the phone loses internet connection in the middle of a transaction, how does one assure the customer of the state of the transaction/inform them of possible next steps to take?). Sample Design System Implementation <img width="2891" height="1624" width_o="2891" height_o="1624" src_o="https://cortex.persona.co/t/original/i/1ee905c2d1d091e60e0261563c02e3d33e53bebc2e3ecc977ca851385e50117c/mb_ui_text.jpg" data-mid="646606" border="0" /><img width="2891" height="1624" width_o="2891" height_o="1624" src_o="https://cortex.persona.co/t/original/i/f3f7aac8bbb559f59a87ba7621bf1f57b7e97337c4b311f08229ab0e47e0fcea/mb_ui_text2.jpg" data-mid="646609" border="0" /><img width="2899" height="1634" width_o="2899" height_o="1634" src_o="https://cortex.persona.co/t/original/i/f043ed60ffb3e4b9141a5f572bb1a5a5a5451c0e1ad2eab623ca705cddeefc57/mb_ui_components3.jpg" data-mid="646627" border="0" /><img width="2891" height="1624" width_o="2891" height_o="1624" src_o="https://cortex.persona.co/t/original/i/8d5b9af5cec76cedcc60fc5eb26125af1769c38f488c4295489f9f71d877ca44/mb_ui_components.jpg" data-mid="646610" border="0" /><img width="2899" height="1634" width_o="2899" height_o="1634" src_o="https://cortex.persona.co/t/original/i/99e314fe9f56b88d5b22cf12e1b5dcb5e3b16ebf596933f510dddb174e8a84dc/mb_ui_components2.jpg" data-mid="646626" border="0" /> The following are included: Typography (500% scaled)Select components Iconography <img width="2560" height="1763" width_o="2560" height_o="1763" src_o="https://cortex.persona.co/t/original/i/c196a2b18aa832fed2cc967114ebe7362213e5feef8218233c12da09c8ea66ab/mb_icons.png" data-mid="646632" border="0" /> For the purposes of this exercise, I searched for a well-curated iconset fit for UI use and the nature of the app.Considering the simplicity of the app interface, I wanted the icons to be clean outlined graphics but had more detail than a singular stroke outline, consistent in stroke width and art style. I found these at&nbsp;The Noun Project&nbsp;, designed by Sergey Demushkin from his Interface and Web Icon collection&nbsp;. Some icons were tweaked to fit the concepts they represent within the app. Closing Thoughts <img width="2560" height="1763" width_o="2560" height_o="1763" src_o="https://cortex.persona.co/t/original/i/4b6db34fbfbb2bc0ebc21eb1540b8a8955044a40bf7baae423a5a6ab7e33f37f/mb_ui_closing.jpg" data-mid="647068" border="0" /> While people may be familiar with the process of paying bills via online banking, I believe usability improvements can still be made when even the most basic of usability heuristics are taken to heart, to help in making the experience less of a chore. In working on this assignment, I tried to make the visuals clear, with subtle wayfinding cues (e.g. progress bar on display for tasks that go through &gt;3 screens, the  and  arrows being almost always present), ‘breadcrumbs’ in the form of overline text aiding in recall as to what option was last chosen, etc.📁 Download PDF file (updated!) of all screens here&nbsp;. 👋 Thank you for reading! How did you find this submission? Nice! /&nbsp;Just OK /&nbsp;Meeeeh Note: A simple feedback system was made, also using the bit.ly tracking tactic. ‘Nice!’ seems to be a favorite.  FYEO Back to Top  NexT   Index: FYEO Projects FYEO - LBC&nbsp; Note: This is speculative work. The contents of this page were viewed as presented below by the Metrobank product...