Victoria Whang | Product Designer
Victoria Whang | Product Designer

Blog

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

How do you enjoy your Nespresso coffee?
 Nespresso’s Grands Crus pod flavour guide

Nespresso’s Grands Crus pod flavour guide

Our office has a drip coffee machine as well as a Nespresso machine. I enjoy a cup of the drip coffee in the morning because it’s a quick cup, no-nonsense, all black shot of caffeine exactly when I need it and a cup of Nespresso in the afternoon because there is a decaf option available.

For those who enjoy a little treat every now and then, they invest a few extra minutes of the day into frothing up some milk for said Nespresso. They choose a selection from the five flavours that our office manager orders (based on history of popularity amongst employees) and proceed to select a button for amount of espresso to be dispensed.

If you are a Nespresso connoisseur, you probably already know how to navigate the difference between a ristretto, lungo, and espresso as well as what the little filled and unfilled cup icons mean before making your choices. I was not so educated in the ways of Nespresso brewing when I first started at PowerHub so I ventured into a little bit of fun research.

Users

  • Most employees (with the exception of 1 or 2 coffee fiends) are unfamiliar with the terms ristretto, lungo, and espresso.

  • The Nespresso flavour guide is quickly browsed while coffee has already started brewing (not unlike the backs of shampoo and conditioner bottles while using the toilet - minor entertainment of no importance).

  • The filled and unfilled cup icons are often interpreted as amount of caffeine in the pod, although no one knows how much the max amount is (and what the health consequence might be from exceeding it).

  • Pod colours are do not resonate any meaning to employees here.

MVP

From these findings, I applied what I learned about Nespresso products to creating a poster that will hopefully improve consumer knowledge of the product and help them drink better coffee according to their taste preferences.

 My new poster for the Nespresso Grands Crus flavour guide

My new poster for the Nespresso Grands Crus flavour guide

These are the five flavours that are available in the office. I’ve ordered them from top to bottom based on category (regular, flavour, decaf) and then in intensity level. I used a bigger font for the suggested mode of serving (compared to the original as published by Nespresso) so that it is easier to read and consumers can become more easily familiar with the terms over time. In the footer of the poster, I’ve included definitions of both "intensity” and “mode” in the hopes of educating users when they are making their important coffee decisions throughout the day. BTW, the accent colour I used is in line with our company colour (#84cf0a) to incorporate a little PowerHub branding with the Nespresso content.

What are your thoughts?

Collecting Slack Communities
slack_ui.png

Do you ever feel like you’re collecting workspace logos in Slack?

I began my journey in design about four years ago. I was working on a school project and because of conflicting schedules amongst team members, we downloaded Slack to communicate between classes. A little while later, I began working on-campus as a front end developer. They had a Slack channel I was invited to join so that we could communicate between its 200-something employees. Before graduating, I started volunteering for Women & Tech and we would have online meetings via Slack about upcoming events and women in tech that we wanted to interview for our blog. After graduation, I worked at an agency as a junior designer and soon after, at PowerHub as a product designer, both places where we had office Slack channels to communicate day to day.

Now as a product designer, working in the startup tech space, I look for opportunities to expand my network and learn from my peers in design to continue my momentum of growth and it seems that every tech/design community I reach out to has a Slack workspace and dedicated channels within that space to chat about similar topics of interest. You will note that I’m a part of six (6) communities in the image above, and that’s just the ones on my desktop Slack app…I have about 3 more on my iPhone (that I’m not super active in, or keen on being kept up to date throughout the day). There’s also a few with the same app integrations, for example, the donut app: is anyone else tired of the 🍩 asking you (sometimes multiple times biweekly) if you’ve had a chance to chat with so-and-so? I’m really sorry, but they never replied or I didn’t have time or no I just don’t feel like trying to reach out to a stranger this week, and I wish you would stop making me feel guilty about it.

Now I think it might just be a designer thing because the other day, our Director of Product ask me how I had so many workspace icons in Slack. He himself only has three (3).

So I ask you, what is your field of employment and how many Slack communities are you a part of? And does it ever feel like you’re playing a game of Pokemon (ie. you gotta catch ‘em all)?

Widgets - Currency Counter
IMG_0291.JPG

I recently started taking over one of the walls in our Solar meeting room for user testing screens, UI elements, reports, etc. On today's agenda, we have a new widget for PowerHub Lithium: the Revenue counter widget.

Initial questions

1. What is revenue?
2. What kind of revenue do our users experience?
3. What currencies are applicable for our users?
4. How do our users understand/wish to understand revenue?

Test subjects today

1. Customer Specialists
2. Product team BAs
3. Business Development Lead
4. CEO (via Slack...he's in Montreal today)
5. Front-end Developer
6. Development Lead

I tested five (5) options of revenue widgets and learned from some of the test subjects that revenue can never be negative (-). If there is a loss, we would need a whole other type of widget to account for it and call it something other than "Revenue".

Some of the feedback I received

  • Currency symbol ($) should be very clear and visible
  • Up and down arrows look like how stock market changes are visualized and easy to understand
  • Without currency symbol, it just looks like any number
  • Positive/negative symbols are confusing, as if it's calculated against a baseline and if so, what is that baseline?
  • Some currencies display their symbol after the number
  • Implementation would take longer to display currency symbol next to the number and also have the currency code labelled underneath 
  • Revenue may not always be money, in renewable energy it may be credits as well
IMG_6074.JPG

Next steps

  • Analyze all findings
  • Discuss results with product team
  • Narrow down implementation
  • Move forward with dev for release in the coming weeks :)
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