•stvdio

01_Tan Yue Ling_shirt docu 2000x1500 shi

Year:
Final Year Project

(2020 – 2021)

Medium:

Adobe Photoshop

Adobe Illustrator

Adobe InDesign

Figma

Wix

The sudden shift of tertiary design education from the physical to virtual space was made necessary during the COVID-19 pandemic. This created a flurry and growth of digital resources for online teaching and learning; but due to the short span of time, there was a lack of expertise in streamlining the most relevant resources online for remote design educators.

 

In addition to that, there is a challenge to recreate a similar level of social interaction and collaboration that goes on in physical studio sessions, that is vital to the reiteration process of design projects. stvdio is designed as a digital product platform for design educators, meant to help recommend a plethora of collaborative resources, provide suggestions on how to utilise them strategically, and raise discourse about how to best take advantage of educational technology.

 

DESIGN SCOPE

The entire stvdio project consists of four main segments:

1. Overall branding

2. Web design (www.stvdio.org)

3. Print and Event collaterals

4. Animated explainer video

5. Graduation Show Booth

1. overall branding
initial branding exploration.png
initial branding exploration 2.png
stvdio branding.png

During the initial ideation for stvdio’s identity as an organisation behind the main digital product platform, I experimented with and reiterated many different forms and colours of the logo of stvdio. The main concept I wanted to communicate was the novelty of new platforms, coupled with the conviviality of social interaction that happens during design classes.

2. web design
stvdio sitemap 2.png

After compiling useful EdTech resources and their features, I started to plan my website structure by first creating a sitemap on Figma, which I used to plan out and reiterate the site structure and user flow of the page.

After the sitemap was established, I moved on to create wireframes to plan the layout of elements and components which would be included on the website. Thereafter, the style and layouts of the screens underwent several rounds of iteration before arriving at a finalised template

stvdio landing page exp.png
stvdio landing page exp2.png
stvdio wireframe.png
stvdio wireframe 2.png

SITE ARCHITECTURE

The main tabs of the stvdio website consists of a home landing page, a ‘Resources’ resource recommendation page, a ‘Bulletin’ articles page. ‘Community’ forum page and an ‘About’ page.

Landing Mockup.png
stvdio resource page.png
stvdio resource page_visual canvases.png
stvdio bulletin page.png
stvdio article page_constructing critici
3. print and event collaterals

PRODUCT POSTER

I designed an A2 poster which would be featured in the vicinity of local tertiary institutions offering design-related courses.
This product promotion poster briefly summarises the key features of the stvdio website, and a point of access for design educators to gain awareness of how the website can help them better facilitate remote design classes in the future.

EVENT POSTER

In order to promote a ‘Digital Design Pedagogy Panel’ event, I designed another A2 poster which promotes participation in the virtual conference, with details about the session. It features the different fields of design education which may benefit from using such collaborative digital platforms (product design, user experience design, graphic design and interactive design).

stvdio product poster for mockup.png
event poster for mockup.png

WELCOME PACK COLLATERALS

As mentioned in my primary research, participants of the Design Education Summit 2021 had received a welcome pack with a variety of gifts. This inspired the creation of physical collaterals for hypothetical attendees of the “Digital Design Pedagogy Panel”, consisting of T-shirts, a tote bag and a doorknob hanger.

03_Tan Yue Ling_merch docu 2000x1500.png
doorknob hanger docu 2000x1500.png
01_Tan Yue Ling_shirt docu 2000x1500 shi
02_Tan Yue Ling_bag docu 2000x1500.png
4. ANIMATED EXPLAINER VIDEO

Last but not least, I created a motion graphic (accessible at https://youtu.be/BAX59FKS4pI) to quickly summarise the stvdio website in a visually engaging manner. Firstly, I planned out a script and storyboard on Miro to draft out visuals and animation transitions.

 

After doing so, I illustrated and prepared the assets for animation in Adobe Photoshop, before proceeding to create and render the animation in Adobe After Effects.

mograph planning on miro.png
5. Graduation show booth
booth docu 1.jpg
booth docu 2.jpg
booth docu 4.jpg
booth docu 3.jpg