Stronger relationships for a better business.

Smash Solutions

The client and brief

Contribution

  • Company rebrand
  • Product design
  • Print collateral
  • Prototype design
  • Iconography

Tools

  • Adobe Photoshop
  • Adobe Illustrator
  • Sketch
  • InVisions

Smash Solutions is an innovative software solutions firm committed to creating personalization through automation. When they approached my team at Codera, they wanted help with a 40-day rapid MVP exploration to think through the most influential business relationship management ecosystem inside one easy-to-use product. They also needed help rebranding their aged identity and collateral.

My responsibility on this project was to work with my team and execute a modern and refined identity, print collateral, marketing material, and interface design. I also assisted with user experience discovery and user flows.

Smash logo sketches

The identity:

Rebrand the company to portray a more tech-forward business.

The project began by exploring a rebrand that would help the company reposition itself as a tech-forward software as a service provider. Through this exercise, my team wanted to explore combining a pair of the letter “S” together with clean, minimal lines. Through the exploration phase, we considered different shape combinations. The client also wanted to have a logo mark and logotype for their identity. Below is a time-lapse of the identity exploration.

view time-lapseview brand guide
Smash logo variations

Quick user flow and low-fidelity:

Create a fast user flow to immediately start working on lo-fidelity wireframes.

Due to the timeline of this project, it was imperative to quickly execute a user flow and begin work on visual assets to provide the client with marketing materials.. Our team set up a video meeting and got to work. I was responsible for spearheading the dialogue and lining out the core features we wanted to highlight. Next our efforts focused on a small collection of lo-fidelity wireframes of the interface.

Quick user flows

Low-fidelity wireframes

Smash feed wireframe on mobile
Smash wireframe view of mobile design
Smash wireframe on mobile layout
Smask wireframe of workflowSmash wireframe of settings

Streamlined feed and customization:

Streamline all actionable content in one place and give the user customization in the product.

The feed is where all this information can be displayed and explored. This helped centralize the latest content into one place. I used the hexagon shape of the mark throughout the app to reinforce the brand within the product. Ample white space was applied to help the product breathe.

Moving over to the desktop experience, I focused on a widget experience where the user would have more control over their interface. Due to certain restrictions in the timeline, this couldn’t be done in the app. However, the interface matches seamlessly between both device sizes.

Mobile feed design

Smash feed 2.0 in iPhone mockupSmash card 01Smash card 03Smash card 07Smash card 02Smash card 05Smash card 06Smash card 04

Desktop and mobile layouts

Smash dashboard wireframe
Smash desktop interface

Expandable mobile menu

Smash mobile walkthrough of smash bar menu

Coice control automation:

Use voice to simplify and automate tasks and functions within a very complex CRM tool.

To add more value, we took two days to explore a Smash Voice Assistant concept in 2017. The goal was to help give the client a competitive edge over other CRM platforms. We cut out traditional UX processes to put pixels to the idea. This exploration is rough and not refined. We first wanted to see if we had a sound idea before digging deeper. Funding was lost before we could explore it further.

Hand holding iPhone with smash interface mockupSmash voice mockup with hand holding phone

Take action fast

The Smash Voice Assistant's job is to help users with day-to-day tasks that could be accomplished in seconds. The logo mark is the element that users would tap on to enable audio listening. Pulses would emit off of the logo mark as the user spoke to show the assistant was listening visually. The user would tap the icon again or pause for 3 seconds to stop listening.

Smash voice query on mobile devicesMockup of a voice query in Smash app

Refine your action

Once the user has found the item they want to see, they can provide additional details. Invite others, change the date, title, or most anything else.

Smash voice query on mobile phoneQuery of voice command on mobile phone

Selectable action items

Smash Voice Assistant provides the user with a list of names they have in their contacts that fit that person's name. Anything underlined is something the user needs to take action on.

Challenge: This could conflict with the global understanding that underlines in interfaces are links or clickable actions.

Smash voice query with tags embedded into commandsSmash voice query on mobile design layout

Finishing touches

Finally, the user can complete the invite so they can go about their day and have confidence everyone will be in the investor call.

A query log is collected on the main voice menu, so if the user needs to bring that information up again, they can tap on the last action item and recall it.

Smash voice query with tags embedded into commandsSmash voice query on mobile mockups

Conclusion - tight deadline, effective results:

Providing effective assets that will help raise capital.

Credit

  • Me - Brand development, product design
  • Jefferson VanBloem - Project manager
  • Ben Meyer - App and brand strategy
  • Lawrence Sowell - App strategy

After a total of 6 weeks, I was proud to look back at what we accomplished in a short amount of time. Our team was small and we had to stay focused on providing assets to our client that they could use in their MVP pitch for raising capital. Overall, it was a great project to work on.

Finger pointing up icon
go to top
light
mode
dark
mode