Summary

HelpSocial is a startup that provides social media management software for contact centers. The company has experienced a lot of growth since 2012, and they needed to define a lean design system that would be scalable as their software continues to grow. I was responsible for leading the design process and collaborated with the founder, marketing director, and front-end developer on this 5-month project.

My contributions

  • UI Design
  • Product Strategy
  • Wireframes
  • Final designs

High-level goals:


• Organize their styles library (color and typography)

• Establish their assets library (icons and UI elements)

• Scale back functionality


User constraints:


• An overwhelming amount of information and functionality

• The UI was cluttered and confusing

• Users didn’t relate to the current set of iconography

Exploration/Process

I organized the pain points in a cause/effect way. Because there was so much stuff, the design was cluttered and overwhelmed new users. I worked closely with the founder over the next few months to lay out a skeletal framework. For example in the social media card, I pared down each component to its most essential function and added back features as needed.

HelpSocial_OLDarchive

Original HelpSocial Dashboard

Wireframe

Wireframe of each component of a social media card

Below is an example of a social media card looked like before and after my redesign. This is a card that had specific content from Twitter, Instagram or Facebook. This content ranged from mentions to the companies or hashtags that were tracked. During this time we also consulted with the lead backend engineers to make sure my designs were feasible, and the changes could be made within our timeline.

HelpSocial_OLDarchive (1)

Before

Tweetcard

After

I used the 5W1H framework to drill down to the purpose of each section. This method is typically used in journalism but applied to product design it helped clarify the problem, explore possible solutions, and how to best measure success. The method is detailed below.

  • Why am I building this?
  • Who am I building it for?
  • When and where will it be used?
  • What am I building?
  • How could I measure it?

Using a framework like this is helpful because it results in clear actionable items that we can reference back throughout the project. We did a whiteboarding session of the 5W1H with each section of the new UI.

Once we laid out the basic skeleton of the new UI, the marketing director was brought in to help organize the color library. She gave me their brand guidelines and was open to new suggestions for a color palette. Together, we established a new color scheme that looked brighter on their website and marketing materials.

NewFullVersion

Redesigned HelpSocial Dashboard

Redesigned HelpSocial Dashboard

Account Profile@1x
Workspace@1x copy
Artboard 1

Redesigned Groups portion of settings

Redesigned HelpSocial Dashboard

The last step was meeting with the front-end engineers. The founder and I decided to use Bootstrap’s preferred icon set, Iconic. We didn’t want to overthink the icon set and wanted to keep in-line with what the developers were already using as their grid system. The developers asked me to send my sketch files directly to them instead of using Invision so they could have the source files. We did further refinements to my designs like choosing different column sizes for medium and large screens as well as animation transitions between different sections.  

Takeaways

Having discussions with the stakeholders and developers early in the project created a clear, succinct scope of work and informed us of potential technology constraints. Spending more time with each team in the beginning changed the look of the UI significantly early in the design stage which helped speed up the development and handoff later on when the UI was more polished. If more time allowed I would have gone back to conduct user research to get feedback once v1 was done to quickly iterate on problems we might have missed.