Role

Lead design of both the company's branding, as well as the experience design (UI/UX) of a new website building platform.

Approach

This was a massive project that involved redesigning a website building platform from the ground up. What would make this platform unique is building strategy into the site design based on where a user's business is at. This would effect the website features that would be recommended to them. Another unique aspect of this platform is how it guides users to making effective design choices by helping them stick to their selected (or created) style guide.

There was much to do, but the first step was to create a memorable brand.

With a name like Heroik it's easy to take things in a cheesy direction, so the goal was to create a mark that would evoke feelings of strength and support without being over-the-top. The first step would be exploring icons.

heroik-notebook01heroik-notebook01

The company's mission focuses on the idea of supporting users to help them stand out and "be the heroes of their businesses". After exploring that visually the brand icon landed at using the shadow an H would cast if it were in the spotlight. Literally showing that Heroik exists to shadow the user and prop them up. Along with a strong wordmark the logo was born.

heroik-logoheroik-logo

With the branding taking shape it was time to analyze where early designs of the product had been, and start to explore a modern approach.

heroik-explorationheroik-exploration

After researching what the market was used to experiencing with website builders, and comparing those to modern interface expectations, it was decided to go in a direction that would combine multiple ideas. 

Users would have access to mid- to high-level settings within a sidebar that would dynamically adapt to whatever the user was looking at, while editing controls would be at the click of a mouse within their site template.

All while editing exactly how their site would look live.

Some of the product goals Will was able to accomplish:

  • Create a system of protecting a user's style guide by informing them when they're making design choices that breaks their style.
  • Design a way for users to connect to third party integrations within a few clicks.
  • Give the users the ability to easily add gradients and image effects to their images.
  • Create a product flow that guided the user to visually know when they're editing entire website sections, rows, or columns.
  • Design a system of designing for website responsiveness that allows changes made to a user's site in mobile device view to set mobile code rules that only apply to mobile and not tablet or desktop view.
  • And much more.

 

With early user testing areas of improvements were identified and were addressed quickly, and were able to be rolled out to the product prior to its launch.

With the months of planning, research, iteration, and user feedback what resulted was a powerful website builder that gave users a visual, intuitive way to build websites, in an environment that provided knowledge and guidance at all the right times.

"Within minutes I can create beautiful webpages that are perfectly on point with my brand and automate them. It's such a time and money saver because it isn't complicated."

"You've given me all the pages I didn't know how to create, and instrcutions that I think even I could follow. This is absolutely BRILLIANT."

Below are examples of product walkthroughs along with various interaction designs.

heroik-walkthrough1heroik-walkthrough1
heroik-walkthrough2heroik-walkthrough2
heroik-walkthrough3heroik-walkthrough3
heroik-text_editor_processheroik-text_editor_process
heroik-sidebar_processheroik-sidebar_process
heroik-editing_elementsheroik-editing_elements
heroikexample-device_editingheroikexample-device_editing
heroikexample-photo_gradientheroikexample-photo_gradient
heroik-laptopheroik-laptop