Portfolio 2024
Jocelyn Cao | 2023-24
Hello and Welcome! You’ve probably reviewed about a hundred applications by now still looking for the perfect candidate for your UX/ Product Design team, and you’re ready to go for lunch... But wait, did you know that feeling hungry (for a short period of time) is actually healthy? Or so I’ve Googled (Disclaimer: definitely not an expert). Anyways, I think you should review one last application before you go. You’ve already come so far, and this portfolio was made just for you. And hey, maybe I’m exactly what you’re looking for! 2
[email protected] (647) 628-8133 JOCELYN www.linkedin.com/in/joc-cao Portfolio: https://rla.to/7jipw CAO UXANALYST ALTUS GROUP WORK May2023-Present - Toronto, ON EXPERIENCE • Conducting primary (semi-structured interviews, usability testing, surveys) and secondary research (literature review) • Analyzing qualitative data through thematic analysis to enable designers to make insight-driven decisions • Conducting user group research to build a unified understanding of product users between UX, development, and management • Tools: Excel, FigJam (affinity diagramming), Figma (design system) CADDESIGNER SKY SIGHT INC Oct 2022-Aug 2023 - Toronto, ON • Produced BIM models and CAD drawing sets for 15 projects ranging from commercial buildings to single family homes within tight deadlines (approx.16 hrs/project) • Tools: Revit (3D modelling), AutoCAD (drafting) NANOLEAF UI/UXDESIGNER Sep-Dec2022-Toronto, ON • Collaborated with UX Researcher to deliver the digital MVP of Nanoleaf 4D from end-to-end • Built prototypes and conducted user testing to evaluate feasability of ideated design solutions for the Nanoleaf app • Documentedappflowstoimprovecommunicationbetween cross-functional teams and optimize design time for future projects • Coordinated updates to Android app with development team to improve consistency with iOS app and overall user experience • Tools: Figma (UI design, UX design, prototyping) ASSETDESIGNER DEFY GAMESINC. Jan-Apr 2021 - Toronto, ON • Designed, modelled, and animated low-poly adventure-themed gameassets(scenery and characters) for game development • Tools: Blender (3D modelling, animation) UX&GRAPHICDESIGN SOFTWARE TOOLS InDesign Figma Photoshop Illustrator 2DCAD&3DMODELLING Blender AutoCad Revit 2023-2025 UNIVERSITY OF TORONTO EDUCATION Candidate for Master of Information, User Experience Design Expected Graduation: Aug 2025 2018-2023 UNIVERSITY OF WATERLOO Bachelor of Applied Science, Architectural Engineering Honours Co-op with Specialization in Building Systems Top 6 in MTE Consultants' Architectural Engineering Capstone Pitch Competition 2022 ACHIEVEMENTS 1st Place Elizabeth Ziegler Playground Design Competition 2019 LEEDGreenAssociate 2019 3
4
PROJECTS Click on a project to view. User Experience Design NANOLEAF4DDEVICECONFIGURATION 6 UI/UX Design TDBANKINGAPPRE-DESIGN 10 UXCaseStudy Architecture & Engineering 152 SHANLEYST 14 Mixed-use Mid-rise Building Design GameDesign BAKERYASSETDESIGN 18 3DGameAssets 5
Nanoleaf 4D Device Configuration Responsibilities: UX Design (for lightstrip calibration and device positioning), UI Design, Prototyping TheNanoleaf 4D is a screen mirroring camera kit that syncs the colours of a screen to an addressable lightstrip as well as other Nanoleaf RGB light products and provides an immersive entertainment experience for watching movies/showsorgaming.Alongwiththereleaseofthephysicalcamerakitproduct,theNanoleafappwasadapted to be able to control and configure Nanoleaf 4D through a user’s mobile device. 4DCamera&LightstripCalibration To ensure that the lightstrip colours properly sync to the colours of the screen, the user must calibrate the camera sothedesiredscreenareaiscaptured,andcalibratethelightstripsoindividualLEDsonthelightstripreflectcolours basedonits location relative to the TV/monitor screen. Control View Device Settings Screen Calibration The user navigates from the Tapping on the settings icon, The user is directed to drag the corners of app home screen to the takes the user to a device the polygon to capture the area of their TV control view where they can settings page where they can screen. The full screen button allows users adjust the device’s display modify the calibration of their to have their phone in landscape. The refresh button allows the user to update the image if they need to adjust their 4D camera. 6
Lightstrip Calibration Lightstrip Orientation CameraPosition The user is directed to locate The user is prompted to Theuserispromptedtoindicate the corners of the TV on their indicate how their 4D lightstrip where their 4D camera is 4Dlightstrip. is mounted on the TV. located with respect to their TV. Lightstrip Calibration Note: Lightstrip shown on front face of TV for visualization purposes only. 3 2 1 When the user arrives on the The user selects the corner they The user rotates the dial to signal lightstrip calibration screen, there would like to adjust (“upper left”), the selected light dot to move are four green light dots on the and the respective light dot clockwise or counter clockwise to lightstrip, each representing a pulses to indicate that it is its respective TV corner. corner of the TV. selected. 7
Device Positioning Other RGB Nanoleaf devices can be synced to enhance this entertainment experience. The user can add devices to the 4D experience and position them in their room to ensure proper syncing relative the TV/monitor screen. Device Selection Positioning Height Adjustment Demonstration Demonstration The user selects the devices In their first device positioning Similar to positioning, the they would like to use in setup, the user is shown a user is shown a combination with their 4D demonstration of how to demonstration of how to device. position their devices. adjust the height of their devices. Further Considerations & Improvements Design is an iterative process. Include a reference point to This design was only the MVP organize other devices around. of the Nanoleaf 4D mobile experience and is far from perfect. In the initial design, users organize their devices in relation to each other. Here are some considerations Including a TV in the room would help and improvements I would users by giving context on the room makeif I could reiterate on the orientation. MVPdesign. 8
Device Positioning Device Selected (in Position & Height Active State) Adjustment The user’s selected devices When the user taps on a Theusermovesthedeviceby are displayed along the wall device, it turns green to dragging the device icon and of a room, and the user is indicate that it is in an active adjusts the height by tapping directed to position their state. on the alternative height devices. options shown as green dots. Support “Undo” and “Redo” to leave unwanted actions. The user is prompted to perform actions, but there is currently no way for the user to undo an action that they performed by mistake. Undo/redo buttons will give users an efficient way to recover from a mistake. 9
TDBankingApp Redesign TD has been offering banking services for many decades, and in recent years, the company has developed a mobile app to better serve its customers. This app allows customers to conveniently perform functions such as, paying bills, making e-transfers, depositing cheques, as well as simply viewing account details and transactions. In this study, the user experience in TD Mobile Banking App is reviewed to identify the strengths and weaknesses of the existing design. A competitive analysis is conducted by comparing and contrasting the user experience in other banking apps such as RBC and Tangerine. Finally, an improved UI for the TD App is proposed with consideration to the existing pain points in the app and analysis of competing apps. Whatdoestheexistingapplooklike? SummaryofPainPoints Cluttered Main Menu - TD offers many services, which may be beneficial for select users. However, displaying all the services in the main menu bar can be more distracting than useful. Decentralized Transaction Menu - Transaction features, such as making e-transfers and paying bills, are shown in the main menu, home, and within individual accounts. Though this format was likely adapted for versatility, it seems more unnecessarily repetitive. Difficulty Locating Credit Card Information - Important details, such as credit limits and statement due dates, need to be purposefully searched for to be able to find. Being unaware of this information often leads to penalty fees and unhappy customers. 10
Whatdocompetingappslooklike? After taking a look at the TD app, banking apps developed by Tangerine and RBC were reviewed for comparison. Theappseachhadtheirindividual strengths and weaknesses, but certain strengths were common in both. KeyFindings in Competitive Analysis Helps users visualize their credit card limit by Usesiconic RBC mountain scene - good showing spending in a graph. branding. Displays important details like statement due Hasconveniently located “help” button dates and credit limit in plain sight (on main where users can access chatbot, FAQs, credit card page) andcontact/branch information. Showsbreakdownofcashbackrewards Hashometabandaccountstabshowing earned and respective cashback category of redundant information. each transaction. Not all clickable features look clickable. Only allows account statements to be viewed by opening the PDF format. Automatically takes user to the sign-in page when app is opened, eliminating any unnecessary steps before sign-in. Usesafixed horizontal main menu at bottom of screen, highlighting most used features (e.g. viewing accounts, making transactions) Centralizes transaction features in a single tab (on main menu bar). Whatshouldtheproposeddesignachieve? Utilize more visual Re-organize and Havetransaction graphics and simplify the main features in one diagrams… menubar… location… …sothatusers …sothatuserscan …sothatuserscan have better idea of easily access maketransactions spending trends. commonlyused moreefficiently. features. 11
TheProposedDesign Account Sign In Accounts Dashboard Users open the TD app to check After login is complete, the user informationintheirbankaccount, is brought to the “Accounts” so the login page should be first page where their various to appear when the app is accounts are summarized. opened. Themainmenuisfixedatbottom Banking information should be of screen for easy access to kept confidential. Using two-step mostcommonlyusedfeatures. login will reveal less information onasingle screen at a time. 12
Transaction Menu Credit Card Activity Credit Card Statements All transaction types are listed The “Spend” page has a gauge Under “Statements”, information under the “Move Money” tab, so line to allow users to quickly see about the latest statement can users can easily locate where to if they are reaching their credit be accessed as well as utilize transaction features. card limit. information about most recent payments. Past monthly spending is displayed in a graph to give the user a sense of their spending trends. 13
152 SHANLEY ST Location: 152 Shanley St., Kitchener, ON Course: AE325 - Project 1 Studio Duration: 3 Months Responsibilities: Research, Space Planning, 3D Modeling & Rendering Original Rainwater Harvesting Oneoftheearliest Reduce water consumption iterations from the massing by harvesting rain for stage. non-potable water uses. L-shape GreenTerraces Overall shape changed to Communalgreenspaces L-shape to better allow sun addedtoupperfloors. light into building core. SunShading Horizontal louvres added on South side to reduce direct sunlight into building. 14
RF Roof Level Solar panels on the roof offset some of the energy consumedbythebuilding. L9 Residential Units & Greenspace Terraces Thevariety in unit sizes on each level accommodate user preferences. Units with balconies are available for L4 residents who prefer a Greenspace Terraces private outdoor space. Terraces provide space for residents to socialize and meetwith friends and family. L1 GroundLevel Commercial spaces are located solely on the ground AboveGroundParking& floor for convenient access. Access to Underground Miscellaneous spaces for Parking residential accommodations are located on the East side. Parking for accessibility and convenient location for TheNorth side greenspace commercial occupants. can be used by residents P1 andcommercialusers. Underground Parking, Service Systems & Storage Parking for residential and commercial areas are located underground to minimize above ground land use for parking and decrease construction of impermeable surfaces P2 (pavement). Spacesfor storage and Legend service systems are located 1 BDRM underground since these 1 BDRM+DN areas will not be accessed 2 BDRM frequently and do not require 2 BDRM+DN daylighting. 3 BDRM 15
2 BDRM+DNUnitLayout Bedroom Openlayout of the kitchen, living, anddining room allows daylight into communal spaces of the unit. Kitchen / Living / Dining L4 Greenspaces L5 Terrace L10 Terrace Various green terraces are located on the North, East, and South sides of the building. In addition, the Northside greenspace is accessible to residents, as well as commercial users and the surrounding Northside 16
Northside Greenspace Fitness Centre Peaceful garden space Exercise space facing away from the conveniently located Northside Shops busy street traffic. to promote residents to live healthy lifestyle. Shopswith view andseating by garden space. Marketplace Residential Lobby Entrance View of garden Conveniently- space from main located grocery residential store for residents entrance. andneighbourhood, promoting healthy eating. 17
BakeryAsset Design BakeryStorefront Interior Spaces Dining Area 18
Baker Girl Detailed Objects Loaf Baguette Cross Bun Rolls Croissant Mouse Utensil Rack LogStack Crate Barrel Kitchen Space 19
JC | 2023-24