Victoria Whang | Product Designer
Victoria Whang | Product Designer


Thoughts that didn’t make the cut on my Medium page

Posts tagged ui
Collecting Slack Communities

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

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

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

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

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.

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...