https://matthewtsang.design Matthew Tsang Fri, 25 Apr 2025 06:37:36 +0000 https://matthewtsang.design en https://matthewtsang.design/Works-2025 Fri, 25 Apr 2025 06:37:36 +0000 Matthew Tsang https://matthewtsang.design/Works-2025 SELECTED WORKS 2025 <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/89fb9b1b2fb2cbac363ad16613301b4840ab8b41b687059d827a66708cb37a79/Shopfront-Lifestyle-UI-2.png" data-mid="231538892" border="0" src="https://freight.cargo.site/w/1000/i/89fb9b1b2fb2cbac363ad16613301b4840ab8b41b687059d827a66708cb37a79/Shopfront-Lifestyle-UI-2.png" /> Hubbl HubDid you know, Australians spend an average of 48 minutes per day searching for something to watch? Hubbl Hub is a smart device that instantly upgrades your TV and streaming experience.Read more --&gt; More 2025 projects coming soon! https://matthewtsang.design/Archives-link Sun, 05 Feb 2023 06:21:55 +0000 Matthew Tsang https://matthewtsang.design/Archives-link MORE WORKS Visit the Archives&nbsp;︎︎︎ https://matthewtsang.design/Begyn Tue, 06 Dec 2022 12:22:17 +0000 Matthew Tsang https://matthewtsang.design/Begyn Begyn <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/edaf39fa1571e2d274be74e729c27177f50414648002fa1c6fcdb812fce63374/Begyn-cover.png" data-mid="161130579" border="0" src="https://freight.cargo.site/w/1000/i/edaf39fa1571e2d274be74e729c27177f50414648002fa1c6fcdb812fce63374/Begyn-cover.png" /> RoleUX Designer &amp; Consultant (group project) TimelineJune-July 2021 SkillsUX User story mapping Information architecture ToolsFigma &amp; FigJam Begyn is an online platform that helps parents find trusted private tutors for their children, to help them get ahead in class. Together in a group of four, I designed a learning dashboard for Begyn, where parents could track their child’s learning progress over time as well as enabling tutors to manage their students. Through this project, I was introduced to the processes of user story mapping and information architecture for the first time. This provided us with a framework for ensuring our designs could feasibly be developed, which helped to prioritise our design decisions. The Brief Based on customer interviews conducted by Begyn, it was discovered that parents did not have visibility of their child’s progress when a tutoring session had been completed. Specifically, most parents were unaware of what topics were being taught during each lesson, how it relates to the school curriculum, what homework the parent needs to support the child with, and more importantly, whether or not their child was learning successfully. These factors made it difficult to judge the value and effectiveness of private tutoring. The challenge for us was therefore to design a method that would increase visibility of a child’s tutoring progress over their lifetime on the Begyn platform. <img width="1936" height="830" width_o="1936" height_o="830" data-src="https://freight.cargo.site/t/original/i/59794c3e9df7a503595c35045fb3a7e0df02fbef55ffc9fc621c881e33c6b38e/Screen-Shot-2021-09-01-at-4.19.33-pm.png" data-mid="161130580" border="0" data-scale="90" src="https://freight.cargo.site/w/1000/i/59794c3e9df7a503595c35045fb3a7e0df02fbef55ffc9fc621c881e33c6b38e/Screen-Shot-2021-09-01-at-4.19.33-pm.png" /> Design Process We began our design process by conducting a competitor analysis of websites including Tutorfinder, Highschooltutors, Gumtree and Airtasker, where parents could seek out tutors within their local area. We found that no other platform had a learning dashboard feature which would establish a point of difference for Begyn. <img width="1978" height="688" width_o="1978" height_o="688" data-src="https://freight.cargo.site/t/original/i/29bcedc7d8b1d82251bd46e93579040d4c5745fb4664f3c3ff07bdfe13c3394a/Screen-Shot-2021-09-01-at-4.19.45-pm.png" data-mid="161130581" border="0" data-scale="94" src="https://freight.cargo.site/w/1000/i/29bcedc7d8b1d82251bd46e93579040d4c5745fb4664f3c3ff07bdfe13c3394a/Screen-Shot-2021-09-01-at-4.19.45-pm.png" /> Next, we developed personas for year 3, 4, and 11 parents as well as a tutor. We chose these specific year groups to align with the OC, Selective and HSC exams which are the main reasons why students seek out tutoring. <img width="3668" height="2735" width_o="3668" height_o="2735" data-src="https://freight.cargo.site/t/original/i/f879fb0962e24bae848e2bf1cd3b4f5e3dd904b09df431496b97816961a1af05/Frame-17.png" data-mid="161130582" border="0" src="https://freight.cargo.site/w/1000/i/f879fb0962e24bae848e2bf1cd3b4f5e3dd904b09df431496b97816961a1af05/Frame-17.png" /> Based on these personas, we consolidated our main design goals and established our story map and information architecture to form the basis of our designs. <img width="1918" height="634" width_o="1918" height_o="634" data-src="https://freight.cargo.site/t/original/i/085f5692be73b8e8522a6df84003b79132622782407fbda48d67fc46e9dbbd16/Screen-Shot-2021-09-01-at-5.23.06-pm.png" data-mid="161130583" border="0" data-scale="95" src="https://freight.cargo.site/w/1000/i/085f5692be73b8e8522a6df84003b79132622782407fbda48d67fc46e9dbbd16/Screen-Shot-2021-09-01-at-5.23.06-pm.png" /> <img width="2246" height="1158" width_o="2246" height_o="1158" data-src="https://freight.cargo.site/t/original/i/2215919011838daeb539b1c0800498a8b4f7694803d100defa0e0e22a95a2b9b/Screen-Shot-2021-09-01-at-5.23.38-pm.png" data-mid="161130584" border="0" src="https://freight.cargo.site/w/1000/i/2215919011838daeb539b1c0800498a8b4f7694803d100defa0e0e22a95a2b9b/Screen-Shot-2021-09-01-at-5.23.38-pm.png" /> <img width="1852" height="1132" width_o="1852" height_o="1132" data-src="https://freight.cargo.site/t/original/i/8b9768615b78d59756e17fc567d430bec4aaeeee10101c1b46a3454d48efdc6b/Screen-Shot-2021-09-01-at-5.23.52-pm.png" data-mid="161130585" border="0" src="https://freight.cargo.site/w/1000/i/8b9768615b78d59756e17fc567d430bec4aaeeee10101c1b46a3454d48efdc6b/Screen-Shot-2021-09-01-at-5.23.52-pm.png" /> <img width="2368" height="1130" width_o="2368" height_o="1130" data-src="https://freight.cargo.site/t/original/i/86e8b68f5810352ca2230bc112fd7c8ec1c454383ec82ed87ebb9f4c3fb8a925/Screen-Shot-2021-09-01-at-5.24.04-pm.png" data-mid="161130586" border="0" src="https://freight.cargo.site/w/1000/i/86e8b68f5810352ca2230bc112fd7c8ec1c454383ec82ed87ebb9f4c3fb8a925/Screen-Shot-2021-09-01-at-5.24.04-pm.png" /> Prototyping Based on the decided metrics, we each designed our own version of what we envisaged the learning dashboard to look like. My first iteration is shown below. <img width="3344" height="1188" width_o="3344" height_o="1188" data-src="https://freight.cargo.site/t/original/i/836eb86984e2e2cc913c068de742ed7e8c6b364d8061d2a870fdc93ea786a0c8/Frame-33.png" data-mid="161130587" border="0" src="https://freight.cargo.site/w/1000/i/836eb86984e2e2cc913c068de742ed7e8c6b364d8061d2a870fdc93ea786a0c8/Frame-33.png" /> We then combined the best aspects from our four designs to create the next iteration. One of the main changes was reverting the menu bar back to the top of the page, to better suit the conventions of the desktop site. Vertical scrolling and other touch-based features were also removed. <img width="3344" height="2043" width_o="3344" height_o="2043" data-src="https://freight.cargo.site/t/original/i/1ed37e73914df0f8b59a4dd219c4d181c36bce6bab4ab79b4ea8debf534fbb43/Frame-34.png" data-mid="161130588" border="0" src="https://freight.cargo.site/w/1000/i/1ed37e73914df0f8b59a4dd219c4d181c36bce6bab4ab79b4ea8debf534fbb43/Frame-34.png" /> Following feedback from the client, we changed the colour palate to be more muted. Instead of each subject having a unique colour and image associated with it, the subject colour coding is now determined based on its order in the dashboard, so that the first subject will always be blue, aligning with Begyn’s brand colour. We also iterated on the charts used to summarise a student’s learning progress on the main page of the dashboard.<img width="3344" height="2869" width_o="3344" height_o="2869" data-src="https://freight.cargo.site/t/original/i/473ac9e95856e08cbf2870e4c181091196b81410c53634a9fac636bbcc69ae7f/Frame-35.png" data-mid="161130589" border="0" src="https://freight.cargo.site/w/1000/i/473ac9e95856e08cbf2870e4c181091196b81410c53634a9fac636bbcc69ae7f/Frame-35.png" /> Key Learnings This project was an eye-opener for me and highlighted the importance of considering the architecture behind the product and keeping your designs within the framework of what can feasibly be developed. For example, deciding whether or not moving the menu bar to the side would be worth the effort required for the developer to make that change. Typically, my projects are all concepts that exist solely within a Figma prototype, so I rarely had to think of these considerations in the past. Overall, I really enjoyed working on this project and seeing the design process come to fruition. Other Projects <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/0a9227ecaf42258ab7c29f0f571ad2bbf7581f47422dd80695237d6ad8c1d2c5/Queany-classroom.png" data-mid="161130590" border="0" src="https://freight.cargo.site/w/1000/i/0a9227ecaf42258ab7c29f0f571ad2bbf7581f47422dd80695237d6ad8c1d2c5/Queany-classroom.png" /> Queany the Quokka <img width="1600" height="900" width_o="1600" height_o="900" data-src="https://freight.cargo.site/t/original/i/34e2f4eb4d157129f62b96b58b4ffcfe5b16a7792415b88ec1ff1ded6e2cfa6f/Podblogger-cover-1600x900.png" data-mid="161130555" border="0" src="https://freight.cargo.site/w/1000/i/34e2f4eb4d157129f62b96b58b4ffcfe5b16a7792415b88ec1ff1ded6e2cfa6f/Podblogger-cover-1600x900.png" />Podblogger <img width="1600" height="900" width_o="1600" height_o="900" data-src="https://freight.cargo.site/t/original/i/1d8147f92536d37127057b2120739333f37b451d864e9733dc75a62dd3c90b4b/Guidebook-cover-1600x900.png" data-mid="161130554" border="0" src="https://freight.cargo.site/w/1000/i/1d8147f92536d37127057b2120739333f37b451d864e9733dc75a62dd3c90b4b/Guidebook-cover-1600x900.png" /> Guidebooks <img width="1600" height="900" width_o="1600" height_o="900" data-src="https://freight.cargo.site/t/original/i/a7014a14bd439d92bc3cf52e035b5d7b7bb2545fb84f57bd26027c2ba6a3eb0a/4U-cover-1600x900.png" data-mid="161130558" border="0" src="https://freight.cargo.site/w/1000/i/a7014a14bd439d92bc3cf52e035b5d7b7bb2545fb84f57bd26027c2ba6a3eb0a/4U-cover-1600x900.png" />The 4U Paper https://matthewtsang.design/Queany-the-Quokka Tue, 06 Dec 2022 12:22:20 +0000 Matthew Tsang https://matthewtsang.design/Queany-the-Quokka Queany the Quokka <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/cac9590406c4138b84d06d5176481fda8ca9f77887db497de3aa1b3a83bb3157/giffycanvas.gif" data-mid="161130618" border="0" src="https://freight.cargo.site/w/1000/i/cac9590406c4138b84d06d5176481fda8ca9f77887db497de3aa1b3a83bb3157/giffycanvas.gif" /> RoleUX Designer (group project) TimelineApril-May 2021 SkillsUX User research and testing ToolsFigma COVID-19 has changed the way we live and work, with public health measures such as social distancing and contact tracing becoming an ingrained part of our daily lives. The pandemic has also had a particularly unique impact on children, with online learning and unfamiliar routines posing challenges to mental and physical health. In a group of five, we decided to tackle this significant problem space, with the goal of not only encouraging the current COVID-19 health measures, but extending that to encompass a holistic program that promotes greater public health and hygiene awareness in children. The Brief This assignment was split into two parts. In Part A, I individually researched and designed an app called Quincy the Quokka that would encourage children to practice good hygiene at school. In Part B, we renamed this to Queany the Quokka and combined different components of our individual solutions to form a group outcome which we then tested with primary school children.We decided to define our problem space to centre around the classroom, as this is the focal point of all activity and interactions within the school environment. Despite good behaviour from some, not all students are practicing appropriate hygiene habits which poses a health concern to other students and teachers. <img width="1220" height="288" width_o="1220" height_o="288" data-src="https://freight.cargo.site/t/original/i/f2e870531dbd23dd31a5bc3d074c66e8a3cd6aaa9ab7ae63d936791cb76a8f96/Screen-Shot-2021-09-05-at-5.17.10-pm.png" data-mid="161130620" border="0" data-scale="84" src="https://freight.cargo.site/w/1000/i/f2e870531dbd23dd31a5bc3d074c66e8a3cd6aaa9ab7ae63d936791cb76a8f96/Screen-Shot-2021-09-05-at-5.17.10-pm.png" /> Design Process – Part A (Individual) The first step of the design process was to develop user personas and storyboards for both a Kindergarten student and their teacher. <img width="1062" height="1508" width_o="1062" height_o="1508" data-src="https://freight.cargo.site/t/original/i/24c689ad06c3b29349ffc645b29c3090c655bfef2bf39a4b8d04fb47a096e71a/Screen-Shot-2021-09-05-at-4.59.37-pm.png" data-mid="161130621" border="0" src="https://freight.cargo.site/w/1000/i/24c689ad06c3b29349ffc645b29c3090c655bfef2bf39a4b8d04fb47a096e71a/Screen-Shot-2021-09-05-at-4.59.37-pm.png" /> <img width="1062" height="1508" width_o="1062" height_o="1508" data-src="https://freight.cargo.site/t/original/i/0427e651e3c996ed26a409affa21bc62240dd00f89061fef0161482910b656bc/Screen-Shot-2021-09-05-at-4.59.40-pm.png" data-mid="161130622" border="0" src="https://freight.cargo.site/w/1000/i/0427e651e3c996ed26a409affa21bc62240dd00f89061fef0161482910b656bc/Screen-Shot-2021-09-05-at-4.59.40-pm.png" /> These personas were then used to summarise the key characteristics of the two user groups. Further research was then conduced through surveys with primary school children and teachers. <img width="1062" height="1508" width_o="1062" height_o="1508" data-src="https://freight.cargo.site/t/original/i/5aeb3b198554324455090a10e4a3f8df58303904dfe1037aadea01e7accbd62d/Screen-Shot-2021-09-05-at-4.59.44-pm.png" data-mid="161130623" border="0" src="https://freight.cargo.site/w/1000/i/5aeb3b198554324455090a10e4a3f8df58303904dfe1037aadea01e7accbd62d/Screen-Shot-2021-09-05-at-4.59.44-pm.png" /> <img width="1062" height="1508" width_o="1062" height_o="1508" data-src="https://freight.cargo.site/t/original/i/7a9894e6ea3cc794769260a52e5d311296ae413abba5a044cc57e07a507ab745/Screen-Shot-2021-09-05-at-4.59.47-pm.png" data-mid="161130624" border="0" src="https://freight.cargo.site/w/1000/i/7a9894e6ea3cc794769260a52e5d311296ae413abba5a044cc57e07a507ab745/Screen-Shot-2021-09-05-at-4.59.47-pm.png" /> Designing for children also required a number of cognitive considerations to best support children’s cognitive development at different stages: Give children clear and specific instructions by stating the goal and how to achieve it. Instructions should be tailored to their level of understanding. Use existing mental models and knowledge about the world. Reduce cognitive load by designing self-explanatory interfaces and preventing errors. Instructions should be clear and specific, but not too prescriptive. Based on the research into critical theories and precedents, a number of hypotheses can be made regarding the design solution. <img width="1644" height="504" width_o="1644" height_o="504" data-src="https://freight.cargo.site/t/original/i/393ef6b30807f80ac12f30429be24b90e3891f841678e5d4d0b1a6e10f608f21/Screen-Shot-2021-09-06-at-4.56.52-pm.png" data-mid="161130625" border="0" data-scale="84" src="https://freight.cargo.site/w/1000/i/393ef6b30807f80ac12f30429be24b90e3891f841678e5d4d0b1a6e10f608f21/Screen-Shot-2021-09-06-at-4.56.52-pm.png" /> I decided to address the problem space from the direction of two broad design ideas – one that is digital and one that is physical. A digital assistant would be displayed on the classroom SMART board or projector screen, and a physical component such as a soft toy would make it easier for students to interact with it. The group chose to use a quokka as our main character, which I illustrated in Figma. <img width="1246" height="554" width_o="1246" height_o="554" data-src="https://freight.cargo.site/t/original/i/4f229e70ae0f5d888938a60815518201fec04eb5d62b3a20e457f6bae7c9722e/Screen-Shot-2021-09-06-at-5.04.13-pm.png" data-mid="161130626" border="0" data-scale="81" src="https://freight.cargo.site/w/1000/i/4f229e70ae0f5d888938a60815518201fec04eb5d62b3a20e457f6bae7c9722e/Screen-Shot-2021-09-06-at-5.04.13-pm.png" /><img width="1590" height="878" width_o="1590" height_o="878" data-src="https://freight.cargo.site/t/original/i/906df53cfc336816be37e9fe8ed2e8ee2211113dc9de8f183a8a4a9282c42c25/Screen-Shot-2021-09-06-at-5.04.37-pm.png" data-mid="161130627" border="0" src="https://freight.cargo.site/w/1000/i/906df53cfc336816be37e9fe8ed2e8ee2211113dc9de8f183a8a4a9282c42c25/Screen-Shot-2021-09-06-at-5.04.37-pm.png" /> Quincy sits in the corner of the SMART board screen and gives contextual reminders about handwashing and other hygiene measures. <img width="1200" height="750" width_o="1200" height_o="750" data-src="https://freight.cargo.site/t/original/i/84af6aafe1e968e218c258e7c70bcfc47b13b603f52d1262c65fe4fde6d78a89/Frame-14.png" data-mid="161130628" border="0" src="https://freight.cargo.site/w/1000/i/84af6aafe1e968e218c258e7c70bcfc47b13b603f52d1262c65fe4fde6d78a89/Frame-14.png" /> I also wanted to refer to Piaget’s Development Theory and the notion that children learn better with colours and symbols. In this case, I’ve added a blue top hat and some stars next to Quincy. It’s hoped that children will recognise that Quincy is wearing the blue hat and mentally associate that with a reminder for handwashing. <img width="1200" height="750" width_o="1200" height_o="750" data-src="https://freight.cargo.site/t/original/i/cca64bff6c1124f498a20ed2ffb480a08d8e4719baef297f58d10c45668206f2/Frame-16.png" data-mid="161130629" border="0" src="https://freight.cargo.site/w/1000/i/cca64bff6c1124f498a20ed2ffb480a08d8e4719baef297f58d10c45668206f2/Frame-16.png" /> <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/0a9227ecaf42258ab7c29f0f571ad2bbf7581f47422dd80695237d6ad8c1d2c5/Queany-classroom.png" data-mid="161130631" border="0" src="https://freight.cargo.site/w/1000/i/0a9227ecaf42258ab7c29f0f571ad2bbf7581f47422dd80695237d6ad8c1d2c5/Queany-classroom.png" /> <img width="1486" height="642" width_o="1486" height_o="642" data-src="https://freight.cargo.site/t/original/i/8c1cd0bcb0d1a368f5722250f03c387bcad553ddc0fc5591e40517e131dc4521/Screen-Shot-2021-09-06-at-5.12.34-pm.png" data-mid="161130630" border="0" src="https://freight.cargo.site/w/1000/i/8c1cd0bcb0d1a368f5722250f03c387bcad553ddc0fc5591e40517e131dc4521/Screen-Shot-2021-09-06-at-5.12.34-pm.png" /> Design Process – Part B (Group) In Part B, the group combined different components of our individual solutions to form a group outcome. We kept the character and visual style of my original app, and merged it with the name and content of other group members. My main role in the group was to continue iterating on the UX side, while others focused on user testing and presentation aspects. Our first group iteration was focused on an iPad app for students. A simple menu screen displays three lessons and games, including a handwashing game, a food hygiene game and a clean classrooms game. Throughout the app, we took care to use bright colours and large text to keep the affordances clear for students. <img width="2076" height="1504" width_o="2076" height_o="1504" data-src="https://freight.cargo.site/t/original/i/0d177ac6b1bf3e75645adf8bcea8d66dff4c5a7266cf03daa04dc3f1f65567d0/iPad-Pro-11-inch-Mockup-1.png" data-mid="161130632" border="0" data-scale="77" src="https://freight.cargo.site/w/1000/i/0d177ac6b1bf3e75645adf8bcea8d66dff4c5a7266cf03daa04dc3f1f65567d0/iPad-Pro-11-inch-Mockup-1.png" /> We conducted the first iteration of user testing online with two primary school students, one student in grade 6 and the other in grade 1. For our observational study, the students were given links to access the prototypes and freely played through the app with limited guidance. In between each feature of the app, we sought qualitative and quantitative feedback from the students for improvement, then an informal interview afterwards. Note: The students’ image below has been blurred for privacy. <img width="2164" height="1018" width_o="2164" height_o="1018" data-src="https://freight.cargo.site/t/original/i/0ea6dbff56b10753d4c8beaa52b0eb00ec9dbd017ac1f5d96a9aead94a51ca71/Frame-36.png" data-mid="161130633" border="0" src="https://freight.cargo.site/w/1000/i/0ea6dbff56b10753d4c8beaa52b0eb00ec9dbd017ac1f5d96a9aead94a51ca71/Frame-36.png" /> <img width="2270" height="864" width_o="2270" height_o="864" data-src="https://freight.cargo.site/t/original/i/50690b4b740bc547229c1d3ce7f409ddc71489f98077eba1142028eb30c2b0d4/Screen-Shot-2021-09-06-at-6.22.50-pm.png" data-mid="161130634" border="0" src="https://freight.cargo.site/w/1000/i/50690b4b740bc547229c1d3ce7f409ddc71489f98077eba1142028eb30c2b0d4/Screen-Shot-2021-09-06-at-6.22.50-pm.png" /> Drawing on this feedback, we made minor changes to our second iteration. <img width="2076" height="1504" width_o="2076" height_o="1504" data-src="https://freight.cargo.site/t/original/i/2823f118f9641cce5f166fae8846c0d4123c77ffd8db3eb7cbdca130a8202da7/iPad-Pro-11-inch-Mockup-2.png" data-mid="161130635" border="0" src="https://freight.cargo.site/w/1000/i/2823f118f9641cce5f166fae8846c0d4123c77ffd8db3eb7cbdca130a8202da7/iPad-Pro-11-inch-Mockup-2.png" /> <img width="2076" height="1504" width_o="2076" height_o="1504" data-src="https://freight.cargo.site/t/original/i/fd3204d43223cf79cfa124d41f7eb358cb20dd3f314db6b623243d119ac6fcf5/iPad-Pro-11-inch-Mockup-1.png" data-mid="161130636" border="0" src="https://freight.cargo.site/w/1000/i/fd3204d43223cf79cfa124d41f7eb358cb20dd3f314db6b623243d119ac6fcf5/iPad-Pro-11-inch-Mockup-1.png" /> <img width="2076" height="1504" width_o="2076" height_o="1504" data-src="https://freight.cargo.site/t/original/i/6ba24e7ab484f0eb773775388c192a1bc07f6433958024261fc8c1102d32c646/iPad-Pro-11-inch-Mockup.png" data-mid="161130637" border="0" src="https://freight.cargo.site/w/1000/i/6ba24e7ab484f0eb773775388c192a1bc07f6433958024261fc8c1102d32c646/iPad-Pro-11-inch-Mockup.png" /> Unfortunately, there were a number of student feedback that we didn’t implement, the first being the lack of recognition over what a quokka is. We felt that this provided an opportunity to inform students about an animal they hadn’t heard of before and many described the quokka as being “cute” so we decided not to change it. Students also requested more games, which is something that we’d definitely implement but just didn’t have the chance within the time frame of this assignment. Key Learnings Overall, our user research, prototyping, and iteration of our interactive and educational app have shown that our design solution will educate and encourage students on the importance of health and personal hygiene, therefore successfully addressing our problem space and hypotheses. It was an exciting experience to design an app targeted at children and learn about the different techniques and requirements invovled. Although my role did not involve directly talking to primary school students, it was nevertheless rewarding to see the students’ positive feedback towards my designs. Other Projects <img width="1600" height="900" width_o="1600" height_o="900" data-src="https://freight.cargo.site/t/original/i/34e2f4eb4d157129f62b96b58b4ffcfe5b16a7792415b88ec1ff1ded6e2cfa6f/Podblogger-cover-1600x900.png" data-mid="161130593" border="0" src="https://freight.cargo.site/w/1000/i/34e2f4eb4d157129f62b96b58b4ffcfe5b16a7792415b88ec1ff1ded6e2cfa6f/Podblogger-cover-1600x900.png" /> Podblogger <img width="1600" height="900" width_o="1600" height_o="900" data-src="https://freight.cargo.site/t/original/i/d69c8574f1acdb5c9594f86ee8f1a7d40a3d522df2e2d025b1f94caafcc1dfd2/Artbox-cover-1600x900.png" data-mid="161130595" border="0" src="https://freight.cargo.site/w/1000/i/d69c8574f1acdb5c9594f86ee8f1a7d40a3d522df2e2d025b1f94caafcc1dfd2/Artbox-cover-1600x900.png" />Artbox <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/edaf39fa1571e2d274be74e729c27177f50414648002fa1c6fcdb812fce63374/Begyn-cover.png" data-mid="161130617" border="0" src="https://freight.cargo.site/w/1000/i/edaf39fa1571e2d274be74e729c27177f50414648002fa1c6fcdb812fce63374/Begyn-cover.png" /> Begyn <img width="1600" height="900" width_o="1600" height_o="900" data-src="https://freight.cargo.site/t/original/i/1d8147f92536d37127057b2120739333f37b451d864e9733dc75a62dd3c90b4b/Guidebook-cover-1600x900.png" data-mid="161130592" border="0" src="https://freight.cargo.site/w/1000/i/1d8147f92536d37127057b2120739333f37b451d864e9733dc75a62dd3c90b4b/Guidebook-cover-1600x900.png" />Guidebooks https://matthewtsang.design/Podblogger Tue, 06 Dec 2022 12:22:23 +0000 Matthew Tsang https://matthewtsang.design/Podblogger Podblogger <img width="1600" height="900" width_o="1600" height_o="900" data-src="https://freight.cargo.site/t/original/i/34e2f4eb4d157129f62b96b58b4ffcfe5b16a7792415b88ec1ff1ded6e2cfa6f/Podblogger-cover-1600x900.png" data-mid="161130640" border="0" src="https://freight.cargo.site/w/1000/i/34e2f4eb4d157129f62b96b58b4ffcfe5b16a7792415b88ec1ff1ded6e2cfa6f/Podblogger-cover-1600x900.png" /> RoleDesigner (individual project) TimelineJuly-August 2020 SkillsUX User research ToolsFigma For my first interaction design assessment at university, I designed a podcast app called Podblogger, that combines the functionality of podcast consumption, creation and purchasing equipment into one app. This assessment was also the first time that I had used Figma to create wireframes and prototypes, and I was also introduced to UX concepts such as affordances and heuristics.Note: To avoid any copyright issues, all podcast cover artwork have been removed from the screenshots shown. <img width="800" height="450" width_o="800" height_o="450" data-src="https://freight.cargo.site/t/original/i/9dfd62fc36640a9f2c4345ed5615ae223bb051392ead1d2feed251ba7a37f61b/ezgif-3-a06a83ef4489.gif" data-mid="161130641" border="0" src="https://freight.cargo.site/w/800/i/9dfd62fc36640a9f2c4345ed5615ae223bb051392ead1d2feed251ba7a37f61b/ezgif-3-a06a83ef4489.gif" /> The Brief Podcasts continue to be a growing area, yet the process of creating and discovering new podcasts can be difficult. I began the project by researching some statistics and interviewing users about their experiences with podcasts. <img width="1892" height="408" width_o="1892" height_o="408" data-src="https://freight.cargo.site/t/original/i/48ac442068f969976ab22f8d5c0781e766eb4b2b0daf22e39b9092276c40292d/Screen-Shot-2020-12-07-at-5.32.32-pm.png" data-mid="161130652" border="0" data-scale="89" src="https://freight.cargo.site/w/1000/i/48ac442068f969976ab22f8d5c0781e766eb4b2b0daf22e39b9092276c40292d/Screen-Shot-2020-12-07-at-5.32.32-pm.png" /> Creating podcasts requires additional audio recording and editing software, which often has a steep learning curve. A podcast hosting and publishing platform must also be used to enter the podcast details and distribute the episode. Additional audio equipment such as microphones, can also be purchased to enhance the quality of the podcast. My design concept for Podblogger is a mashup of these components, aggregating features for podcast consumption, creation and equipment. Podblogger is your one stop shop for podcasts. <img width="1752" height="852" width_o="1752" height_o="852" data-src="https://freight.cargo.site/t/original/i/3e8b02fb709758eb84badacb38776d56bd8053c72371e1dd66f8e9a464f696a0/Screen-Shot-2020-12-08-at-2.17.10-pm.png" data-mid="161130653" border="0" data-scale="87" src="https://freight.cargo.site/w/1000/i/3e8b02fb709758eb84badacb38776d56bd8053c72371e1dd66f8e9a464f696a0/Screen-Shot-2020-12-08-at-2.17.10-pm.png" /> Design Process Two different personas were created for this task - someone who wants to discover new podcasts and someone wishing to create podcasts. From this, two clear goals were created:Improving visual engagement with podcastsEnhancing podcast quality for creators <img width="2134" height="1194" width_o="2134" height_o="1194" data-src="https://freight.cargo.site/t/original/i/8832e48a74e901beafac6451f413c967f6abe15cb2a2de5f522930bbbb1c9a30/Screen-Shot-2020-12-08-at-2.37.18-pm.png" data-mid="161130654" border="0" data-scale="89" src="https://freight.cargo.site/w/1000/i/8832e48a74e901beafac6451f413c967f6abe15cb2a2de5f522930bbbb1c9a30/Screen-Shot-2020-12-08-at-2.37.18-pm.png" /><img width="2134" height="1198" width_o="2134" height_o="1198" data-src="https://freight.cargo.site/t/original/i/ba512e35fbcdde39cf6f42702845b44d4381dfe1946fcbbbca763cfd05a3c6cd/Screen-Shot-2020-12-08-at-2.37.28-pm.png" data-mid="161130655" border="0" data-scale="89" src="https://freight.cargo.site/w/1000/i/ba512e35fbcdde39cf6f42702845b44d4381dfe1946fcbbbca763cfd05a3c6cd/Screen-Shot-2020-12-08-at-2.37.28-pm.png" /> User journeys and flows were then created for both scenarios, followed by a rigourous process of iteration. <img width="1854" height="854" width_o="1854" height_o="854" data-src="https://freight.cargo.site/t/original/i/5f3fca525092c94ca45ce3616ae14b915e516e7e81ff3334c66fcde171fa7243/Screen-Shot-2020-12-08-at-2.58.56-pm.png" data-mid="161130656" border="0" data-scale="85" src="https://freight.cargo.site/w/1000/i/5f3fca525092c94ca45ce3616ae14b915e516e7e81ff3334c66fcde171fa7243/Screen-Shot-2020-12-08-at-2.58.56-pm.png" /> <img width="2022" height="710" width_o="2022" height_o="710" data-src="https://freight.cargo.site/t/original/i/2346bb7d79cce2c7d4a9935a309639d8a9bebefd5c222816ce35edeac6b58f2d/Screen-Shot-2020-12-08-at-2.59.09-pm.png" data-mid="161130657" border="0" data-scale="85" src="https://freight.cargo.site/w/1000/i/2346bb7d79cce2c7d4a9935a309639d8a9bebefd5c222816ce35edeac6b58f2d/Screen-Shot-2020-12-08-at-2.59.09-pm.png" /> Feedback from each iteration was taken into consideration to ultimately improve each design. <img width="1804" height="936" width_o="1804" height_o="936" data-src="https://freight.cargo.site/t/original/i/60143a96699631741e85959d0f2ec28b30c7d66249903b344778f8f0705fe2ca/Screen-Shot-2020-12-08-at-2.59.28-pm.png" data-mid="161130658" border="0" src="https://freight.cargo.site/w/1000/i/60143a96699631741e85959d0f2ec28b30c7d66249903b344778f8f0705fe2ca/Screen-Shot-2020-12-08-at-2.59.28-pm.png" /> <img width="2010" height="962" width_o="2010" height_o="962" data-src="https://freight.cargo.site/t/original/i/2f964023e78345ce04fd923da5689cfd66b42d8481f5d8d185d2bd34fce2c4ac/Screen-Shot-2020-12-08-at-4.11.03-pm.png" data-mid="161130659" border="0" src="https://freight.cargo.site/w/1000/i/2f964023e78345ce04fd923da5689cfd66b42d8481f5d8d185d2bd34fce2c4ac/Screen-Shot-2020-12-08-at-4.11.03-pm.png" /> <img width="2002" height="950" width_o="2002" height_o="950" data-src="https://freight.cargo.site/t/original/i/9d1d6ecd8fda9d50a9914eaff13643fce83216c6a1c9b3a0591177156b1f8304/Screen-Shot-2020-12-08-at-4.11.20-pm.png" data-mid="161130660" border="0" src="https://freight.cargo.site/w/1000/i/9d1d6ecd8fda9d50a9914eaff13643fce83216c6a1c9b3a0591177156b1f8304/Screen-Shot-2020-12-08-at-4.11.20-pm.png" /> <img width="2022" height="950" width_o="2022" height_o="950" data-src="https://freight.cargo.site/t/original/i/38c9617e0bd6128f90d211fbd0fa87047c9708e13a18cd5400131d4d72df803c/Screen-Shot-2020-12-08-at-4.11.37-pm.png" data-mid="161130661" border="0" src="https://freight.cargo.site/w/1000/i/38c9617e0bd6128f90d211fbd0fa87047c9708e13a18cd5400131d4d72df803c/Screen-Shot-2020-12-08-at-4.11.37-pm.png" /> <img width="2006" height="952" width_o="2006" height_o="952" data-src="https://freight.cargo.site/t/original/i/b34bd5b10e7e83155229d57facd458ee14f6d4439e675ba6847d448aaed4d2c2/Screen-Shot-2020-12-08-at-4.11.48-pm.png" data-mid="161130662" border="0" src="https://freight.cargo.site/w/1000/i/b34bd5b10e7e83155229d57facd458ee14f6d4439e675ba6847d448aaed4d2c2/Screen-Shot-2020-12-08-at-4.11.48-pm.png" /> <img width="2020" height="952" width_o="2020" height_o="952" data-src="https://freight.cargo.site/t/original/i/3e361421a770714888a0cfb68b16f46dbcdf09e92b20f7e30e359960f147ed26/Screen-Shot-2020-12-08-at-4.12.00-pm.png" data-mid="161130663" border="0" src="https://freight.cargo.site/w/1000/i/3e361421a770714888a0cfb68b16f46dbcdf09e92b20f7e30e359960f147ed26/Screen-Shot-2020-12-08-at-4.12.00-pm.png" /> Other Projects <img width="1600" height="900" width_o="1600" height_o="900" data-src="https://freight.cargo.site/t/original/i/d69c8574f1acdb5c9594f86ee8f1a7d40a3d522df2e2d025b1f94caafcc1dfd2/Artbox-cover-1600x900.png" data-mid="161130642" border="0" src="https://freight.cargo.site/w/1000/i/d69c8574f1acdb5c9594f86ee8f1a7d40a3d522df2e2d025b1f94caafcc1dfd2/Artbox-cover-1600x900.png" /> Artbox <img width="800" height="450" width_o="800" height_o="450" data-src="https://freight.cargo.site/t/original/i/61f450d293a41247e1559b2642723a9661f8b5b035b220effa8c5b783a2e8610/ezgif-6-dbef7aeeb119.gif" data-mid="161130638" border="0" src="https://freight.cargo.site/w/800/i/61f450d293a41247e1559b2642723a9661f8b5b035b220effa8c5b783a2e8610/ezgif-6-dbef7aeeb119.gif" />UPSTARTS <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/0a9227ecaf42258ab7c29f0f571ad2bbf7581f47422dd80695237d6ad8c1d2c5/Queany-classroom.png" data-mid="161130664" border="0" src="https://freight.cargo.site/w/1000/i/0a9227ecaf42258ab7c29f0f571ad2bbf7581f47422dd80695237d6ad8c1d2c5/Queany-classroom.png" /> Queany the Quokka <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/edaf39fa1571e2d274be74e729c27177f50414648002fa1c6fcdb812fce63374/Begyn-cover.png" data-mid="161130665" border="0" src="https://freight.cargo.site/w/1000/i/edaf39fa1571e2d274be74e729c27177f50414648002fa1c6fcdb812fce63374/Begyn-cover.png" />Begyn https://matthewtsang.design/Artbox Tue, 06 Dec 2022 12:22:26 +0000 Matthew Tsang https://matthewtsang.design/Artbox Artbox <img width="800" height="451" width_o="800" height_o="451" data-src="https://freight.cargo.site/t/original/i/408a7ec7ae7bf654062ab3f5823f510d987f94982048f6bf6be9a99c0151cf9a/ezgif-6-230cbf7b8ed4.gif" data-mid="161130680" border="0" src="https://freight.cargo.site/w/800/i/408a7ec7ae7bf654062ab3f5823f510d987f94982048f6bf6be9a99c0151cf9a/ezgif-6-230cbf7b8ed4.gif" /> RoleDesigner and developer Timeline2019 SkillsUI App development ToolsXcode Artbox is an app that was created for my Year 12 Software Design &amp; Development major project, and utilises augmented reality and image recognition to display information about artworks. For this project I designed the functionality and layout of the app and programmed it using Swift and Xcode. Comprehensive documentation detailing the creation of the app also had to be produced, including diagrams, logbooks and Gantt charts. The Brief It is often difficult to view and interact with artworks around the school. Those that are visible can also be placed in busy corridors or hung high up, making it harder for people to view them. Artworks are also shown without any context and interested viewers are unable to find out the artist, year, and other contextual information. Artbox is a virtual art gallery app that is designed to provide a simple guide to the artworks around you. It utilises Apple ARKit to present an immersive augmented reality experience and display information in an interactive way.&nbsp;Artbox will detect and identify the artwork present, by matching its image and dimensions with a database of existing artworks that have been scanned and documented. Design Process <img width="2478" height="3508" width_o="2478" height_o="3508" data-src="https://freight.cargo.site/t/original/i/945a139d581c538899549c1109c06beb16df0c860226e2aa6629b9f15e7a4dd4/Storyboard-v1.jpeg" data-mid="161130681" border="0" data-scale="72" src="https://freight.cargo.site/w/1000/i/945a139d581c538899549c1109c06beb16df0c860226e2aa6629b9f15e7a4dd4/Storyboard-v1.jpeg" /> <img width="2478" height="3508" width_o="2478" height_o="3508" data-src="https://freight.cargo.site/t/original/i/22049654e0a89c82c37ab167c81a33cd30e9ddf8a6372da4341de0ea02a5f105/Screen-Design-1.jpeg" data-mid="161130682" border="0" src="https://freight.cargo.site/w/1000/i/22049654e0a89c82c37ab167c81a33cd30e9ddf8a6372da4341de0ea02a5f105/Screen-Design-1.jpeg" /> <img width="2478" height="3508" width_o="2478" height_o="3508" data-src="https://freight.cargo.site/t/original/i/8bd2450ce327aa64f0240fb95ba3ddee9765af92317f026711885eb4c7daf4a4/Screen-Design-5.jpeg" data-mid="161130683" border="0" src="https://freight.cargo.site/w/1000/i/8bd2450ce327aa64f0240fb95ba3ddee9765af92317f026711885eb4c7daf4a4/Screen-Design-5.jpeg" /> <img width="2478" height="3508" width_o="2478" height_o="3508" data-src="https://freight.cargo.site/t/original/i/212c14de3346d8271e41b12737981053f9a28c35719b036e50ea7349cb0e7767/Screen-Design-6.jpeg" data-mid="161130684" border="0" src="https://freight.cargo.site/w/1000/i/212c14de3346d8271e41b12737981053f9a28c35719b036e50ea7349cb0e7767/Screen-Design-6.jpeg" /> Initially, the app was divided into three sections: Explore, Tutorial and Settings, as seen in the storyboards above. As development progressed and the scope of the system was refined, I realised that a Settings page was unnecessary&nbsp;as offering settings to change would overcomplicate the functions of&nbsp;the app. The Explore page was brought onto the main screen and the Tutorial added as an onboarding screen which could later be accessed through an icon. This was my first major experience programming in Swift and using ARKit and Xcode, so I relied heavily on tutorials and guides online, particularly those on the Apple Developer website. Artworks were first scanned using the ARKit Scanner app and its corresponding information entered into Xcode. The screenshots below show the initial AR functionality. The pop-up box appears when the artwork is recognised and the phone also offers haptic feedback to confirm this detection. <img width="848" height="904" width_o="848" height_o="904" data-src="https://freight.cargo.site/t/original/i/d08651c33e2c38ae422333a07d0332388255ec22fab041860f2f3dfbe91b5123/Screen-Shot-2020-06-29-at-9.34.58-pm.png" data-mid="161130686" border="0" data-scale="70" src="https://freight.cargo.site/w/848/i/d08651c33e2c38ae422333a07d0332388255ec22fab041860f2f3dfbe91b5123/Screen-Shot-2020-06-29-at-9.34.58-pm.png" /> This layout was further refined, adding an image thumbnail to the pop-up box. The box also remains in the same position as the phone moves around, following typical AR affordances. <img width="810" height="866" width_o="810" height_o="866" data-src="https://freight.cargo.site/t/original/i/49ff986861a78937753d71977c8a26c65008afc99c1efd0016b8610af2274ac1/Screen-Shot-2020-06-29-at-9.33.57-pm.png" data-mid="161130685" border="0" data-scale="70" src="https://freight.cargo.site/w/810/i/49ff986861a78937753d71977c8a26c65008afc99c1efd0016b8610af2274ac1/Screen-Shot-2020-06-29-at-9.33.57-pm.png" /> The majority of the project involved constant problem solving in order to resolve issues in the AR functionality. Due to my limited programming experience, a lot of trial and error was involved and the quality of the code probably didn't meet industry standards. Only the seven artworks that I had scanned were able to be detected by the app, and the corresponding information was hard coded rather than in a database. The screenshots below show some of the development process in Xcode. <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/a5a1eda58c4f31a795bf7c7b25c9125df273372b6cc5600940171a0def0f33ef/Screen-Shot-2020-05-27-at-4.35.02-pm.png" data-mid="161130687" border="0" src="https://freight.cargo.site/w/1000/i/a5a1eda58c4f31a795bf7c7b25c9125df273372b6cc5600940171a0def0f33ef/Screen-Shot-2020-05-27-at-4.35.02-pm.png" /> <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/8d5b5165857bc153dffc9ecde6face053409e1e5ca26be66c75fe6440922c30d/Screen-Shot-2020-05-27-at-12.09.53-pm.png" data-mid="161130688" border="0" src="https://freight.cargo.site/w/1000/i/8d5b5165857bc153dffc9ecde6face053409e1e5ca26be66c75fe6440922c30d/Screen-Shot-2020-05-27-at-12.09.53-pm.png" /> <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/96218f5875241302110e016507d43cedfb361d43725478b8e04b49b1b3b545ca/Screen-Shot-2020-05-27-at-12.10.16-pm.png" data-mid="161130689" border="0" src="https://freight.cargo.site/w/1000/i/96218f5875241302110e016507d43cedfb361d43725478b8e04b49b1b3b545ca/Screen-Shot-2020-05-27-at-12.10.16-pm.png" /> <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/1f45d983c539f7558d66654ccfb62d745b087eefed7aba75c89808cd0da282a4/Screen-Shot-2020-05-27-at-12.11.23-pm.png" data-mid="161130690" border="0" src="https://freight.cargo.site/w/1000/i/1f45d983c539f7558d66654ccfb62d745b087eefed7aba75c89808cd0da282a4/Screen-Shot-2020-05-27-at-12.11.23-pm.png" /> Overall, the primary functionality of the app worked but various bugs still persisted. This assignment was a good opportunity to learn about programming in Swift and reaffirmed my passion for design rather than programming How it works <img width="2480" height="3508" width_o="2480" height_o="3508" data-src="https://freight.cargo.site/t/original/i/3ede6b2a5d3c8c38005043f6aaea74e3c1a8edefcdd33bc876164a64b9b28d2e/How-it-works2.png" data-mid="161130691" border="0" src="https://freight.cargo.site/w/1000/i/3ede6b2a5d3c8c38005043f6aaea74e3c1a8edefcdd33bc876164a64b9b28d2e/How-it-works2.png" /> <img width="2480" height="3508" width_o="2480" height_o="3508" data-src="https://freight.cargo.site/t/original/i/f4172c28101baeb715fdb6c2a1d110ea812a437a794196c773dc5a6f554e69a7/How-it-works3.png" data-mid="161130692" border="0" src="https://freight.cargo.site/w/1000/i/f4172c28101baeb715fdb6c2a1d110ea812a437a794196c773dc5a6f554e69a7/How-it-works3.png" /> <img width="2480" height="3508" width_o="2480" height_o="3508" data-src="https://freight.cargo.site/t/original/i/28cc33df5468a3551e381328c4f0291c72b1902138c443ec8263aa9f39e9c5dc/How-it-works4.png" data-mid="161130693" border="0" src="https://freight.cargo.site/w/1000/i/28cc33df5468a3551e381328c4f0291c72b1902138c443ec8263aa9f39e9c5dc/How-it-works4.png" /> <img width="2480" height="3508" width_o="2480" height_o="3508" data-src="https://freight.cargo.site/t/original/i/e79f13f1737c04addceda4e144673bf09f344a32f59af1408b37578ee0c522e6/How-it-works5.png" data-mid="161130694" border="0" src="https://freight.cargo.site/w/1000/i/e79f13f1737c04addceda4e144673bf09f344a32f59af1408b37578ee0c522e6/How-it-works5.png" /> <img width="2480" height="3508" width_o="2480" height_o="3508" data-src="https://freight.cargo.site/t/original/i/7e5b68ba6ee9f5d95af521bbca21cfbfa1b12fb9d5eca6527d8b2c2623bfc323/How-it-works6.png" data-mid="161130695" border="0" src="https://freight.cargo.site/w/1000/i/7e5b68ba6ee9f5d95af521bbca21cfbfa1b12fb9d5eca6527d8b2c2623bfc323/How-it-works6.png" /> <img width="2480" height="3508" width_o="2480" height_o="3508" data-src="https://freight.cargo.site/t/original/i/0d35838df8cf64a052761d284ec8b2d45cdb0af03c42bec37ce5688a0a65ba39/How-it-works7.png" data-mid="161130696" border="0" src="https://freight.cargo.site/w/1000/i/0d35838df8cf64a052761d284ec8b2d45cdb0af03c42bec37ce5688a0a65ba39/How-it-works7.png" /> <img width="810" height="338" width_o="810" height_o="338" data-src="https://freight.cargo.site/t/original/i/2048f7cdd187dafc9c70daab236788c5a1fac19f5d1a57af67240f456e3e00a2/Screen-Shot-2020-12-07-at-2.57.37-pm.png" data-mid="161130697" border="0" data-scale="47" src="https://freight.cargo.site/w/810/i/2048f7cdd187dafc9c70daab236788c5a1fac19f5d1a57af67240f456e3e00a2/Screen-Shot-2020-12-07-at-2.57.37-pm.png" /> Other Projects <img width="800" height="450" width_o="800" height_o="450" data-src="https://freight.cargo.site/t/original/i/61f450d293a41247e1559b2642723a9661f8b5b035b220effa8c5b783a2e8610/ezgif-6-dbef7aeeb119.gif" data-mid="161130666" border="0" src="https://freight.cargo.site/w/800/i/61f450d293a41247e1559b2642723a9661f8b5b035b220effa8c5b783a2e8610/ezgif-6-dbef7aeeb119.gif" /> UPSTARTS <img width="1600" height="900" width_o="1600" height_o="900" data-src="https://freight.cargo.site/t/original/i/90f2760eef62df1f060063f7a32e5d9791fbe0440002d7460185ee93f99bc984/Visions-cover-1600x900.png" data-mid="161130678" border="0" src="https://freight.cargo.site/w/1000/i/90f2760eef62df1f060063f7a32e5d9791fbe0440002d7460185ee93f99bc984/Visions-cover-1600x900.png" />Visions <img width="1600" height="900" width_o="1600" height_o="900" data-src="https://freight.cargo.site/t/original/i/34e2f4eb4d157129f62b96b58b4ffcfe5b16a7792415b88ec1ff1ded6e2cfa6f/Podblogger-cover-1600x900.png" data-mid="161130668" border="0" src="https://freight.cargo.site/w/1000/i/34e2f4eb4d157129f62b96b58b4ffcfe5b16a7792415b88ec1ff1ded6e2cfa6f/Podblogger-cover-1600x900.png" />Podblogger <img width="1600" height="900" width_o="1600" height_o="900" data-src="https://freight.cargo.site/t/original/i/1d8147f92536d37127057b2120739333f37b451d864e9733dc75a62dd3c90b4b/Guidebook-cover-1600x900.png" data-mid="161130667" border="0" src="https://freight.cargo.site/w/1000/i/1d8147f92536d37127057b2120739333f37b451d864e9733dc75a62dd3c90b4b/Guidebook-cover-1600x900.png" /> Guidebooks https://matthewtsang.design/UPSTARTS Tue, 06 Dec 2022 12:22:31 +0000 Matthew Tsang https://matthewtsang.design/UPSTARTS UPSTARTS <img width="2320" height="1088" width_o="2320" height_o="1088" data-src="https://freight.cargo.site/t/original/i/5789f2f163b7b47936ed3edc3a5092087cf1a15d82b9e290fb613f509c1cb358/Screen-Shot-2020-12-07-at-12.22.47-pm.png" data-mid="161130740" border="0" src="https://freight.cargo.site/w/1000/i/5789f2f163b7b47936ed3edc3a5092087cf1a15d82b9e290fb613f509c1cb358/Screen-Shot-2020-12-07-at-12.22.47-pm.png" /> RoleLead designer Timeline2017 SkillsBranding ToolsPhotoshop Final Cut Pro UPSTARTS is the Youth Advisory Committee at the Museum of Applied Arts and Sciences, consisting&nbsp;of 15 teens with immensely diverse interests, ranging from science, technology, fashion, literature and art. We are united in our passion for youth involvement in museums, believing that youth should feel welcome in spaces meant to educate and entertain. As part of UPSTARTS, I worked closely with MAAS staff to develop ways of increasing youth engagement with the museum. Throughout the year, the committee developed a range of diverse projects including Journeys, a teen-curated digital tour of the Powerhouse Museum and&nbsp;UPSTARTS Up Late, a teens-only event featuring virtual reality demonstrations, curator tours, music and hands-on activities. The Brief The Museum of Applied Arts and Sciences (MAAS) operates three museums in Sydney, the Powerhouse Museum, Museums Discovery Centre and Sydney Observatory, with a focus on science and design. Youth engagement with MAAS had declined in the years leading up to 2017, while it had increased in at the nearby Museum of Contemporary Art and the Art Gallery of NSW. Both of&nbsp;these galleries had their own youth-led initiatives such as Genext and the Youth Collective, while MAAS did not have anything similar. The UPSTARTS team was assembled and tasked with developing a sub-brand within MAAS that would not only host youth events but offer a digital tour of the MAAS Collection with a youth interpretation. <img width="2494" height="1662" width_o="2494" height_o="1662" data-src="https://freight.cargo.site/t/original/i/30c1a24bd73a762c8b774b604fcf503469e027c04defec3463548b26a9619d6c/MAAS_v05.jpg" data-mid="161130741" border="0" src="https://freight.cargo.site/w/1000/i/30c1a24bd73a762c8b774b604fcf503469e027c04defec3463548b26a9619d6c/MAAS_v05.jpg" /> Design Process The team began with a brainstorming session to determine what we liked and didn't like about the museum. Overall, the static exhibitions that had been in place for the past 30 years were the least engaging as everything was behind glass, the lighting was yellow and the aesthetics looked dated. We agreed that our own initiative needed to be interactive and utilise modern technology. <img width="1402" height="1078" width_o="1402" height_o="1078" data-src="https://freight.cargo.site/t/original/i/9bf9989448acd1c986767563e8201e4461a1e19a99442114a76d6f939fabe073/Screen-Shot-2020-12-07-at-12.26.15-pm.png" data-mid="161130742" border="0" src="https://freight.cargo.site/w/1000/i/9bf9989448acd1c986767563e8201e4461a1e19a99442114a76d6f939fabe073/Screen-Shot-2020-12-07-at-12.26.15-pm.png" /> The next step was to establish a brand for UPSTARTS. I took inspiration from the bright colours and angled graphic device used in MAAS advertisements to create title cards for the four themes that we had chosen. <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/81fa1261c5af688bfeb4dfbc4b2499d2da005354c7df6f04eb55fe71fd31131e/9b468734013794.56e10a14ea8e6.png" data-mid="161130743" border="0" src="https://freight.cargo.site/w/1000/i/81fa1261c5af688bfeb4dfbc4b2499d2da005354c7df6f04eb55fe71fd31131e/9b468734013794.56e10a14ea8e6.png" /> <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/e7247e2101797c2c10371582465edff89a54c81d4245082e2f606fc512a39f7d/26472034013794.56e10a14ea1f7.png" data-mid="161130745" border="0" src="https://freight.cargo.site/w/1000/i/e7247e2101797c2c10371582465edff89a54c81d4245082e2f606fc512a39f7d/26472034013794.56e10a14ea1f7.png" /> <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/8afc0d0ce07627cf387cb5bd2cb2dc2191711a36241bed42cdbc392dc19cc114/221c5934013794.56e10a14eb90a.png" data-mid="161130744" border="0" src="https://freight.cargo.site/w/1000/i/8afc0d0ce07627cf387cb5bd2cb2dc2191711a36241bed42cdbc392dc19cc114/221c5934013794.56e10a14eb90a.png" /> Above: Samples of MAAS brand identity. Below: First draft of UPSTARTS branding. <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/c35131c4e2e8f060d3a6bea6104ee2a884977e91518c401fb6a77079d5ab655e/UPSTARTS-Global-v2.png" data-mid="161130746" border="0" src="https://freight.cargo.site/w/1000/i/c35131c4e2e8f060d3a6bea6104ee2a884977e91518c401fb6a77079d5ab655e/UPSTARTS-Global-v2.png" /> <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/15a3b7cb679362e37661b105f4df223a908e5646374ab55cfb2860848943a240/UPSTARTS-Innovation-v2.png" data-mid="161130747" border="0" src="https://freight.cargo.site/w/1000/i/15a3b7cb679362e37661b105f4df223a908e5646374ab55cfb2860848943a240/UPSTARTS-Innovation-v2.png" /> <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/c272f029af023a612c269de4fd3a3cc9675668843304e43af73f40edfde1ce3b/UPSTARTS-Isolation-v2.png" data-mid="161130748" border="0" src="https://freight.cargo.site/w/1000/i/c272f029af023a612c269de4fd3a3cc9675668843304e43af73f40edfde1ce3b/UPSTARTS-Isolation-v2.png" /> <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/81a7343090a4d46e074f18e476b13a697d0c4b18c76db3089579f711ce76fd39/UPSTARTS-Nostalgia-v2.png" data-mid="161130749" border="0" src="https://freight.cargo.site/w/1000/i/81a7343090a4d46e074f18e476b13a697d0c4b18c76db3089579f711ce76fd39/UPSTARTS-Nostalgia-v2.png" /> The draft designs were well received but the team felt that they too closely resembled the MAAS brand and it would be better to more distinctly identity ourselves as UPSTARTS. The museum's I.T. team also told me that I couldn't use the museum's font as there would be additional licensing issues. I decided to strip back the colours and use a primary palette of black and white with one accent colour chosen from the featured object's image. The new logo uses an angular typeface and is split across two lines to allude to the MAAS logo. The four themes were also consolidated into the primary theme of Journeys, which I then arranged around the featured objects. <img width="3508" height="2480" width_o="3508" height_o="2480" data-src="https://freight.cargo.site/t/original/i/3b0da4180edddcc3a95d4a00f763956fc536d2de6fb183de04c368878eac4499/New-Logo-Proposal.png" data-mid="161130750" border="0" src="https://freight.cargo.site/w/1000/i/3b0da4180edddcc3a95d4a00f763956fc536d2de6fb183de04c368878eac4499/New-Logo-Proposal.png" /> <img width="800" height="450" width_o="800" height_o="450" data-src="https://freight.cargo.site/t/original/i/61f450d293a41247e1559b2642723a9661f8b5b035b220effa8c5b783a2e8610/ezgif-6-dbef7aeeb119.gif" data-mid="161130726" border="0" src="https://freight.cargo.site/w/800/i/61f450d293a41247e1559b2642723a9661f8b5b035b220effa8c5b783a2e8610/ezgif-6-dbef7aeeb119.gif" /> After these elements were decided on, I worked on a website in Wix that would be used for both the UPSTARTS Up Late event and the&nbsp;Journeys&nbsp;digital platform. Unfortunately, the domain name was not renewed after the event ended and the only screenshot I have of the website is shown below. <img width="3104" height="1878" width_o="3104" height_o="1878" data-src="https://freight.cargo.site/t/original/i/e5238e4fd3ad64bf0cb8a1ae58900a454c1adc4394003496478c3d42821f9065/Screen-Shot-2018-01-29-at-2.02.48-pm.png" data-mid="161130755" border="0" src="https://freight.cargo.site/w/1000/i/e5238e4fd3ad64bf0cb8a1ae58900a454c1adc4394003496478c3d42821f9065/Screen-Shot-2018-01-29-at-2.02.48-pm.png" /> I also created a map and program brochure as well as wayfinding signage for the event. <img width="2140" height="1506" width_o="2140" height_o="1506" data-src="https://freight.cargo.site/t/original/i/f9029bc3cc21d3e924c20cb185a65e6de4b7961d18f8b0e51734d0e9e3e91e11/Screen-Shot-2020-06-30-at-12.46.27-pm.png" data-mid="161130751" border="0" data-scale="84" src="https://freight.cargo.site/w/1000/i/f9029bc3cc21d3e924c20cb185a65e6de4b7961d18f8b0e51734d0e9e3e91e11/Screen-Shot-2020-06-30-at-12.46.27-pm.png" /><img width="2142" height="1508" width_o="2142" height_o="1508" data-src="https://freight.cargo.site/t/original/i/6b52bcb7d8be23e4b917ec9dd50bb77c73b4865e40b48b71f58b10b002d1fb75/Screen-Shot-2020-06-30-at-12.46.38-pm.png" data-mid="161130752" border="0" data-scale="84" src="https://freight.cargo.site/w/1000/i/6b52bcb7d8be23e4b917ec9dd50bb77c73b4865e40b48b71f58b10b002d1fb75/Screen-Shot-2020-06-30-at-12.46.38-pm.png" /> <img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/bcd18a42e22042315b81f3fe5b18e601600d6907ba4e6a04f2ca42f0becb9f4c/IMG_5232.JPG" data-mid="161130753" border="0" src="https://freight.cargo.site/w/1000/i/bcd18a42e22042315b81f3fe5b18e601600d6907ba4e6a04f2ca42f0becb9f4c/IMG_5232.JPG" /><img width="3662" height="2744" width_o="3662" height_o="2744" data-src="https://freight.cargo.site/t/original/i/a6a45708cb8dca38cc259789ac167c6234857a0974db4a8e7ea97ac60e0f8721/IMG_7344.JPG" data-mid="161130754" border="0" src="https://freight.cargo.site/w/1000/i/a6a45708cb8dca38cc259789ac167c6234857a0974db4a8e7ea97ac60e0f8721/IMG_7344.JPG" /> The UPSTARTS Up Late&nbsp;event attracted over 100 guests and was successfully run. However, due to logistical issues and the impending demolition of the Powerhouse Museum, UPSTARTS did not continue in 2018. Overall, it was a good opportunity for me to experience working in the organisational environment of a museum and I was able to&nbsp;learn more about collaborating with different stakeholders and the design thinking process. Other Projects <img width="1600" height="900" width_o="1600" height_o="900" data-src="https://freight.cargo.site/t/original/i/90f2760eef62df1f060063f7a32e5d9791fbe0440002d7460185ee93f99bc984/Visions-cover-1600x900.png" data-mid="161130738" border="0" src="https://freight.cargo.site/w/1000/i/90f2760eef62df1f060063f7a32e5d9791fbe0440002d7460185ee93f99bc984/Visions-cover-1600x900.png" /> Visions <img width="3508" height="1974" width_o="3508" height_o="1974" data-src="https://freight.cargo.site/t/original/i/7447fc119d3f190b26ccaa3fc00890d0e214c93040b3c183e927273923b2798a/Untitled-2.png" data-mid="161130739" border="0" src="https://freight.cargo.site/w/1000/i/7447fc119d3f190b26ccaa3fc00890d0e214c93040b3c183e927273923b2798a/Untitled-2.png" />Library <img width="1600" height="900" width_o="1600" height_o="900" data-src="https://freight.cargo.site/t/original/i/d69c8574f1acdb5c9594f86ee8f1a7d40a3d522df2e2d025b1f94caafcc1dfd2/Artbox-cover-1600x900.png" data-mid="161130730" border="0" src="https://freight.cargo.site/w/1000/i/d69c8574f1acdb5c9594f86ee8f1a7d40a3d522df2e2d025b1f94caafcc1dfd2/Artbox-cover-1600x900.png" /> Artbox <img width="1600" height="900" width_o="1600" height_o="900" data-src="https://freight.cargo.site/t/original/i/34e2f4eb4d157129f62b96b58b4ffcfe5b16a7792415b88ec1ff1ded6e2cfa6f/Podblogger-cover-1600x900.png" data-mid="161130728" border="0" src="https://freight.cargo.site/w/1000/i/34e2f4eb4d157129f62b96b58b4ffcfe5b16a7792415b88ec1ff1ded6e2cfa6f/Podblogger-cover-1600x900.png" /> Podblogger https://matthewtsang.design/Visions Tue, 06 Dec 2022 12:22:33 +0000 Matthew Tsang https://matthewtsang.design/Visions Visions <img width="2326" height="1096" width_o="2326" height_o="1096" data-src="https://freight.cargo.site/t/original/i/79be3705f80d5fc0b5440a5642fb43fb35ca433390eb0d17ec92fe81f5722293/Screen-Shot-2020-12-07-at-11.30.50-am.png" data-mid="161130770" border="0" src="https://freight.cargo.site/w/1000/i/79be3705f80d5fc0b5440a5642fb43fb35ca433390eb0d17ec92fe81f5722293/Screen-Shot-2020-12-07-at-11.30.50-am.png" /> RoleLead designer Timeline2015-2019 SkillsBranding Print designMerchandise design ToolsInDesignPhotoshop Illustrator Mailchimp NSBHS Visions is a student-run media and communications committee, aiming to contribute to and enrich the North Sydney Boys High School community through a series of long-term projects, including The 4U Paper student magazine, the StudyGroups program, the myNSB app, and the Showcase galleries. As an Executive, I was responsible for managing the committee's administrative side, including logistics and finance. In 2018&nbsp;I oversaw the development of&nbsp;the committee's new visual identity and digital presence to ensure that Visions became the most recognised committee in the school. The Brief School committees are often seen as a place for 'popular kids' to gain recognition and add leadership roles to their resume. As a result, committees rarely get anything productive done. Visions wanted to distance ourselves from these negative connotations by operating with a start-up mindset and 'get things done' attitude. We needed a new brand identity to showcase our new direction. First, we started out by conducing a survey of over 100 students. We found that Visions was ranked the lowest in terms of importance, and that our purpose wasn't clear. <img width="2180" height="1414" width_o="2180" height_o="1414" data-src="https://freight.cargo.site/t/original/i/a7ce3b0bf80aaf309193ba914270a7cc28df3632b648035f66d170af2ab22087/Screen-Shot-2020-06-30-at-5.10.32-pm.png" data-mid="161130771" border="0" src="https://freight.cargo.site/w/1000/i/a7ce3b0bf80aaf309193ba914270a7cc28df3632b648035f66d170af2ab22087/Screen-Shot-2020-06-30-at-5.10.32-pm.png" /><img width="2182" height="832" width_o="2182" height_o="832" data-src="https://freight.cargo.site/t/original/i/10efd50a25cde0e698eb8f0b35b46479ebda984cbb03fb51309b8de6d0d5249e/Screen-Shot-2020-06-30-at-5.10.16-pm.png" data-mid="161130772" border="0" src="https://freight.cargo.site/w/1000/i/10efd50a25cde0e698eb8f0b35b46479ebda984cbb03fb51309b8de6d0d5249e/Screen-Shot-2020-06-30-at-5.10.16-pm.png" /> Design Process With these survey findings in mind, Visions knew that we needed to simplify our brand and make it clearer what it is that we actually do. I decided to reduce the number of logos variants from 12 down to two designs in either purple or white. The project logos for The 4U Paper, StudyGroups and myNSB were also simplified. <img width="2180" height="1236" width_o="2180" height_o="1236" data-src="https://freight.cargo.site/t/original/i/97ef367c74287b2b3da9034b8d8287ee19aea5f7db7fec0af5946a8737b8b4ca/Screen-Shot-2020-06-30-at-5.15.45-pm.png" data-mid="161130773" border="0" src="https://freight.cargo.site/w/1000/i/97ef367c74287b2b3da9034b8d8287ee19aea5f7db7fec0af5946a8737b8b4ca/Screen-Shot-2020-06-30-at-5.15.45-pm.png" /> <img width="2180" height="1098" width_o="2180" height_o="1098" data-src="https://freight.cargo.site/t/original/i/ae01d987a3ee1475cd645abb0133e407f51a7929fff3dd1cc9cf11b694c752c6/Screen-Shot-2020-06-30-at-5.16.07-pm.png" data-mid="161130774" border="0" src="https://freight.cargo.site/w/1000/i/ae01d987a3ee1475cd645abb0133e407f51a7929fff3dd1cc9cf11b694c752c6/Screen-Shot-2020-06-30-at-5.16.07-pm.png" /> These new designs were introduced across noticeboards and assemblies so that the whole school would be aware of our new branding. No other committee had a consistent design style or wide reach, so we had already begun to attract new interest and differentiated ourselves from the other committees. <img width="2060" height="1544" width_o="2060" height_o="1544" data-src="https://freight.cargo.site/t/original/i/1a6d4c20d4f55830203b27445655f49e3e30be18cbdd19a990ad1cfd8e6eccc6/Screen-Shot-2020-01-06-at-4.12.17-pm.png" data-mid="161130777" border="0" src="https://freight.cargo.site/w/1000/i/1a6d4c20d4f55830203b27445655f49e3e30be18cbdd19a990ad1cfd8e6eccc6/Screen-Shot-2020-01-06-at-4.12.17-pm.png" /> <img width="2060" height="1544" width_o="2060" height_o="1544" data-src="https://freight.cargo.site/t/original/i/7f2211d172da919c903a19937cae61ffd5d458a3bbb510a2efe4f89430f09342/Screen-Shot-2020-01-06-at-4.11.56-pm.png" data-mid="161130776" border="0" src="https://freight.cargo.site/w/1000/i/7f2211d172da919c903a19937cae61ffd5d458a3bbb510a2efe4f89430f09342/Screen-Shot-2020-01-06-at-4.11.56-pm.png" /> <img width="2060" height="1544" width_o="2060" height_o="1544" data-src="https://freight.cargo.site/t/original/i/7dec4758e6a58721c43dabfbf832f09fb2f3fdc7da70ee11f003a51c05c1532e/Screen-Shot-2020-01-06-at-3.52.06-pm.png" data-mid="161130775" border="0" src="https://freight.cargo.site/w/1000/i/7dec4758e6a58721c43dabfbf832f09fb2f3fdc7da70ee11f003a51c05c1532e/Screen-Shot-2020-01-06-at-3.52.06-pm.png" /> Next, we decided to simplify the sign up process to make it easier for students to join Visions. Traditionally, the school would print out paper forms in Term 3 each year, using the same template for each committee. However, this process locked us into the school's schedule and sign up format. I developed a new sign up process using Mailchimp that would make the sign up process more convenient and further showcase Visions as an innovative committee. After filling in the Mailchimp form, students would automatically receive an email giving them more information about our projects and a link to confirm their involvement in any of the projects. If a student does not respond with two days, Mailchimp would automatically send a follow up email. The use of merge tags also allowed us to include the student's name in the email, making it seem more personal. <img width="3508" height="6455" width_o="3508" height_o="6455" data-src="https://freight.cargo.site/t/original/i/9c2bee66c92f2e5a8ce8747e25a3e34c2133008a7e3440406115c747b2d73072/Mailchimp-process.png" data-mid="161130778" border="0" src="https://freight.cargo.site/w/1000/i/9c2bee66c92f2e5a8ce8747e25a3e34c2133008a7e3440406115c747b2d73072/Mailchimp-process.png" /> As students gradually became accustomed to seeing the Visions logo around the school, I felt confident that we could drop the wordmark from our logo and promote the pigeon icon by itself. I designed a range of merchandise featuring the icon, including a t-shirt, badges, keyrings and mugs. <img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/1e3d24db0ee005c38e778e0a80c2650d681cfafa3ea46a5fb5536165249919d3/IMG_2838.jpg" data-mid="161130781" border="0" src="https://freight.cargo.site/w/1000/i/1e3d24db0ee005c38e778e0a80c2650d681cfafa3ea46a5fb5536165249919d3/IMG_2838.jpg" /> <img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/6d0ac7e9098d04879d45497223d1ebd8f5ea0cb7775a7f674d162b9871eef670/Snapseed.jpg" data-mid="161130784" border="0" src="https://freight.cargo.site/w/1000/i/6d0ac7e9098d04879d45497223d1ebd8f5ea0cb7775a7f674d162b9871eef670/Snapseed.jpg" /> <img width="2060" height="1544" width_o="2060" height_o="1544" data-src="https://freight.cargo.site/t/original/i/5f7b692e2a795c51075fc4ef853748dc7a1588d43a8e48db23c5f94b921c1cae/Screen-Shot-2020-01-06-at-4.14.52-pm.png" data-mid="161130782" border="0" src="https://freight.cargo.site/w/1000/i/5f7b692e2a795c51075fc4ef853748dc7a1588d43a8e48db23c5f94b921c1cae/Screen-Shot-2020-01-06-at-4.14.52-pm.png" /> <img width="2060" height="1544" width_o="2060" height_o="1544" data-src="https://freight.cargo.site/t/original/i/209c8f5381bff49a06c9178f553cab1e47feffdc602e2070eccf0232e5374932/Screen-Shot-2020-01-06-at-4.16.30-pm.png" data-mid="161130783" border="0" src="https://freight.cargo.site/w/1000/i/209c8f5381bff49a06c9178f553cab1e47feffdc602e2070eccf0232e5374932/Screen-Shot-2020-01-06-at-4.16.30-pm.png" /> <img width="2060" height="1544" width_o="2060" height_o="1544" data-src="https://freight.cargo.site/t/original/i/08702202867a553e17d3b451b7b0f1a9f99973cf2a90ceb6d74e9955a871a1a1/Screen-Shot-2020-01-06-at-4.14.06-pm.png" data-mid="161130780" border="0" src="https://freight.cargo.site/w/1000/i/08702202867a553e17d3b451b7b0f1a9f99973cf2a90ceb6d74e9955a871a1a1/Screen-Shot-2020-01-06-at-4.14.06-pm.png" /> <img width="1154" height="1542" width_o="1154" height_o="1542" data-src="https://freight.cargo.site/t/original/i/d9eb71b3b3b00f1d08dab0c78a9e0d1a88f251db15441c77e77864b4138d9188/Screen-Shot-2020-01-06-at-4.14.29-pm.png" data-mid="161130779" border="0" src="https://freight.cargo.site/w/1000/i/d9eb71b3b3b00f1d08dab0c78a9e0d1a88f251db15441c77e77864b4138d9188/Screen-Shot-2020-01-06-at-4.14.29-pm.png" /> I distributed the same survey at the end of the year and students responded by voting Visions as the number one most important committee in the school. I also received feedback that Visions was the most professional committee and the only committee that made a difference to the school. I'm extremely proud of how we were able to turn Visions around within a year, through good design and effective communication. <img width="1834" height="458" width_o="1834" height_o="458" data-src="https://freight.cargo.site/t/original/i/2fa257f37d2ebf9871be86fc588b0313436ae0af89a82f0611fcb5c5f9cc4685/Screen-Shot-2020-12-07-at-12.14.48-pm.png" data-mid="161130785" border="0" data-scale="85" src="https://freight.cargo.site/w/1000/i/2fa257f37d2ebf9871be86fc588b0313436ae0af89a82f0611fcb5c5f9cc4685/Screen-Shot-2020-12-07-at-12.14.48-pm.png" /> Other Projects <img width="3508" height="1974" width_o="3508" height_o="1974" data-src="https://freight.cargo.site/t/original/i/7447fc119d3f190b26ccaa3fc00890d0e214c93040b3c183e927273923b2798a/Untitled-2.png" data-mid="161130769" border="0" src="https://freight.cargo.site/w/1000/i/7447fc119d3f190b26ccaa3fc00890d0e214c93040b3c183e927273923b2798a/Untitled-2.png" /> Library <img width="1600" height="900" width_o="1600" height_o="900" data-src="https://freight.cargo.site/t/original/i/a7014a14bd439d92bc3cf52e035b5d7b7bb2545fb84f57bd26027c2ba6a3eb0a/4U-cover-1600x900.png" data-mid="161130761" border="0" src="https://freight.cargo.site/w/1000/i/a7014a14bd439d92bc3cf52e035b5d7b7bb2545fb84f57bd26027c2ba6a3eb0a/4U-cover-1600x900.png" />The 4U Paper <img width="800" height="450" width_o="800" height_o="450" data-src="https://freight.cargo.site/t/original/i/61f450d293a41247e1559b2642723a9661f8b5b035b220effa8c5b783a2e8610/ezgif-6-dbef7aeeb119.gif" data-mid="161130756" border="0" src="https://freight.cargo.site/w/800/i/61f450d293a41247e1559b2642723a9661f8b5b035b220effa8c5b783a2e8610/ezgif-6-dbef7aeeb119.gif" />UPSTARTS <img width="1600" height="900" width_o="1600" height_o="900" data-src="https://freight.cargo.site/t/original/i/d69c8574f1acdb5c9594f86ee8f1a7d40a3d522df2e2d025b1f94caafcc1dfd2/Artbox-cover-1600x900.png" data-mid="161130760" border="0" src="https://freight.cargo.site/w/1000/i/d69c8574f1acdb5c9594f86ee8f1a7d40a3d522df2e2d025b1f94caafcc1dfd2/Artbox-cover-1600x900.png" /> Artbox https://matthewtsang.design/Library Tue, 06 Dec 2022 12:22:36 +0000 Matthew Tsang https://matthewtsang.design/Library Library <img width="3508" height="1974" width_o="3508" height_o="1974" data-src="https://freight.cargo.site/t/original/i/7447fc119d3f190b26ccaa3fc00890d0e214c93040b3c183e927273923b2798a/Untitled-2.png" data-mid="161130799" border="0" src="https://freight.cargo.site/w/1000/i/7447fc119d3f190b26ccaa3fc00890d0e214c93040b3c183e927273923b2798a/Untitled-2.png" /> RoleLead designer Timeline2015 SkillsLogo design Branding ToolsInDesignIllustrator The newly renovated North Sydney Boys High School Library did not have a logo or any signage, so&nbsp;in collaboration with the librarian, I&nbsp;established a new brand based on the new motto of&nbsp;Question. Search. Discover.&nbsp;The new library logo is an amalgamation of a question mark, magnifying glass and eye, conveying the exploratory nature of the library. New signage was placed on shelves and spinners, as well as regular event posters and bookmarks to promote the library's collections. Design Process <img width="876" height="876" width_o="876" height_o="876" data-src="https://freight.cargo.site/t/original/i/0eb1e68a2ddb05881625d3476b265d90a707c688462b58ce27d4ce5a80ce4470/Screen-Shot-2020-12-04-at-10.40.04-pm.png" data-mid="161130800" border="0" data-scale="40" src="https://freight.cargo.site/w/876/i/0eb1e68a2ddb05881625d3476b265d90a707c688462b58ce27d4ce5a80ce4470/Screen-Shot-2020-12-04-at-10.40.04-pm.png" /> The sketch above shows the original idea that the librarian had. As I was only 14 at the time and new to using the Adobe CC apps, I didn't immediately know how to digitally recreate the sketch. I started creating iterations of the design, beginning with a literal interpretation of an eye and a magnifying glass. This design became more streamlined with each iteration. <img width="1831" height="860" width_o="1831" height_o="860" data-src="https://freight.cargo.site/t/original/i/4a718ad8f168b2fe3c13afb376af88d56bfe8aff270c0760a15dbb06d507b157/Screen-Shot-2020-12-04-at-10.40.15-pm.png" data-mid="161130801" border="0" src="https://freight.cargo.site/w/1000/i/4a718ad8f168b2fe3c13afb376af88d56bfe8aff270c0760a15dbb06d507b157/Screen-Shot-2020-12-04-at-10.40.15-pm.png" />We finally decided on the version below, adding the library name next to the icon. I chose to use red Century Gothic as this was a key element in the library's existing signage. The motto and three logo components were also added to better explain the logo. <img width="1706" height="1146" width_o="1706" height_o="1146" data-src="https://freight.cargo.site/t/original/i/3b42993a82ff89c4cc79aed32f7fdebb62149d96f78cd8e51774e82c37572d16/Screen-Shot-2020-12-04-at-11.12.23-pm.png" data-mid="161130802" border="0" data-scale="82" src="https://freight.cargo.site/w/1000/i/3b42993a82ff89c4cc79aed32f7fdebb62149d96f78cd8e51774e82c37572d16/Screen-Shot-2020-12-04-at-11.12.23-pm.png" /> Once the logo was in use around the library and people became more familiar with it, I simplified it further so that it could be used as the profile picture on the library's new Facebook page. When Facebook changed the profile pictures to become circular instead of square, the&nbsp;new iteration on the right was created. Having the full icon in red also helped it stand out more on people's Facebook feeds. <img width="1300" height="764" width_o="1300" height_o="764" data-src="https://freight.cargo.site/t/original/i/77bc8d7cce164a29142649d448de8fa62c504caae6553ac06e4eed590ba71918/Screen-Shot-2020-12-04-at-11.12.48-pm.png" data-mid="161130803" border="0" data-scale="76" src="https://freight.cargo.site/w/1000/i/77bc8d7cce164a29142649d448de8fa62c504caae6553ac06e4eed590ba71918/Screen-Shot-2020-12-04-at-11.12.48-pm.png" /> Once the logo had been designed, I also updated the shelving signage around the library. Each book collection also received an icon and colour which was also added to the spines of all the books in that collection to make them easier to identify. <img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/357cff29c9d168ada900961df3eaa328069c352d91d0ab2ed1440e5dc745d4fb/IMG_8377.jpg" data-mid="161130805" border="0" src="https://freight.cargo.site/w/1000/i/357cff29c9d168ada900961df3eaa328069c352d91d0ab2ed1440e5dc745d4fb/IMG_8377.jpg" /> <img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/b3eb631e1659e6a0afbb1ed4dbdbf90e9ee02be44f06550e4b1964c5a19c0e78/IMG_8383.jpg" data-mid="161130810" border="0" src="https://freight.cargo.site/w/1000/i/b3eb631e1659e6a0afbb1ed4dbdbf90e9ee02be44f06550e4b1964c5a19c0e78/IMG_8383.jpg" /> <img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/f604b161a09e352b5de2e928ebe0e28b13191c0ff8aaddd6d716cab55d9bcd54/IMG_8378.jpg" data-mid="161130806" border="0" src="https://freight.cargo.site/w/1000/i/f604b161a09e352b5de2e928ebe0e28b13191c0ff8aaddd6d716cab55d9bcd54/IMG_8378.jpg" /> <img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/cd04a417dbbc764cbb4c9af188e7580aaf4c79bb92486439d54e1eecb8f540ff/IMG_8376.jpg" data-mid="161130804" border="0" src="https://freight.cargo.site/w/1000/i/cd04a417dbbc764cbb4c9af188e7580aaf4c79bb92486439d54e1eecb8f540ff/IMG_8376.jpg" /> <img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/d5c9e0399cf6678bb95e42db2c8844108cadf64f1b8b85c544ba3a9ad544c333/IMG_8379.jpg" data-mid="161130807" border="0" src="https://freight.cargo.site/w/1000/i/d5c9e0399cf6678bb95e42db2c8844108cadf64f1b8b85c544ba3a9ad544c333/IMG_8379.jpg" /> <img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/b735e3ee3bc5299df9428fd4f3ae20c4536fc362ed6dfa77ed99ac17c2978460/IMG_8385.jpg" data-mid="161130812" border="0" src="https://freight.cargo.site/w/1000/i/b735e3ee3bc5299df9428fd4f3ae20c4536fc362ed6dfa77ed99ac17c2978460/IMG_8385.jpg" /> <img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/03ef838c0be0de3bb90cea229f7806ec09f9bd595aa3618e68e7299451a05065/IMG_8380.jpg" data-mid="161130808" border="0" src="https://freight.cargo.site/w/1000/i/03ef838c0be0de3bb90cea229f7806ec09f9bd595aa3618e68e7299451a05065/IMG_8380.jpg" /> <img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/cdd414cf2627cef7f746b36df86dfcb61a3f90c21bc886ad66cbc8faeecd24ad/IMG_8381.jpg" data-mid="161130809" border="0" src="https://freight.cargo.site/w/1000/i/cdd414cf2627cef7f746b36df86dfcb61a3f90c21bc886ad66cbc8faeecd24ad/IMG_8381.jpg" /> <img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/f28996ffe62fa57549ac84095e6c0f9152e7de0f4ae22e67719de0dc795b71f7/IMG_8384.jpg" data-mid="161130811" border="0" src="https://freight.cargo.site/w/1000/i/f28996ffe62fa57549ac84095e6c0f9152e7de0f4ae22e67719de0dc795b71f7/IMG_8384.jpg" /> Other Projects <img width="1600" height="900" width_o="1600" height_o="900" data-src="https://freight.cargo.site/t/original/i/a7014a14bd439d92bc3cf52e035b5d7b7bb2545fb84f57bd26027c2ba6a3eb0a/4U-cover-1600x900.png" data-mid="161130791" border="0" src="https://freight.cargo.site/w/1000/i/a7014a14bd439d92bc3cf52e035b5d7b7bb2545fb84f57bd26027c2ba6a3eb0a/4U-cover-1600x900.png" /> The 4U Paper <img width="1600" height="900" width_o="1600" height_o="900" data-src="https://freight.cargo.site/t/original/i/1d8147f92536d37127057b2120739333f37b451d864e9733dc75a62dd3c90b4b/Guidebook-cover-1600x900.png" data-mid="161130787" border="0" src="https://freight.cargo.site/w/1000/i/1d8147f92536d37127057b2120739333f37b451d864e9733dc75a62dd3c90b4b/Guidebook-cover-1600x900.png" />Guidebooks <img width="1600" height="900" width_o="1600" height_o="900" data-src="https://freight.cargo.site/t/original/i/90f2760eef62df1f060063f7a32e5d9791fbe0440002d7460185ee93f99bc984/Visions-cover-1600x900.png" data-mid="161130798" border="0" src="https://freight.cargo.site/w/1000/i/90f2760eef62df1f060063f7a32e5d9791fbe0440002d7460185ee93f99bc984/Visions-cover-1600x900.png" /> Visions <img width="800" height="450" width_o="800" height_o="450" data-src="https://freight.cargo.site/t/original/i/61f450d293a41247e1559b2642723a9661f8b5b035b220effa8c5b783a2e8610/ezgif-6-dbef7aeeb119.gif" data-mid="161130786" border="0" src="https://freight.cargo.site/w/800/i/61f450d293a41247e1559b2642723a9661f8b5b035b220effa8c5b783a2e8610/ezgif-6-dbef7aeeb119.gif" /> UPSTARTS https://matthewtsang.design/The-4U-Paper Tue, 06 Dec 2022 12:22:38 +0000 Matthew Tsang https://matthewtsang.design/The-4U-Paper The 4U Paper <img width="1600" height="900" width_o="1600" height_o="900" data-src="https://freight.cargo.site/t/original/i/a7014a14bd439d92bc3cf52e035b5d7b7bb2545fb84f57bd26027c2ba6a3eb0a/4U-cover-1600x900.png" data-mid="161130818" border="0" src="https://freight.cargo.site/w/1000/i/a7014a14bd439d92bc3cf52e035b5d7b7bb2545fb84f57bd26027c2ba6a3eb0a/4U-cover-1600x900.png" /> RoleLead designer,writer and editor Timeline2015-2019 SkillsPrint designEditingPhotography ToolsInDesignPhotoshop The 4U Paper is the monthly student-run magazine at NSBHS, featuring student-written articles and interviews with students, staff and local community members. I was part of The 4U Paper team from 2015 to 2019 and was the lead designer in 2016, 2018 and early 2019. My role involved the editing and formatting of articles, managing social media as well as conducting interviews. The 4U Paper is created using Photoshop and InDesign, and a large part of my role also involved training younger students to use these programs. Over the 4 years that I was involved with The 4U Paper, I helped the team work tirelessly to grow the magazine from a small publication to one that is now read by thousands of students and community members. At our peak, the July 2018 edition reached over 10,000 views and we were featured in the Sydney Morning Herald. In November 2019, a special edition of The 4U Paper won the Upper Secondary category of the Front Page competition run by ATOM and Nine. The Brief The 4U Paper began in 2014 with a focus on student written articles that were entertaining and light hearted. The old cover and layout (shown below) mimicked the style of an exam paper, with the cover text replaced by something satirical. The paper was published sporadically and readership was below 100. We needed a way to rejuvenate the magazine, attract new readers and expand into new areas. <img width="2096" height="560" width_o="2096" height_o="560" data-src="https://freight.cargo.site/t/original/i/6e9a6b411eb4ae3de384b0e92aa5461f26e20448bbdc41a0abc1ded83e6c5b0a/Screen-Shot-2020-07-01-at-9.44.40-pm.png" data-mid="161130820" border="0" src="https://freight.cargo.site/w/1000/i/6e9a6b411eb4ae3de384b0e92aa5461f26e20448bbdc41a0abc1ded83e6c5b0a/Screen-Shot-2020-07-01-at-9.44.40-pm.png" /> Design Process The team agreed that the previous style had run its course and it was time to transform the magazine into a modern publication with a more global focus. We decided to consistently publish a new edition every month, and recruit a team&nbsp;of writers so that&nbsp;we no longer had to rely on student submissions. Full colour covers were introduced and I designed a consistent layout and chose a primary typeface that would ensure each edition had a sense of familiarity. The new design was more professional and engaging. This was reflected in our increased readership, consistently reaching around 300-400 online and 100 in print. Our new direction also introduced a focus on interviewing public figures in areas that were of interest to students. In July 2018, we interviewed three leading voices on the NSW selective school system. This edition was the post popular edition of The 4U Paper and was&nbsp;read by over 10,000 people online. As part of The 4U Paper, I was also able to meet and interview former North Sydney Boys students, including journalist Peter Overton. We were also featured in the Sydney Morning Herald regarding our investigation into the selective school system. These were amazing opportunities that would not have been possible without the collaboration and commitment of our team, and allowed my designs to have a real world impact. <img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/6a65e9ec014accc0976f8e0eec1f71337e5465c4ea1cb248026dad2122c6a125/IMG_0876.jpg" data-mid="161130821" border="0" src="https://freight.cargo.site/w/1000/i/6a65e9ec014accc0976f8e0eec1f71337e5465c4ea1cb248026dad2122c6a125/IMG_0876.jpg" /> <img width="3941" height="2956" width_o="3941" height_o="2956" data-src="https://freight.cargo.site/t/original/i/b31fac3701919780a2f16fb706c82daffad5636a67aace2d7b62bf794517973f/IMG_1903.jpg" data-mid="161130822" border="0" src="https://freight.cargo.site/w/1000/i/b31fac3701919780a2f16fb706c82daffad5636a67aace2d7b62bf794517973f/IMG_1903.jpg" /> <img width="2060" height="1544" width_o="2060" height_o="1544" data-src="https://freight.cargo.site/t/original/i/3a90f33d10d292fa6ef9a3f063ef11783ee36cb74c73880becfa69b6ffbf34b4/Screen-Shot-2020-01-06-at-2.46.26-pm.png" data-mid="161130823" border="0" src="https://freight.cargo.site/w/1000/i/3a90f33d10d292fa6ef9a3f063ef11783ee36cb74c73880becfa69b6ffbf34b4/Screen-Shot-2020-01-06-at-2.46.26-pm.png" /> <img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/e08ee53f514485f80d2b0274ce23d7d321eb758801b090837bfcf09a15af51b8/4.png" data-mid="161130824" border="0" src="https://freight.cargo.site/w/1000/i/e08ee53f514485f80d2b0274ce23d7d321eb758801b090837bfcf09a15af51b8/4.png" /> View past editions of The 4U Paper here. My designs can be seen in the October 2015 to May 2019 editions.Overall, the five years that I spent working on The 4U Paper allowed me to experiment with different design styles and significantly improve my skills. Most importantly, I'm extremely proud that I was able to teach students how to use Photoshop and InDesign so that The 4U Paper could continue to be published after I had graduated. Other Projects <img width="1600" height="900" width_o="1600" height_o="900" data-src="https://freight.cargo.site/t/original/i/1d8147f92536d37127057b2120739333f37b451d864e9733dc75a62dd3c90b4b/Guidebook-cover-1600x900.png" data-mid="161130814" border="0" src="https://freight.cargo.site/w/1000/i/1d8147f92536d37127057b2120739333f37b451d864e9733dc75a62dd3c90b4b/Guidebook-cover-1600x900.png" /> Guidebooks <img width="1600" height="900" width_o="1600" height_o="900" data-src="https://freight.cargo.site/t/original/i/34e2f4eb4d157129f62b96b58b4ffcfe5b16a7792415b88ec1ff1ded6e2cfa6f/Podblogger-cover-1600x900.png" data-mid="161130815" border="0" src="https://freight.cargo.site/w/1000/i/34e2f4eb4d157129f62b96b58b4ffcfe5b16a7792415b88ec1ff1ded6e2cfa6f/Podblogger-cover-1600x900.png" />Podblogger <img width="3508" height="1974" width_o="3508" height_o="1974" data-src="https://freight.cargo.site/t/original/i/7447fc119d3f190b26ccaa3fc00890d0e214c93040b3c183e927273923b2798a/Untitled-2.png" data-mid="161130826" border="0" src="https://freight.cargo.site/w/1000/i/7447fc119d3f190b26ccaa3fc00890d0e214c93040b3c183e927273923b2798a/Untitled-2.png" /> Library <img width="1600" height="900" width_o="1600" height_o="900" data-src="https://freight.cargo.site/t/original/i/90f2760eef62df1f060063f7a32e5d9791fbe0440002d7460185ee93f99bc984/Visions-cover-1600x900.png" data-mid="161130825" border="0" src="https://freight.cargo.site/w/1000/i/90f2760eef62df1f060063f7a32e5d9791fbe0440002d7460185ee93f99bc984/Visions-cover-1600x900.png" /> Visions