https://www.debbiefoong.com/about daily 0.75 2026-02-26 https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/d795a557-fc58-442a-8600-b205964e5bdc/20221021_134658_edit.jpg ABOUT - ABOUT & CONTACT Hello, I’m Debbie! I’m currently a mobile app designer (iOS & Android) with foundational skills in front-end web development. Creative pursuits in the fashion and tech industry have shaped me into the designer I am today. When I’m not playing in Sketch, Figma, or learning Japanese, I’m running my jewelry business (Dainty District). Email: foongsukyi@gmail.com Seattle, Washington, United States https://www.debbiefoong.com/resume daily 0.75 2026-02-26 https://www.debbiefoong.com/work daily 1.0 2025-01-09 https://www.debbiefoong.com/work/learn-korean-app monthly 0.5 2020-12-18 https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1606110733856-R49S6989MTEQ8QZFG1XN/20191110_085453.jpg Work - Learn Korean | Outline - THE PROJECT Every two weeks, Pushpay’s designers would participate in a team meeting as well as an ever changing ‘design challenge.’ Taking the form of a design prompt, puzzle, or other brainstorming group activity, it was meant to inspire us in short sessions spanning 10 - 20 minutes each. One particular challenge was to create a foreign language app. For the app prompt, my team focused on English speakers wanting to learn Korean as a second language. I chose to continue working on this project even after our initial brainstorming session. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1606878889245-IN17A1L971E3KB5N1H7O/pic4.png Work - Learn Korean | Outline - APP USERS My team initially had a target audience of school-age children, or young adults. However, the reasons for learning a second language can be as diverse as its users, thus I expanded the app user base. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1605407515328-HQ7DJW5IK8ELS0XUPHNT/pic6.png Work - Learn Korean | Outline - SITEMAP short blurb here on what I did https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1605411201300-P5PD3Q7J621C4AFMJEEZ/20191110_085519.jpg Work - Learn Korean | Outline https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1606109886404-P80GH3LKEHJ6BH6ZI8Q5/wireframes_square.png Work - Learn Korean | Outline https://www.debbiefoong.com/work/news-api monthly 0.5 2020-12-18 https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1608174174869-ATBUV5GS21EEFRWL9F8Z/pic2.png Work - International News | Website - THE PROJECT During my web development course at Seattle University, we had weekly projects due as part of our curriculum. One such project required choosing a public API, and building a website that used it. I decided to use the openly available News API*, for featuring news headlines, articles, and filtering media according to genre, publication, or country. *News API has changed their API limits to business pricing only. The project can be viewed here, but only works on local servers due to the paid API restrictions. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1608174069642-FCETZUII7DA5T26WGOAG/pic1.png Work - International News | Website - PLANNING I was accustomed to reading newspapers from different countries on a daily, if not monthly, basis. As a third culture kid who grew up across 6 different countries and visited more every year, having access to international media was typical in my household. However, this same access was difficult to replicate online. I noticed there was a lack of websites showcasing news from every country. Most news websites had a ‘world’ section for a few, general international headlines. Users could also search for a specific country in the search bar, and see relevant articles that had the country mentioned. But there wasn’t a website that allowed users to see all headlines at once, from one country. Even more unlikely was a website that allowed users to change the country selected - and news results with it - with the click of a button. I set out to do just that with my NewsAPI website. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1608107533815-5CFZQUIPCZKC2Q0N6CXA/appusers.png Work - International News | Website - APP USERS - PICTU https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1608271712048-QTHJVS3VM1AVPK84VOWG/pic3.png Work - International News | Website - BUILD Process Under the free account, NewsAPI allowed a maximum of two parameters to be set, including but not excluded to: News source (e.g. BBC, New York Times) Author Genre Country After some testing, I set my API parameters to make queries based on country of origin, and news genre. In this way, users would be able to search for a specific country’s headlines through drop down menus. There would only be one page - results according to the user’s search queries. The website was built with Vue.js, HTML5, and CSS. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1608272259138-WKL2KWTK8TRJ5X0Z9W85/designp1.png Work - International News | Website https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1608272287952-ESEEETHO0BA4ARJ6LGNZ/designp2.png Work - International News | Website https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1608272318985-EO5B1DVN41FDX7WZ8W4W/designp3.png Work - International News | Website https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1608272740775-JWWR9HLJJJJZPF970C4I/pic4.png Work - International News | Website - THE Challenges It was difficult to decide on which parameters to allow: news source, genre, country, author, or others. I knew ‘country,’ would be one. But as a fan of certain news publications over others, I had to put aside my personal bias and think objectively for the user and the user’s needs. As a result, the ‘country,’ and ‘genre’ combination was the most effective. Additional challenges included: Coding the individual country codes to match the NewsAPI (54 countries in total) Many formatting issues that needed fixing Tested different ways of displaying the news titles that were still in line with ‘List’ constraints List could be long (lots of scrolling), so I created a ‘Back To Top’ button once the user was ‘past the fold’ on the screen. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1608272565279-75847FNOQXLDKK90NODI/finaldesigns.png Work - International News | Website https://www.debbiefoong.com/work/central-nyc monthly 0.5 2025-01-10 https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1604109526013-FF8L64E7YXC2SUO7BCLT/pic2.png Work - Central NYC | App - THE PROJECT Central Presbyterian Church was established in 1821, beginning a historic legacy in New York City. The congregation grew rapidly, and the organization’s site moved several times throughout Manhattan. In 1922, American financier John D. Rockefeller, Jr. principally funded the permanent home of Central on Park Avenue. As decades passed, the organization went through many changes in community demographic and attendance. Under the guidance of Pastors Jason Harris and Ed Sirya, Central grew into a safe haven for 500 families, students, and young professionals. Central’s team approached Pushpay with the desire for an extensive app filled with resources, media, events, and fundraising campaigns on restoring their historical building. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1604722080990-4O199TIFLE0Z4EPTYAGP/IMG_1839_edited.jpg Work - Central NYC | App - TEAM & ROLE Project Manager Built customer relationships and handled communication App Designer Created visual designs and set up the CMS Content Manager Content strategies and releases Technical Team Developed the app, managed submissions to the App Store (iOS) and Google Play Store (Android) https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1604274385881-CR5NKVYWBX5I4E4VWPXC/pic3.png Work - Central NYC | App - PLANNING Central first established contact with Pushpay’s sales team. Once introductions had been made, a project manager and I were assigned to the client. We worked together to get information from the client, such as: App Content App Branding and Style Target audience demographic and size As a well-established organization with their own marketing and communications team, Central had specific colors, fonts (Gotham Book), and communication tone that made up their branding kit. Based on their website and media, I created a style guide with unique branding elements for the app. Their rich history was infused with New York’s culture, providing a powerful story waiting to be told. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1604282348212-Y88BO9M1HILBX62HZRUP/pic4b.png Work - Central NYC | App https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1604274435967-FRB1BF899XHICQILR22R/pic5b.png Work - Central NYC | App - DESIGN Process The project manager created a design brief for Central. I analyzed the client’s branding resources and visuals. I drafted a sitemap for app content and user navigation. I sketched wireframes for main navigation screens. I designed the app according to the client’s preferences. The app would go through several QA checks before final sign-off. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1604281293999-2ZISG0TJO49VXOKVDEUK/pic6.png Work - Central NYC | App - SITEMAP Drafting a sitemap is a preliminary step in my design process. Past the Discover screen (a news feed), I designed the Home screen to host a variety of content welcoming newcomers to the church and their chamber music concerts. The Sermons screen contained all of Central’s media feeds and extensive service schedule for regular attendees. The Events screen was home to calendar feeds and events for both Central and Central Chamber Series. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1604439452875-NDWW0073TWL4H9B9RLLR/pic7.png Work - Central NYC | App https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1604469041803-DK6VSJ351BBVESBDVGJW/central-wireframesresized.png Work - Central NYC | App https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1604527894032-7C9EADROAN1B7KAP6T9C/pic9.png Work - Central NYC | App - THE CHALLENGES The client needed a comprehensive app for both Central, and Central Chamber Series. Distributing the content evenly across three main screens reduced the chances of users feeling overwhelmed or lost in the resource-heavy app. In addition to content for two organizations, Central had several community events on a weekly basis. Designing the app to host all their calendars was important for users to access information easily. It also enabled users to get involved directly from the app. Lastly, their fundraising campaign needed to be featured in a prominent place. This would keep users updated on the client’s progress towards their goal, as well as encourage more donations. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1604527937595-9J06RXLOBE7KD5JBFCYT/pic10.png Work - Central NYC | App - INTERFACE DESIGN Central’s rich history spanned almost 200 years, with a beautiful neo-gothic building to prove it. It was nicknamed “the little cathedral,” by locals, and became an architectural landmark throughout New York city. I chose to feature the historic building on the app’s home screen, as a way of honoring that legacy. Designing a dark overlay on their opulent pictures, with san-serif white text above it, allowed a delicate balance between traditional and contemporary. The rest of the app’s design was also kept simple, complementing the client’s brand colors of blues, greys, and white. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1604624444981-PQ4EDNN52YPIOXOREA4F/pic12.png Work - Central NYC | App https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1604553833956-0ZA7GG5BD66J0FEARH58/pic11.png Work - Central NYC | App - USER EXPERIENCE Once the final design was complete, I submitted the application to my team for internal quality assurance (QA) tests. Teammates would evaluate the content, creative direction and execution, along with checking if the app followed App Store and Google Play store app standards. After receiving feedback and a performance score, I made iterations as needed. The application would undergo another round of reviews by our technical team to ensure the app was ready for roll out. They were responsible for building the app and submitting it to the app stores. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1604717637119-8QYNOH5GE09XAIYK6BSU/keyd-1.png Work - Central NYC | App https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1604717846014-5BRCCH7FOCK6OM2K6GPV/keyd-2b.png Work - Central NYC | App https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1604717731062-VMZ6HYCP8P9N4OXXW2F0/keyd-3.png Work - Central NYC | App https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1604555351443-JQOPYIUK8JTE4JGXDX97/cross+platform.png Work - Central NYC | App - THE PLATFORM Central’s app was designed to operate on any iOS or Android device. With the mobile framework written in React Native (React.js), the developers utilized Flux application architecture for state management. The app's backend was controlled by an in-house content management platform. It used service workers for daily synchronization and offline storage. Users could save device-specific data to their phones, or share it with other applications. The in-house CMS was able to push updates to the app using React Native bundle dropping. This meant the app didn’t need to be resubmitted to app stores every time a change was made. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1604719593547-MCXQHP9KDD3RR0YY94TR/pic13.png Work - Central NYC | App https://www.debbiefoong.com/work/size-chart-upload monthly 0.5 2023-07-25 https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/c588a490-decf-4549-ae37-fa62a9861c97/iMac-intro.png Work - ★ Size Chart Upload | Amazon Fashion - THE PROJECT Apparel size charts on Amazon.com have historically been uploaded manually. Selling partners (brand owners, resellers) did not have a self-service tool to upload sizing information, relying on internal teams such as Seller support each time they needed to upload a size chart. Every change required contacting vendor management. This approach had limitations on scalability and accuracy, creating a poor experience for both brands and end customers. Size Chart Ingestion Tool (SIT) was envisioned as a new platform in Seller and Vendor Central for 2023. It would enable sellers to manage, create, and edit their size charts for all apparel items in a product category, as well as manage individual items. 2024 Update: SIT news articles Amazon Launches New Size Chart Self-Serve Tool (Swipe Insight, LinkedIn post, May 2024) Brands can now add size charts (Amazon Seller Central, March 2024) https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/91385541-0d16-4a73-8d25-38457b07abbe/IMG_0463-edit.png Work - ★ Size Chart Upload | Amazon Fashion - TEAM & ROLE Product: Priyanka Dighe, Arun Chenchu Gopal Program: Kourosh Agahdel UX Design: Debbie Shu Yi Foong, Su Kim Led design from early concept to product launch. Made iterations for current and future products based off SIT. Copy: Cassie Broeckert Research: Anna Vinogradova Tech: Davy Zhang, Albert Yeung, Ben Silverman, Bala Mudiam, Harry Lum, Chaitanya Dandane, Eric Thompson, Jiaxiang Li (Richard), Bohdan Skrypka, Saher Wasim, Atanu Basak QA: Rahul Vanka, John Rundle Business Intelligence & Data Science: Shanmugha Priya Akhilesshwar, Sabarish C, Arthy Ramamurthy, Narotham Pinnamreddy Leadership: Louis Dudley, Michelle Xie, Prakash Ramu, David Wu, Apoorv Chaudhri https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/672f4091-010a-4d8f-bf6b-1a6bc71a19a4/planning-mockscreen-pic2.png Work - ★ Size Chart Upload | Amazon Fashion - PLANNING SIT was a new platform based on Tech Admin Tool (TAT) that was previously used to upload size charts. However, TAT was built on legacy technology and deprecated on Amazon. It couldn’t be ported to the Seller and Vendor Central. To add to the challenge, the existing UX concept had been started and dropped by more than 3 designers. During the early stages of ramping up, I did the following: Reviewed existing designs and content Met with product managers to learn about sellers and tech requirements Learned about Tech Admin Tool Created initial designs https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/4d0724f5-bfe1-4652-b2a1-2cd97fa4dcb8/appusers_SIT.png Work - ★ Size Chart Upload | Amazon Fashion https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/51b1650a-c64c-4034-8f3a-50e3a900022e/Designspecs-screen-mock.png Work - ★ Size Chart Upload | Amazon Fashion - DESIGN Process The product managers created a list of tech requirements for SIT. I familiarized myself with Flo and Katal design system (Seller Central). I drafted a sitemap to understand the CX flow and to communicate better with engineers. I created initial wireframes and designs based off existing content, working with our copywriter at every step and iterating based on feedback. I prototyped designs for team reviews and user testing research. I reviewed designs with product managers and engineers weekly; reviewed with research and my design manager bi-weekly. I iterated on the design after research results, ‘bar raiser’ Amazon’s internal design leadership feedback, and compiled future design concepts for cases where immediate iterations weren’t feasible. I presented the finalized design with hand-off specs for engineers. The platform would go through rounds of internal beta testing, leadership reviews and QA checks before launching in Seller and Vendor Central. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/504e4c6e-1264-4743-ae7a-2b0c22df3eca/oldsitemap-1.png Work - ★ Size Chart Upload | Amazon Fashion - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/e49de824-dff0-4dd2-b0bc-7dbb1fb8c01d/newsitemap-1.png Work - ★ Size Chart Upload | Amazon Fashion - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/f3e3d197-cc45-4572-98f5-5c783a27c5c9/SIT-wireframes.png Work - ★ Size Chart Upload | Amazon Fashion https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1e77da11-b72f-487c-8e27-34c6eb0e5809/challengesmock.png Work - ★ Size Chart Upload | Amazon Fashion - THE CHALLENGES SIT was a new system that had never been built before. Millions of apparel items depended on this system, and the upload process had to be easily organized according to both product category and item type. Other challenges included the existing UX screens, which had been started and dropped by more than 3 designers. This churn of design and product meant there were few (if any) previous references for the team continuing the work. As a result, the design file was messy, hard to understand, and no explanation for “thought behind the original design”. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/d4052aff-a2fd-4b5b-ac89-525f900cfd85/interface-screenmock.png Work - ★ Size Chart Upload | Amazon Fashion - INTERFACE DESIGN Many existing screens were outdated, e.g. links that led to deprecated pages, or several progress bars for ‘loading files’ that were actually instantly uploaded. After consulting with product and engineering, I simplified the user flow and designed the instructional messaging to be clearer for every use case. Amazon’s Flo and Katal design systems were very comprehensive, giving some flexibility to the style of alerts, buttons, and upload components. I also protoyped our internal beta testing platform for UX research to run tests (Invision + Usertesting.com), and we reviewed common painpoints and user experience after a few weeks. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/25a827d0-2e70-4048-8a14-0aacdac2e3fc/SIT-fdesignsx1.png Work - ★ Size Chart Upload | Amazon Fashion https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/ac1b95fb-2cd3-4469-ab6f-9b58a1840761/userex-mockb.png Work - ★ Size Chart Upload | Amazon Fashion - USER EXPERIENCE Once the final designs were complete, the product managers and I reviewed the prototype with Amazon’s internal ‘bar raisers’ team. They evaluated our information architecture, design, and user scenarios. I compiled their feedback, much of it reflecting our stretch goals for future P2 and P3 designs. I created early concepts based on their recommendations e.g. placement of notification messages and better size chart previews, which was aligned with our user research on seller painpoints. Due to the time constraints of Amazon leadership and engineering, we could not implement all the changes, but the documentation and initial designs were ready for revisiting after the launch. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/6f78f4f2-efbd-4446-a710-7fbbe4c118f1/platformmock.png Work - ★ Size Chart Upload | Amazon Fashion - THE PLATFORM SIT retained all core TAT size chart features including search, download, upload, preview and publish, and also included real-time excel parsing, data validation and normalization to provide actionable data quality report to users, compared to receiving an error report via email within an hour. SIT would support size chart uploads for Amazon marketplaces in the following countries: US, CA, MX, BR, CL, CO, UK, ES, DE, FR, IT, TR, AE, SA, EG, NL, PL, SE, BE, NG, ZA, JP, AU. The roll out would begin in stages starting in Q1 2023, with US and Canada marketplaces first. There was also planning around region-specific size charts, such as India and Japan. As a web-based application, it could only be accessed via desktop for the P1 launch. I designed future concepts such as Global Template Manager to be more flexible based on screen size, with a layout that was more mobile-friendly. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/6ddde30d-4c40-4340-8bb4-8f926d79f361/iMac-screen-mock1b.png Work - ★ Size Chart Upload | Amazon Fashion - LONG TERM VISION SIT will eventually be the one-stop-shop for ‘all things size charts,’ for all Softlines categories and locales. It will include feedback to brands on the quality of sizing data and any potential manufacturing defects. SIT will also identify relevant sizing data through data science and collection, offering authorized resellers a way to always select the best and most relevant size chart for their product listings. “Our ability to provide Fit feedback to brands that can help them decrease their product return rate and/or increase their sales is very important to me. I envision brand feedback to reach the level where Amazon can not only provide real-time feedback [on size data], but also identify and share manufacturing defects back to brands using AI.” -Apoorv C, Director of Softlines Fit https://www.debbiefoong.com/work/size-finder monthly 0.5 2024-12-20 https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/056978f1-af8f-4188-ad45-671728c8a3e0/SF-theproject.png Work - ★ Size Finder | Amazon Fashion - THE PROJECT Online shopping for clothes is a $208 billion market in the United States alone. But the reality is that finding the ‘right size’ for every customer remains a challenge across the global fashion industry. No ‘one size fits all’, as every body is different. Poor sizing of an item leads to dissatisfied customers, customer returns, and most importantly: decreased trust in an apparel brand or retailer. Amazon’s goal was to increase size recommendation coverage from 25% to 90% of the top 20 product categories. Thus, a fit data collection experience like Size Finder was required. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/c1e3554a-d631-4443-9e50-46aa533f1dd5/FXD_portfolio.jpg Work - ★ Size Finder | Amazon Fashion - TEAM & ROLE Everyone involved in this project was from Amazon Fashion’s (Softlines) Fit team. Fit is a core team dedicated to Amazon’s size charts, guides, and customer sizing across several apparel and accessory categories. I worked with Product and Engineering teams on a daily basis, with my Design manager overseeing the work. My primary responsibilities: I designed initial mocks, iterations, and hand-off specs for internal web lab testing. I conducted extensive competitive audits (44 brands) and helped with collecting user research on the initial CX flow. When other designers took over closer to the product launch; I played more of a supervising role. Other teams involved: Fit REX, Vikings, Science, Quality Assurance, Business Intelligence, Profile, and PSPW https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/4635b0ad-0bb4-4cea-9cda-bed70d4976e2/FXD-planning1.png Work - ★ Size Finder | Amazon Fashion - PLANNING Size Finder was a product of Amazon’s customer obsession and earn trust leadership principles, among other team tenents. Our competitors included companies such as TrueFit or Fit analytics that had already pioneered ‘finding the right size’ for apparel retailers. I met with the product team to learn more about the project’s history. I looked at 44 brands during a competitive audit, collecting data on the fashion industry standards for size charts, reviews, and size recommendations. Size recommendations could not be offered to new customers, or Amazon customers with insufficient purchase history. Recommendations were based on machine learning models that relied on data from previous apparel purchases. e.g. a customer who had bought a dress in Large, was likely to be a Large in other brands. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/ed6a697e-3176-4716-b961-6239fa183e3c/SF-bench.png Work - ★ Size Finder | Amazon Fashion - BENCHmarking As Size Finder had yet to launch, there was limited user research. Any information that could boost customer impact and engagement metrics was valuable. I conducted competitive audits on fit features from 44 competitors. These audits included: Size Finder clothes competitive analysis (Mobile and Desktop) Size Finder shoes competitive analysis (Mobile) Shein Dive Deep (Mobile) Body shape visuals across the fashion industry (Mobile) We analyzed established fashion brands such as Uniqlo, Gucci, Madewell, as well as independent retailers such as Revolve, Savage Fenty and Pepper. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/464dc487-843c-451e-84c2-e2967e481567/FXD-research2.png Work - ★ Size Finder | Amazon Fashion - research The Fit team tried different survey styles, size blurbs and other UX design explorations before creating Size Finder. When I joined the team, they were analyzing user research and consumer behavior, which included key points: Many customers shopped according to brands they recognized, not size Many customers did not trust size charts to be accurate Most customers did not know their measurements or have access to measuring tape Most customers trusted customer reviews over size charts Lack of diversity and inclusion was also mentioned in several quotes Specific stats unavailable; Amazon confidential information https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/4cbee9e4-386b-4e6d-8710-ac77a4df4807/SF-scope.png Work - ★ Size Finder | Amazon Fashion Size Finder was targeted at new customers unfamiliar with Amazon brands. Therefore, we brainstormed a flow that began with a customer’s preferred brand, and converted it to an equivalent size of the Amazon brand they were considering. This would help us Earn Trust, and stay true to Customer Obsession leadership principles (Amazon LPs). How this was done via machine learning: “Once a brand mapping was established, we used an [machine learning] model trained on our catalog purchase data to identify the best-fitting size in the target ASIN based on ASIN attributes such as style, fabric, How it Fits, and, Marca score. This two-step approach enables us to provide a more accurate size recommendation when customers choose to provide their best-fitting brand.” Some questions we went over during our initial designs: What if someone doesn’t have a favorite brand? Is a customer’s weight necessary? Would a weight slider or keyboard input be more intuitive? Which writing tone was better? e.g. ‘customers like you’ vs. ‘customers with your size’ We also chose to launch Size Finder with Women’s Dresses, the product category that had the highest number of returns within the Amazon Fashion department. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/7c04e450-688d-4718-9011-337e7a4757d5/appusers_SF.png Work - ★ Size Finder | Amazon Fashion https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/94b78b3d-4a0b-432f-8a39-1dcf3442e86e/SF-designprocess.png Work - ★ Size Finder | Amazon Fashion - DESIGN Process My design manager and product team had curated a list of requirements, objectives, and initial flow, but the screens were not yet complete. My process included the following: Reviewed existing documents, designs, and user research Conducted 3 competitive audits on 44 fashion brands, benchmarking our Fit features to learn what we did well, and what we could improve on Designed initial mock screens and rounds of iteration after feedback Implemented new UI e.g. the Size Finder ingress icon, global measurement unit toggle buttons Prototyped different flows for user testing and research (Invision, usertesting.com) Compiled our user research with key insights and next steps for design and product Organized design assets, flow, and specifications for hand-off to engineering Reviewed with other designers and drafted mocks for a Size Finder desktop version Size Finder would go through rounds of internal beta testing (web labs, dial ups), leadership reviews and QA checks before launching across apparel product categories in USA and Canada. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/b4cebc8e-a67f-44a7-a54c-75de946dd860/SFsitemap.png Work - ★ Size Finder | Amazon Fashion - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/6b5d895e-7e9f-4c23-ae7b-7b95ce4f7afe/SF-skeleton.png Work - ★ Size Finder | Amazon Fashion https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/0e782d62-d6e3-46b5-b09b-019b75056bb6/SF-wireframe2.png Work - ★ Size Finder | Amazon Fashion https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/9fb5f102-bf3e-4860-b91e-450f8aadcb27/SFcold-1.png Work - ★ Size Finder | Amazon Fashion https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/c08dc898-b527-43b2-b4ba-37f03c66e9db/SFinterface2.png Work - ★ Size Finder | Amazon Fashion - INTERFACE DESIGN Following the Softlines design library (Amazon Fashion), I kept assets to mostly black and white colors and the Amazon Ember font family. Size Finder’s ingress was restricted to around 100px in height, with a fixed location between the Color Twister and Pricing. Fit tested different ingress icons, such as using a measuring tape or ruler to indicate ‘find my size.’ However, they received mixed results as users associated those icons with a size chart or virtual fitting room. We eventually chose a sparkle icon from Noun Project, with some modifications for our use case. A few components such as the weight slider had to be designed and built from scratch. Some apparel sizing such as men’s pants, came in a variety of sizes or formats (numeric/alpha). In order to keep the screen height short and information easily digestable, I organized the size buttons into tabs. Selecting one size would automatically convert to the corresponding size on the secondary tab. Additional UI component work: Measuring guide UX as a visual aid ‘how to measure’ Updated global size charts Added a new cm/inch toggle Added custom icon, referenced Rio design system (Amazon Shopping, Amazon Fashion) https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/8da34b02-d959-4e68-8dc5-4005c8d564e4/SFchal2.png Work - ★ Size Finder | Amazon Fashion - THE CHALLENGES Keeping the Size Finder survey as short and accurate as possible. Research showed that users often abandoned the journey after the third screen, so the data collection had to be very minimal, even though more information sharing would lead to better results. Increasing brand trust with third-party sellers. Many customers were wary of foreign sellers and did not trust size charts, especially those in the ‘plus size’ product category. The person using Size Finder was not always the end recipient. Parents tend to buy clothes for their kids on their own account, affecting recommendation results. Customers wanted to know the logic behind the recommendation. Displaying their regular size led to customers doubting the purpose of the recommendation. Some customers did not want to see the recommendation at all. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/98c24b76-09fe-4464-b9bf-ee33de3b2953/SFfinaldes.png Work - ★ Size Finder | Amazon Fashion https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/834f31f0-bad5-40c3-a12b-1b425ba46a7b/SFplatform.png Work - ★ Size Finder | Amazon Fashion - THE PLATFORM Designed for Amazon’s mobile app as well as mobile browser, the survey depended on machine learning to provide the most accurate results. The Fit Science team invented a machine learning approach that used external size charts of customer’s preferred brands, and compared them to high-quality size charts of brands in our catalog (e.g. Amazon Essentials). Machine learning also took into account attributes such as style, fabric, and customer feedback. This enabled customers to receive size recommendations while they browsed other items in the same department - and in relevant Amazon Fashion experiences such as Profile hub. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/3c51c9ca-0e22-4054-9a6f-6b4a1a9f9d72/SFresults2.png Work - ★ Size Finder | Amazon Fashion - RESULTS Size recommendations were forecasted to contribute to $557M in attributed annual revenue (based on weblab data) by alleviating fit anxiety and boosting customer confidence in making a purchase. Excerpt from weblab data: Since collecting optional height and weight on detail page and customers reviews, 33M customers (which shows up on 60% of apparel reviews) have shared their height and weight information, which is now stored in their profile for future size recommendations. At the same time, innovative retailers across the industry have also launched compelling experiences to collect fit information (e.g., GOAT, Rent The Runway, Zara, Fit Finder-acquired by Snap) and across the industry, we see that customers are willing to provide personal information to power personalized shopping experiences. From the Fit Benchmarking study I did, we saw that 35% of our competitors have already launched a more comprehensive and compelling customer data collection CX than our previously launched height and weight cards. Size Finder will be a critical feature for customers worldwide to find the right size, quickly and accurately. Set to launch in 2023, with the North America region first, Size Finder would eventually be rolled out to Amazon’s worldwide marketplaces. We expect the $557M to grow with the online shopping industry, especially with research and improvements at every phase. https://www.debbiefoong.com/work/labor monthly 0.5 2025-01-09 https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/22ac26d9-47ae-4a5a-8f67-9253ce5a6930/raul-gonzalez-escobar-ZpIskW1Tuvc-unsplash.jpg Work - ★ Workflow Manager | Amazon Fresh - THE PROJECT Disclaimer: This is a project summary. full details are available during portfolio reviews/interviews. thank you for understanding. Amazon Grocery is a $24 billion dollar business consisting of 3 major departments: Whole Foods Market, Amazon Fresh, and Amazon Go. Every Amazon Fresh site has business metric trackers on shipment volumes, grocery storage, staff pick rate, and more. There’s daily revenue targets to meet, and many of those targets are automatically generated based on live data that refreshes every 4 hours, 24/7.
 Managers used almost 30 tools and dashboards to monitor their operations and site performance. Data was often inaccurate. This led to managers having to re-calculate errors, costing the business time and money.
The “Workload Manager” project was created to consolidate several tools into to one single UI that would become the source of truth for live operational data. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/7ca58959-212c-4072-b6c6-98227ee0cda1/Inventory-managment-hub.jpg Work - ★ Workflow Manager | Amazon Fresh - the problem Situation = Amazon Fresh managers were using a combination of online and offline tools to calculate their site’s performance daily. Data was less than 50% accurate, costly ($140M) and time consuming to fix (1.5 hours/week). Task = Consolidate operations, inventory, and sales data from 29 tools into 1 scaleable dashboard for efficient planning and managing site performance with real time insights. Action = User research, wireframes, iterations, mocks, prototypes, feedback sessions Results = $147.3M total in cost savings, and 523 hours total saved/week (across 55 sites) https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/5bcc5109-f665-4021-9772-6a2b50852a22/sicong_me-resized.png Work - ★ Workflow Manager | Amazon Fresh - TEAM & ROLE Amazon Worldwide Grocery Stores & Tech (WWGST) departments involved: Product Program Operations, International + Domestic Engineering / Tech Fresh Stores Whole Foods Market Partners Role: Lead designer Responsibilities: Refining product requirements, pain points User research (monthly), feedback Wireframes, mocks, prototypes, iterations https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/8b7340fa-1f84-4c43-8bb7-4f759c85fad8/research_la1.png Work - ★ Workflow Manager | Amazon Fresh - USER persona & STORY I created a user persona named Josh to help understand this project better. This persona is based on a compilation of user research I did at multiple grocery warehouses, and feedback I received from various managers throughout the design process. Josh is responsible for calculating his site’s performance and how much headcount he needs on the site every day. The headcount relies on factors such as: shipment volume, type, temperature inventory management, online orders, How much ‘backlog’ of groceries his site has to process from the day before, as the team often does not get through all of the shipments that arrive from vendors. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/0470efb6-fa4e-4e97-b6af-88f01ade89a1/research_la2.png Work - ★ Workflow Manager | Amazon Fresh - user RESEARCH I conducted research monthly with our core users: area managers, site leaders, and multi site leaders. Research included: in-person interviews, online presentations and feedback sessions, and in-person feedback. Some questions we asked included: Who organizes and plans shifts? What time (or frequency) do you normally plan these? What were the existing tools? Which tools have been the most/least useful? What metrics tell you you’re doing well? How does performance or under performance affect planning? https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/7d5e26d2-5674-4b18-807f-b17b43593c40/Screenshot+2024-07-21+at+11.15.02%E2%80%AFAM.png Work - ★ Workflow Manager | Amazon Fresh - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/b3cff630-b16f-42d6-b4db-570ecc1e93a3/infoarch.png Work - ★ Workflow Manager | Amazon Fresh - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/422bdaa8-bf1b-4a1a-8455-a6d11ed45a90/customcomponents.png Work - ★ Workflow Manager | Amazon Fresh - interface design > custom components In addition to Amazon’s Meridian design library, a few assets had to be provided by external plug ins, such as the Victory plugin for data visualizations. I adhered to the Meridian design library and their guidelines where possible. But I also used some of the existing assets to make custom components, such as the Key Metrics summary. This was to address 2 user pain points: Old Excel templates offered a ‘big number overview’ that managers found useful. But this visual style was missing in the “new software” created for them. Many managers expressed “feeling lost in the sea of data.” I learned from the research that every site had different needs, and what was considered a ‘success business metric’ for one, might not be relevant to another site. Being able to customize what they needed to see, and quickly, was essential to daily operations and monitoring site performance. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/7f63b4d9-4e7b-4100-9533-8d3f9860f971/finaldesign_la1.png Work - ★ Workflow Manager | Amazon Fresh - FINAL DESIGN Interactive prototype link (Figma presentation) https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/5b4c7f8d-1d76-4cfb-809c-6924d48e42bd/macbook-laborallocation.png Work - ★ Workflow Manager | Amazon Fresh - RESULTS Financial impact $37 million dollar savings and $110 million dollars in ops = from improved labor scheduling and tracking $174 thousand dollars in logistics leadership cost savings = from managers submitting tickets $117 thousand dollars in cost savings = from staff intervention due to manual process Time impact 91 mins per week 8 manager hours saved/site (assumed per week) User impact Manager experience (simplification of multiple dashboards, more control, greater satisfaction) Reduce inefficiencies along the supply chain with manual process Labor optimization (better SLAs, performance, quality targets and shrink) Deprecated tools and tech migration that helped the business get closer to automated processes https://www.debbiefoong.com/work/foothills monthly 0.5 2023-07-18 https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1602276671658-V93XV292GNDEDHE7RUAN/pic2b.png Work - Foothills Christian | App - THE PROJECT Foothills Church began in 1925 as a humble mission-driven organization, dedicated to community service in Boise, Indiana. They expanded through outreach efforts (clothing, food drives, foster care) for the local community. By 2018, the organization grew to 750 people, and they had a mobile app with a competitor (Subsplash). Organization leaders Pastors Doug and Kim Peake wanted more control over their fundraising efforts (donations, online gifts) and stronger creative visuals that would more accurately reflect their brand identity. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1604722027485-AEZYGN3AZSCD3X3M79YR/IMG_3997_edited.jpg Work - Foothills Christian | App - TEAM & ROLE Project Manager Built customer relationships and handled communication App Designer Created visual designs and set up the CMS Content Manager Content strategies and releases Technical Team Developed the app, managed submissions to the App Store (iOS) and Google Play Store (Android) https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1602385926048-JWX1POQ5NEUW02NRZN83/pic3.png Work - Foothills Christian | App - PLANNING Foothills’ team first established contact with Pushpay’s sales team. Once introductions had been made, a project manager and I were assigned to the client. We worked together to get information from the client, such as: App Content App Branding and Style Target audience demographic and size The client actively communicated what they wanted and didn’t want, helping me form a better understanding of their preferences. Based on their resources and visual examples, I created a style guide with unique branding elements for the app. Their website aesthetic and social media platforms also gave cues to their tone of voice, and who their users were. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1602540496657-D4JWQB6GDDVGYWHFPFY7/pic4-grey.png Work - Foothills Christian | App https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1602547658618-P14DCNGVQA5JWW8V4M36/designprocess.png Work - Foothills Christian | App - DESIGN Process The project manager created a design brief. I analyzed the client’s branding resources and visuals. I drafted a sitemap for app content and user navigation. I sketched wireframes for main navigation screens. I designed the app according to the client’s preferences. The app would go through several QA checks before final sign-off. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1602709048423-11GYNGDSFBH7USVUZ3DW/pic6.png Work - Foothills Christian | App - SITEMAP Sketching out a sitemap is a preliminary step in my design process. The client’s previous app lacked creative direction and unique brand elements. Considering how important music and performing arts was to the client, I chose their Livestream content to be the app’s focal point. It would dictate the rest of the design, and how the brand visuals were communicated. The Home screen hosted a variety of media collections. It would be the center of user activity and resources (playlists, user notes, blog feeds). I then organized the Connect screen functions according to most-used to least-used, with Give having its own screen for online donations. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1603243826936-U57NKTWB8GA1D2WY4DY8/pic7.png Work - Foothills Christian | App https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1603342786692-MMABNL517O4Z559JBP6Y/wireframes_draft.png Work - Foothills Christian | App https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1603486111261-TPMS1EFE1S8CJDMATD1E/pic9.png Work - Foothills Christian | App - THE CHALLENGES The client was not new to the scene of custom apps. They had an existing app with a competitor agency and were very tech-savvy. They had a good idea of what they wanted, and what wasn’t working for them. Their priorities included: a bigger media library Their current app hosted limited media content. Their website, Youtube, and Vimeo collections had scattered content, with some videos included in one account, but not another. Collections were disorganized across platforms. a donation portal Many payment portals required users to sign in or complete several account creation steps; this app would lead straight to a donation transaction page with a single click. an app re-design Beyond the client’s logo, there was little else to indicate their existing app belonged to the organization. Brand visuals were lacking and images were static. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1603486146234-SJX69ZBIES4HZL65AE1W/pic10.png Work - Foothills Christian | App - INTERFACE DESIGN Foothills’ brand kit emphasized clean and modern designs. They wanted a subtle and sophisticated look. Their brand colors were white, grey, with orange as the accent. However, I noticed their media told a different story. The pictures they shared with our team were colorful, with varying degrees of contrast. Several shades of dark blue and teal could be found throughout the photos, with warm undertones. I chose to use the client’s photos as they were - designing the app with simplcity in mind. White space and a translucent white overlay provided an easy transition from the colorful photos. The client’s naturally vivid aesthetic was able to shine, and their media content could take center stage. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1603607212021-QJN9H0G2XAILIFTNZ1RX/allscreens_foothills.png Work - Foothills Christian | App https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1603921648818-Y81JU0GDYCUINA0QUZW0/pic11b.png Work - Foothills Christian | App - USER EXPERIENCE Once the final design was complete, I submitted the application to my team for internal quality assurance (QA) tests. Teammates would evaluate the content, creative direction and execution, along with checking if the app followed App Store and Google Play store app standards. After receiving feedback and a performance score, I made iterations as needed. The application would undergo another round of reviews by our technical team to ensure the app was ready for roll out. They were responsible for building the app and submitting it to the app stores. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1603869487637-3XF7UQFNBNOFZR78N01G/keyd-1.png Work - Foothills Christian | App https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1603869537298-AZUNFE3CMFTPTS9DVCMI/keyd-2.png Work - Foothills Christian | App https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1603869513409-4V0PDJXYP52GQLT334HQ/keyd-3.png Work - Foothills Christian | App https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1603921502227-8VWYU6LCK2IDBKWNYI7Q/cross+platformb.png Work - Foothills Christian | App - THE PLATFORM The Foothills app was designed to operate on any iOS or Android device. With the mobile framework written in React Native (React.js), the developers utilized Flux application architecture for state management. The app's backend was controlled by an in-house content management platform. It used service workers for daily synchronization and offline storage. Users could save device-specific data to their phones, or share it with other applications. The in-house CMS was able to push updates to the app using React Native bundle dropping. This meant the app didn’t need to be resubmitted to app stores every time a change was made. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1603996157994-NOICNZ67DRNPYX8P1NKQ/results_stats2.png Work - Foothills Christian | App https://www.debbiefoong.com/work/saint-james monthly 0.5 2023-06-28 https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1588229205156-QDB7R1LBYNVHTJNSQLR2/pic2.png Work - Saint James | App - THE PROJECT Saint James Church was established in 1949 as a small Methodist church in Alabama, United States. They have since grown to 1,100 attendees, with their own radio and TV station. The transformation into a cornerstone of the Alabama’s community led to Pastors Lester and Janeese building more resources for local families. They wanted a digital platform that would scale with their growth. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1604721917861-ZX58EGKSMOPDRGEWC37F/IMG_1987_edit.jpg Work - Saint James | App - Team & Role Project Manager Built customer relationships and handled communication App Designer Created visual designs and set up the CMS Content Manager Content strategies and releases Technical Team Developed the app, managed submissions to the App Store (iOS) and Google Play Store (Android) https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1588286109082-UMJSAKTZB6HL31SGCQXB/iPad+Pro+-+square.png Work - Saint James | App - PLANNING The client first established contact with Pushpay’s sales team. Once introductions had been made, a project manager and I were assigned to the client. We worked together to get information from the customer such as: App Content App Style preferences Target audience demographics and size Once they submitted their information, I created a style guide with their unique branding elements. Based on their website aesthetic, social media platforms, and the client’s choice of words, I formed a greater understanding of their identity. And how that identity translated into a mobile app for them. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1588479595503-FP6U1TAGA0BW6G7VP5AP/pic4-grey.png Work - Saint James | App - APP USERS - PICTU https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1588399925899-9TRPZ1O76ULLD9WCRC5G/pic5-imac2.png Work - Saint James | App - Design Process The project manager created a design brief. I assessed the client’s online presence and social media. I reviewed the design brief and drafted the initial wireframe. I sketched a sitemap for app content and user navigation. I designed the app according to the client’s branding. The app went through several QA checks before final sign-off. Our creative and technical teams checked for usability, content, and app aesthetics. I made iterations as needed so the app could be published in the App Store (iOS) and Google Play Store (Android) by our technical team. The app was designed to be cross-platform native (React.js), and fully functional on both tablet and mobile devices. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1588531579852-USPNP243X3AMGS9MI72E/pic6+%281%29.png Work - Saint James | App - SITEMAP short blurb here on what I did https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1603241837879-MGQENZ35E1Y9KJVPZTIL/pic7b.png Work - Saint James | App https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1595925452666-3C5XWB8FEDZ0TXVTMNTJ/wireframes_final.png Work - Saint James | App https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1588911344141-863MZ3ZZWJPOEI9GSWE8/pic9+%281%29.png Work - Saint James | App - THE Challenges Unlike other clients with one primary demographic, Saint James’ audience was multi-faceted: different generations, genders, and interests. They needed a digital platform that could deliver content in an appealing way, to several user groups. Their website was also resource heavy, with archives of information. This wasn’t ideal for a mobile experience. Saint James wanted a dynamic home screen instead. Similar to a news feed that updated automatically with the latest media and events, it would keep content fresh and relevant. With their dedication to helping the local community, there would be heavy user interaction on a daily to weekly basis. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1596315037759-CMY797Q6RB7PIQZEZJJI/pic10-all.jpg Work - Saint James | App - INTERFACE DESIGN Saint James had distinct, modern branding, with primary colors of orange and white. The client also shared their branding guidelines, including imagery, brand color palettes, fonts, and design elements that were important to their identity. I chose to highlight the Saint James’ orange, to convey a sense of warmth and community. I designed the app to be mobile space for users to connect, and stay connected to Saint James. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1601427587722-S1FA6KIBSOYU8QHO039R/final_design_allscreens0.5.png Work - Saint James | App https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1601930568378-SFNJXESTD2JZ1ZIUUH1U/keyd-1.png Work - Saint James | App https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1601930580439-5YHX78WOH1G2BK9GWAMZ/keyd-2.png Work - Saint James | App https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1601930619875-4T464JDL5QWKRV1M0SNQ/keyd-3.png Work - Saint James | App https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1601871587840-9GTHLQ548LF1LVPCGCUF/pic11.png Work - Saint James | App - THE PLATFORM The Saint James app was designed to operate on any iOS or Android device. With the mobile framework written in React Native, the developers utilized Flux application architecture for state management. The app’s backend was controlled by an in-house content management platform. It used service workers for daily synchronization and offline storage. Users could save device-specific data to their phones, or share it with other applications. The in-house CMS was able to push updates to the app using React Native bundle dropping. This meant the app didn’t need to be resubmitted to app stores every time a change was made. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1601862531541-YRK5P568H82SMVEY5Z5Z/results_stats.png Work - Saint James | App https://www.debbiefoong.com/work/logodesign monthly 0.5 2020-12-01 https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1606625883873-3HRYHSHW3X9KNH7FQ307/project.png Work - Logo Design - THE PROJECT In 2006, I started designing and making fashion accessories, gradually progressing to handmade jewelry. However, I only established my jewelry business in October 2019. My business had a rich story spanning several countries. But it lacked a logo, a brand identity and branding materials. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1606625588991-IWBFGU4Y19AURMFAQMAH/objective.png Work - Logo Design - oBJECTIVES Create a brand logo Form a strong brand identity Design branding materials https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1606629751758-IUVUSN1YSSD3H0HJVVGC/20200223_163945.jpg Work - Logo Design - CONCEPT From a young age, I was exposed to a myriad of colors and cultures. My family moved from Singapore to South Africa, Japan, Canada, Hong Kong, and eventually the United States. East Asia’s fashion scene inspired me, because they were places where elegance co-existed with edge. My experiences also showed me that people didn't need a million dollars to be beautiful. Therefore, I chose the name ‘Dainty District.’ ‘Dainty,’ to represent the delicate, feminine beauty many people used to describe my work, and ‘District,’ as a reference to fashion, textile, trade districts (across the world) where my supplies were selectively sourced from.The brand concept was: “A collection of beautiful, feminine accessories for every day life.” https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1606784496019-XW4UXHVMI553QGYXX7K7/ddplanning_ipad.png Work - Logo Design - PLANNING I created a mood board of images, colors, and fonts that provided inspiration for the logo. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1606541423781-SUNFL17CGWIJLCV1HG6H/sketch_collage.jpg Work - Logo Design https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1606865190464-2IJC0COMGFB04X9RMDLD/4logos.png Work - Logo Design - DESIGN PROCESS Brightly colored text on dark colored backgrounds were easier to see, accessibility-wise. I chose a dark blue-teal shade as the primary color. This color was subtle, sophisticated, and a popular color for clothes and design in Japan and Korea. The logo itself would be white (if only two colors were allowed), or a holographic silver (on a business card). The holographic effect produced a rainbow of colors, which represented the multitude of jewelry designs available in the Dainty District world. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1606861790156-F24F8ZJLI3T77B58ITMK/designprocess2.png Work - Logo Design - PRINTING PROCESS I contacted Fastprinting, a specialty printing service for business card quotes. After I ordered a sample pack of card materials, I drafted my design and sent it to their team and designers. Here are the designs for the front and back of the card. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1606863671295-A9N8QUTLH6XBT9AW3IQZ/designprocess1b.png Work - Logo Design - BRAND IDENTITY With the logo design finalized in various colors and formats, it was ready to use for digital media. It was featured prominently on the online shop website, as well as the brand’s social media account. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1606865724256-CIX0VAPYVV3V5UUI9AJ6/20191102_170233.jpg Work - Logo Design https://www.debbiefoong.com/work/icon-library monthly 0.5 2020-11-11 https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1605118202128-E9105SSCJ4FV2MNA1AC2/gall-1.png Work - Icon Library | Prototype https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1605118213243-D9IP5YUYLMX1HD2GWGT4/gall-2.png Work - Icon Library | Prototype https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1605118221643-6E5W4PHUWW8WKVVU23HT/gall-3.png Work - Icon Library | Prototype https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1605118238696-MO8MGTXM0GN32QYNY4SV/gall-4.png Work - Icon Library | Prototype https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1605118244348-N0YNZ1F4X5JISC3500PV/gall-5.png Work - Icon Library | Prototype https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1605118259882-TBQTOIYHO7EPUVG9M0BD/gall-6.png Work - Icon Library | Prototype https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1604969742461-CIZ1X8TK0Q7BFD7JMLU0/cover+copy.png Work - Icon Library | Prototype - Icon Library: Prototype UX + Web Development https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1604973975931-SRE4SV4FIICTB8N1GRHK/pic1.png Work - Icon Library | Prototype - THE PROJECT Pushpay provides digital solutions to organizations in North America, United Kingdom, Australia and New Zealand. To better serve our mobile app users, my UX team (credit: Neil Deshpande) interviewed members of the customer relationship department. From their insight and daily interactions with customers, we identified a major issue in the user experience journey: the icon library. The icon library was a collection of over 1500 icons from Streamline, with some custom icons created by our team. These icons were used by internal and external teams when designing mobile apps. They were responsible for navigation and visual aesthetic within each app. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1604979344724-A76KHPHK5Z2MDYZNIDFR/20191020_135253.jpg Work - Icon Library | Prototype - TEAM & ROLE Date: November 2018 - August 2020 Team: Two UX designers and one web developer My Responsibilities: Interviewing Prototyping (HTML5 and CSS) Debugging & Maintenance (Github) Collaborating with Engineers https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1604979724220-ILOPGZ1AUBIHOL3R85XO/macbook-mock-icon3.jpg Work - Icon Library | Prototype - THE PROBLEM All 1500+ icons were displayed on one infinite-scroll page. There were no sorting options and could not be filtered into different categories. Users would spend a lot of time searching for their desired icon. They would often chose irrelevant icons, reducing the usability of their apps. Many users grew overwhelmed by the icon library and lack of navigation. They were unable to save their favorite icons or or frequently-used ones. Users contacted our customer service team with requests for an organized library regularly, adding to our product feature requests. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1604981238421-H3GQ3LNU976ZPNR1R3ZC/andrea-davis-OBV5XREI-ig-unsplash.jpg Work - Icon Library | Prototype - PROTOTYPE CONSTRAINTS Permissions and Access: As a growing startup, Pushpay had offices in Seattle (Washington, USA) and Auckland (New Zealand). Many engineers were located in New Zealand, leading us to collaborate remotely for the majority of the project. Gaining access and permissions from cross-functioning teams took significant time, especially with international time differences. Search Bar Difficulty: Developing a search bar would require building a secondary database (Javascript), servers (for hosting), and extensive usability testing. Our US-based engineering team was small, lacking the capacity to build out this feature, As a result, the UX team had to design a new prototype that would be easy and intuitive for users to find icons, without a custom search bar. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1578877141982-B9F16154XOEQ1EHBHE6Z/neil_opencardsorting.png Work - Icon Library | Prototype Grouping by association. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1578877824108-PV2Z9OQVQWSOFUKKF23M/neil_ideation_edited2.jpg Work - Icon Library | Prototype Brainstorming the information architecture. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1604984642027-9Y1VRUBAZEYGKB2G8TD4/prototype_1resized.png Work - Icon Library | Prototype - PROTOTYPE 1.0 Neil converted sketches and wireframes into digital mockups so that we could use InVision to create a prototype and test our design. We then recruited more participants from the same user group as before. We ran a first round of testing, using the same script (read: assigned tasks) as before. Neil wanted to see if the categorization and sidebar navigation were helping users find icons more easily. Once we completed this round of testing, he created an affinity map to synthesize our notes. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1604984847516-0WV0AK52IA3I90CH2OMD/Screen+Shot+2020-11-09+at+9.06.00+PM.png Work - Icon Library | Prototype - PROTOTYPE 2.0 After analyzing the results from our first round of testing, we went back and iterated on our original design. Our goal for this round was to see if the larger icons and expanded categories helped users find icons more easily. The results included: Reduced time and improved efficiency Inspiration with different icons Successfully sorting https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1605060323066-CR6COEON81X02FQFF4M6/proto3.png Work - Icon Library | Prototype - PROTOTYPE 3.0 “Wow. I didn’t even know we had that icon. And we have three of them.” -Beta-Tester Following the results and iterations from Prototype 2.0, I set out to create the first working prototype on a local server. This version was built with HTML5 and CSS, and I collaborated with various internal teams to get the correct branding elements aligned with Pushpay’s style. With the help of our web developer and other engineers, we deployed the project on Github. I continued updating the prototype with custom styling, bug fixes (e.g. missing icons or incorrect SVG files), and brainstorming new features that could be easily added. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1605076611903-W4GWDXIZSOCNWE502CVP/proto4.png Work - Icon Library | Prototype https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1605128505648-4U0TARAQ1J4KTW0NHWJ1/feedbackpic.png Work - Icon Library | Prototype - FEEDBACK We presented prototype 4.0 to the rest of our UX team. As daily users of our CMS platform and apps, we felt their input would be the most valuable for beta-testing. After one month, we interviewed them to learn more about how their user journey had changed. https://images.squarespace-cdn.com/content/v1/5df5c26332319a3a9af45f14/1605134121511-TNT87Z8DU0MG5DS5ZCBJ/resultsb.png Work - Icon Library | Prototype