Victoria Whang | Product Designer
Victoria Whang | Product Designer

Blog

Things I read about, watch, hear, do...just all of the things.

Donut Charts - Data Visualization
dataviz.png

Challenge 
To visualize how much time our clients would save by using our application.

Idea 
If we use 100% as their total time working on these four day-to-day tasks, we would save them x amount of time. The graph I use would have to give a sense of time, savings, and usage.

Solution 
A donut chart being a circle feels like a clock and having the arrow go counter-clockwise made this chart feel as if you were going back in time by x%. By using a darker colour for the time still spent and a lighter colour for time saved, it almost makes it feel like we're erasing time spent doing something. Because circles are generally harder to feel out the amount of, I've included the percentage number so that the audience knows exactly how much time saved is illustrated in the charts.

 The final product was an infographic for a company blog article. We may also use the donut chart elements for print marketing in the future.

The final product was an infographic for a company blog article. We may also use the donut chart elements for print marketing in the future.

Designing an interactive project planner interface - Task Pill

One of the newest developments we are working on at PowerHub is the Project Planner. The new interface addition will enable our users to build plans for renewable energy projects visually and have a dynamic resulting overview that's (hopefully) easy to use, efficient to track, and encouraging of collaboration.

At the heart of the design is the creation of task pills. Currently on the platform, users can create tasks from within a portfolio or a project and "Add New" task by using form input.

add new task form

With the update, users will continue to have the option of creating tasks using form input but a brand new visual planner view will become available. The finished product will look like a vertical, scrollable, mind map of sorts with a timeline and branches connecting tasks and key dates together. If any dependancies change, connected tasks will dynamically adjust to update the entirety of the project to show users an up-to-date idea of the project's progress.

 A single task pill in a project planner and all of the embedded interactivity.

A single task pill in a project planner and all of the embedded interactivity.

The tasks module is quite a robust feature on the PowerHub platform, both in content and how it interacts with other modules in the system. Understandably, it requires a lot of information in the visual planner as well. 

Every task has a name and a unique ID. It also has a status (open, overdue, complete, closed) and can belong to a group of tasks, for which the user assigns it an identifiable colour. If it conflicts in any way with the project plan settings or other tasks in the planner, warnings will show. Finally, each task needs the ability to display its immediate dependancies and a critical path in order to visually show relative information to the project manager, or other users with correct permissions.

Keep in mind, we hope to show around five tasks per date along the timeline and we are working with a limited amount of canvas space. Additionally, clickable icons/areas must be given at least 44x44px of ripple room in order to be useable on touchscreens. 

 Warning icon and ellipses icon overlap in their 44x44px ripple room. This will be problematic on touchscreens and smaller devices.

Warning icon and ellipses icon overlap in their 44x44px ripple room. This will be problematic on touchscreens and smaller devices.

How ever will I find the solution for this layout problem? Or have I found one already? Dum dum dum...

The notification drug

After a three month probational period, I got my very first work phone. Whatever phone I chose would come with a 2Gb data plan and unlimited call/text. So I started making a pro/con list in my head of all of the available phone options in Rogers' roster.

IMG_20180509_102847.jpg

Current device:
iPhone 6S gold (age...old enough to be on a monthly plan with no contract)

Potential device:

  • iPhone 8
  • iPhone 8S
  • Google Pixel
  • Google Pixel 2
  • Samsung Galaxy S9
  • Samsung Galaxy Note8

A few factors that were running through my mind:

  • Every device I own is an Apple product so an upgrade on my iPhone would have been only too easy but do I want the "S" version in spite of its behemoth-like size that will not fit in a clutch? (Yes, fashion is indeed a factor.)
  • Google phones have unlimited photo/video storage and I'm getting tired of Apple telling me I'm low and do I want to upgrade to a higher storage tier but am I willing to sacrifice on compatibility?
  • My mom currently owns a Samsung Note and the cameras on those things are out of this world, I daresay better than on iPhones and even the Pixels (which I've seen in action via friends and co-workers). Again, am I willing to compromise on compatibility and storage for an outrageous phone camera?

After a long debate, I decided to keep my personal iPhone 6S (for compatibility), downgrade my existing plan to call/text only (cutting my phone bill by two thirds), and accepting the Google Pixel 2. Sidenote: the decision between the Pixel 1 and 2 was the wait period of about three weeks for the newer model. It had just been released the week before and a few of the co-workers were eager to see it IRL as well. 

IMG_9574.JPG

That was a lengthy intro to what will inevitably become a super short story but after a few months of owning both an iPhone and a Pixel 2, the slowest and deepest difference I've noticed is the notification system: iPhones have the little red dots with numbers at the top right corner of app icons and Pixels do not. And boy, does it make a difference in my overall well-being.

I am, and have always been, one of those users who will never have a red dot with numbers on their phone screens for too long. There are days when I will push myself to keep it there and try to overlook it but those fasts have never lasted longer than a few hours. If I see it once, I'll think about it every once in a while. It's even bled into my habit of checking my phone proactively, every however many minutes it takes to hover around the borderline between crazy and respectable. Half the time, I don't even read through the messages in the notification tab. I just click on the app for the sole mission of accomplishing the disappearance of the evil red dots.

Alternatively, I rarely check my Pixel. If it buzzes a notification and I happen to hear it, I might take a gander but I only open it when I'm good and ready for a serious phone session/photoshoot (because the Portrait feature in the camera is way better than on my iPhone...it's got an amazing depth of field that my Nikon 7100 would be jealous of; either that or I just need to practice shooting better).

I imagine, if I didn't have my iPhone, I would exhibit stronger focus, better work ethic, enthusiastic social skills, and much better REM cycles but Apple also does that thing where all of my Apple products are synced together. If I was iMsging my friends on my phone and then jumped onto my laptop, I could just continue the conversation in another window while I start working on something else. So, even when my phone's not there, it's there. Of course, all those red dots exist in the laptop realm as well so I could be working on something and in the corner of my eye, I can see my dashboard popping up a little notification on my App Store (probably to tell me there's a new iOS upgrade and i need to restart my computer...that's the only one I avoid for a few days until I feel I have to surrender).  

Apple, you're no good for me but I love you, I do.

UI/UXVictoria Whang
Lifelong learning
IMG_7988.JPG

Lasercut

Engraved and rasterized on 1/8" birch plywood

Ever since finishing up my MMDD program at Humber college, I've been itching to learn more always. In my field, and most fields of work (now that I think about it), technology keeps changing and I have to keep evolving and growing my skills to meet demand and keep pace with new trends in design and marketing. 

I admire people who are self-learners, who follow online tutorials and delve into new techniques with ease. I, myself, am not one of those people (unless it's a super engaging arts-and-crafts video for children). I learn much better with a teacher and a regimented outline of learning goals. I do well with structure and scheduled classes. Even in my past life, while working at a bank in Ottawa, I loved taking a figure drawing class at Ottawa School of Art every Thursdays from 6 to 9PM. Even the walk downtown to class after work left me feeling so good and accomplished, like I was super proactive and taking charge of my life.

Right now, I've got my sights set on the Digital Media certificate as well as the Fine Arts certificate at OCAD. They've got a long list of classes ranging from 3D design to wearable tech that I can delve into for the next three years or less. The spectrum is quite broad that it will keep me busy and entertained outside of my day-to-day job, which is also quite fulfilling. The courses are not quite as immersive as I would want (6 classes each, weekly) but they're excellent stepping stones should I ever want to really explore a particular subject.

At work, I practice and explore UI/UX, video, and marketing materials and tools. While that is quite a handful, it's nice to be able to experience that same level of focus on other creative endeavours after 5pm...and to have that effort acknowledged with a certificate at the end of five courses is just a lovely cherry on top.

Cherry blossoms season

I've always wanted to see the cherry blossoms in Japan. It's a pretty iconic visual I have in my head of that one famous path along a skinny canal that's lined by a bajillion cherry trees. While I have never been to Japan during cherry blossom season, or ever for any reason at all, they're also in bloom in Toronto at High Park this week. 

Strangely, in all my years of living in Toronto, this is the first time I've seen cherry blossoms in bloom at High Park. I'm headed to Kyoto and Osaka in a couple of weeks. I'm sure the cherry trees will have passed their prime by then but I've got these photos to remember this past week in my beautiful hometown.

Interface without an interface

Last year I participated in the Amazon Hackathon with a select group of students from the Multimedia Design and Development program at Humber College. It was a brand new experience designing, collaborating, and building for the Alexa platform because it's an interface without an interface. It was a 24 hour challenge, hosted by Connected Lab off of King West.

Our group created a version of Dungeons and Dragons game and named it Alexa & Dragons as a nod to Amazon's AI. We brainstormed story ideas and designed the user experience from there. We wanted to build on the storytelling skill for Alexa and made a point to input natural and conversational language into the story architecture as well. On the side, I also worked on producing sound effects to be played at key points within the plot. The amazing developer in our group used the Alexa skill kit to code the different story options for the Voice User interface. 

UI/UXVictoria Whang
Growth of VR...what about AI?

User experience is constantly changing. In this year's FITC, there's a number of speakers in UX who will cover designing beyond the traditional interface. I feel incredibly lucky to be a part of Women && Tech which gives me the opportunity to even interview a couple of speakers, one on one, and ask all of the questions I have about designing for users in the future...dare I say, now?

I was just reading an article in Variety about virtual reality growing and changing the entertainment industry in the next few years. Location based VR is forecasted to change shopping experiences as well, which makes me wonder about my project on Kirk, the CF chatbot. What about location based AI? Does that make sense? Is that a thing? By walking through a Cadillac Fairview shopping centre, can we have a chatbot activate and come to life as a personal shopper/shopping buddy for us and connect us to promotions, events, and items using real-time inventory data?

Would be cool. If any developers are reading this, hit me up. I'd love to collaborate.

UI/UXVictoria Whang
Wedding invitation design
 I had the opportunity to design wedding invitations for a personal client which included invitation cards, map cards, and the RSVP cards.

I had the opportunity to design wedding invitations for a personal client which included invitation cards, map cards, and the RSVP cards.

 Originally the client asked for every section of the invitation to use different typefaces. We narrowed it down to two: Stylish Calligraphy Demo (cursive font for their names and headings on other cards) paired with Montserrat (body type).  I designed and exported for print in Illustrator.  The wedding colours were a cool minty blue with gold accents. We wanted to incorporate them into the invitations as well while maintaining readability with mostly black font. For gold foiling details, the printing agents required that the elements be exported in Pantone black and be set as the top layer in the PDF document.

Originally the client asked for every section of the invitation to use different typefaces. We narrowed it down to two: Stylish Calligraphy Demo (cursive font for their names and headings on other cards) paired with Montserrat (body type).

I designed and exported for print in Illustrator.

The wedding colours were a cool minty blue with gold accents. We wanted to incorporate them into the invitations as well while maintaining readability with mostly black font. For gold foiling details, the printing agents required that the elements be exported in Pantone black and be set as the top layer in the PDF document.

 We wanted to bring in the geometric gemstone elements into the wedding map card as well. I designed map markers as little individual gemstones. Originally, the gold was the only accent I used, but the client insisted on having mint elements scattered throughout the invitation pieces so here, I chose to add it to the map. I thought that using the colour on words would affect readability.

We wanted to bring in the geometric gemstone elements into the wedding map card as well. I designed map markers as little individual gemstones. Originally, the gold was the only accent I used, but the client insisted on having mint elements scattered throughout the invitation pieces so here, I chose to add it to the map. I thought that using the colour on words would affect readability.

 The geometric elements were pulled into the RSVP cards as well. 

The geometric elements were pulled into the RSVP cards as well. 

 The bridal party asked for activity cards for the bridal shower. I designed them similarly to the invitations that the bride originally requested.

The bridal party asked for activity cards for the bridal shower. I designed them similarly to the invitations that the bride originally requested.

FreelanceVictoria Whang
Gifs: both good and evil

Sometimes at work, I have to look for images for articles we publish online. Either the writers have a hard time finding relevant ones, or the images they've found aren't inclusive enough or engaging enough. It's not often, but it happens.

Because our audience is mostly students between the ages of 17 and 25, GIFs tend to be pretty popular. I personally, don't like to include too many of them because it makes complying with AODA web guidelines a bit of a stumper sometimes. But here I go, on a freaking journey to Giphy.com and the mundane act of scrolling through pixelated fast moving pictures, usually with content I don't even know where it comes from, makes me feel totally carsick. I'm usually rolling my eyes and wondering why does this have to be so painful.

Here's the thing though. I love making my own. I pull the assets into Photoshop, create a timeline, and set each layer to a frame...so quick and simple. And afterwards, I have a super cute GIF I made! Of course, if it was placed in the scrolling gallery of Giphy.com, I'm sure I would roll my eyes at my own product. But as a standalone, oh-my-gosh how fun.

 

 Icons taken from  Flaticon  as part of a design intern application

Icons taken from Flaticon as part of a design intern application

 GIF for a birthday email campaign at  IGNITE

GIF for a birthday email campaign at IGNITE

UI/UXVictoria Whang