Victoria Whang | Product Designer
Victoria Whang | Product Designer

Blog

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

Posts in UI/UX
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
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
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