Bubble is a mobile diary for dreams, designed with the current lack of visually succinct journal applications in mind. It can not only record but also share an individual’s dreams to other dreamers in a vivid, unique way while also enabling users to personalize, organize, and keep track of their entries.
This app's UI was fully animated with Origami Studio, a prototyping tool developed by Facebook. Released right when I was about to start prototyping, it was an incredibly hard but fun experience learning how to "visually code" and take advantage of its features.
This is an ongoing campaign at York University's Keele Campus by York University Student Centre promoting the arrival of the soon-to-be-built New Student Centre. As Senior Graphic Designer, I worked on a number of graphic projects in both print and digital for internal and external use. This includes posters, guide books, web content, and digital assets, to name a few. I was heavily involved with generating infographic content and organization. Being the only designer on the team for 2016/2017, I also got a super cool first hand experience with further development of NSC's identity and was heavily invovled in outreaching to stakeholders and coordinating strategy.
These are just a few example of printed products I designed, but I also organized all of our digital design assets and created graphics for our social media accounts (notably our Instagram). This includes promotional event graphics, small tidbits of information, and even video.
When it came to the website, we as a team communicated with an outsourced developer to improve bits and pieces of the site. This was a particular section I designed myself to better visualize the information presented. Because I think it's much easier to show rather than tell, I always created screenshot PDFs of the site in progress with a "before" and "after" shot with annotated changes for the developer (such as "replace this image with this new image provided" or "change font-size by 3px" .
Personally, the hardest project that came out of this so far was designing this 72ft banner timeline that would be attached to the fences during construction of the actual building.
Pretty Idol Star is a resource management game concept about managing female performers known as idols based on the East Asian entertainment industry. The goal is to recruit talented young girls and nurture them to become the best idols in the world in order to claim and maintain the number one spot in the idol business. The launch website mock up can be found in the above link.
This game designed made for western fans of East Asian pop culture who often find the visual aesthetic and packaging of cute, young-looking idols appealing. Ideally, they're familiar with screen-based technologies and have some game experience under their belt. However, these fans also don’t fully understand what happens behind the scenes in the industry and/or/but don’t like what the industry does.
Foreign pop culture consumption may involve possible ignorance to foreign cultural norms. Not fully grasping what goes on in the background may cause fans to accidentally perpetuate harmful practices in the industry they like so much.
The best way to learn and understand industry practices is to “experience” it—through gameplay. While it may introduce some unfamiliar concepts, Pretty Idol Star is not meant to be an introduction for those who are disinterested in or unfamiliar with East Asian idol culture but to enrich and further expand on the player’s knowledge.
Boomereel is a fun video-based concept app designed for the iPhone 6+, with a focus on cinematographic roots. Users can sign up with social media and send or 'receive' videos to append to, resulting in a collaborative cinematic video that can then be shared publicly or privately.
As with any new app concept, we had to brainstorm how our app was going to function in the first place. This was made to map out the paths to each possible function we wanted to include in the app. While this is the finalized iteration of our information architecture, we went through several drafts before settling on this one. Much of it involved shearing down to very specific functions since we initally wanted to include way more things than we could handle, such as complex sharing options and customized profiles.
Part of the process in narrowing down our information architecture was to create user scenarios, so possible personas that would use this app in the first place. I explored the "Explore" option (heh), and illustrated the potential scenario in which a user could interact with the app's functions. Each action has to be specified so I know what "screens" of the apps are accessed, what actions are taken, and where the user ends up. This assists in specifying which screens need to be designed pronto.
We can't forget our style guide! Since we were in a team of three that worked on our own time, it was important to have some sort of guideline when designing the interface so that all of our contributions look consistant and unified. Our primary colour was a soft yellow for friendliness, and red acting as an accent in addition to being a classic notification colour.
Why is it called Boomereel? Because it's a play between boomerang and film reel, since the content is sent forth to users before returning to the original user. I swear that Instagram's Boomerang came out way later than this concept.
Ride[S] is a transit app aimed to provide live updates on all transit systems, specialized for both students and faculty attending Sheridan College. Features include being able to search and navigate stops on a map, live bus updates show in real time, and an alert system. In this project, I lead the collaboration between myself and three other designers, assigning tasks, scheduling meetings, and prioritizing what needs to be completed in addition to completing my own portion of the project as well as the complimentary website.
(It was rigorous).
As per usual, the information architecture is a must. This particular version was one of the earliest, attempting to pinpoint every possible function we wanted to include in our app. However, we eventually realized that some of our flows here weren't optimal for the user or could be moved/removed.
I took on the "alerts" function of our app, crafted a user scenario and then designed some rough wireframes to get a better sense of how our hypothetical user would navigate through this feature. I wanted to show both transit operations and a twitter feed to get some of that user contribution, as social media can be a bit faster than official notices. The most important takeaway doing this for me was the increased sense of where to improve and what to fix in further iterations. As seen here, it takes quite a couple steps just to take a look at some alerts, so this was later modified by using a tab menu instead of a hamburger menu, amongst other things.
These were the few final screens of the "alerts" feature. The first one was more of a refined wireframe with real content, but as I went on developing the final screens (shown in the last two), I realized the redundancy of having a twitter feed: not only would it clutter, it'd just be hard to follow and most likely be full of complaints than real notices. The filtering system was also hidden behind a menu for the user to access if they need it to make the information on the screen cleaner and focused. Colour-coded labels also help users identify what information is important to them.
A clean and responsive infographic site that provide context and explains the concept of ephemeral messaging. This was an experimental web design using one page scroll and various CSS and JQuery codes stiched together to create a functioning prototype.
While pretty rough, these were the beginnings of how I thought I should structure my site. I wanted to play around with the concept of "ephemerality" with regards to my topic. While my coding knowledge may be haphazard, there were a lot of things I wanted to implement in this website (so ambitious).
I planned to use Tooltipster for many tidbits of information and the animated bar graph to show data, and want to implement a "survey" kind of interaction with the user in regards to what they think using this cool thing. To really bring it all in on the table, I wanted some of the introductory information to disappear after some time to really bring home the definiton of "ephermeral messaging."
Finished prototype! A few unironed things I could've done or other buggy things to note:
Hassle Free Sexual Health Clinic is a community-run sexual health clinic that has been in Toronto for about 40 years, and are big contributors to public sexual health in Canada as whole. In this project, I explored the weak points in their current visual identity and came up with a rebrand concept that would both reinforce their values and strengthen their image.
Biased is an infographic print pamphlet about Toronto's police actions against the Black community. I chose to undertake this topic because I found that, in light of recent events in the United States, Canada as the "nice" neighbour is excused in comparison and thus sweeps similar events of police brutality under the rug. This project is intended to call attention to our own police force and their question their authoritative use of power. The audience is informed of common police behaivour and practices when interacting with Black people by identifying racial biases as well as arrests made in comparison to other races on a large map of the city. Designed in four panel roll fold that opens up into a full poster displaying a timeline of officers VS black people when fully unfolded.
Creative typography spread to Sweatpants by Childish Gambino. The song was my flavour of the month at the time, and I re-wrote every lyric while listening to the song over and over to get a feel for where he enounciates his vocabulary in order accurately depict it in the spread. It was a lot of fun experimenting and overlaying with the shapes of the typeface in different weights and displays.