Soluno Website Reboot
Marketing & Interaction Design
The Soluno website before October 2018 was a great website for an unknown legal start-up, but it lacked a lot of functionality and back-end adaptability that was needed for a growing presence in the legal industry. There were many opportunities to increase web traffic through improved SEO, and there were many leads that visited the website who were not captured or converted to any sales processes. Between late 2018 and early 2019, my task was to re-design the website to be responsive; intelligently structured; and ensure that all user types (current customers, potential customers, current/potential corporate partners, etc.) could access the information they needed.
DesiGn: Before & After
Sample One: Home Page
There was a lot to improve with the original design. Navigation was incomplete, the list of features was not universally accessible, and there was no CTA that would encourage visitors to engage with our product. The new design includes a complete navigation with clear headings, and multiple opportunities for visitors to book demos and learn more about Soluno. The navigation remains sticky so that booking a demo and moving through the site is always available. The landing page is much more aligned with the rest of the brand, and guides each user type to the most relevant information using a rotating carousel.
Since these changes, demo bookings through the website has risen 222% and our bounce on our home page for new visitors has decreased 194%.
Sample Two: Pricing Page
Soluno's pricing model is not conventional for the industry, and the earlier version of the website did not help to make it easy to understand. Users were met with a wall of text that was verbose and distracting from what they truly wanted to know.
For the redesign I synthesized all the information into a few bullet points and accompanied them with simple icons that would attract the eye and break up the information on the page. Additionally, I programmed an interactive pricing calculator so that users could get an accurate estimate of the savings they'd enjoy with Soluno.
Sample Three: Billing Features
Soluno has some incredible features, however they were all buried in small, endless sentences. Even one of the founders admitted they had trouble finding information on this page.
I started by consolidating all content on the feature pages and grouping them into smaller sections that highlighted how they worked to the consumer's advantage.
I made custom icons to attract users' eyes, communicate the idea of the section quickly, and keep the visitor's eyes flowing through the screen.
See The Whole Thing!
Unless stated otherwise, all written copy, visual assets, design aspects, and information architecture were planned, created/curated, and implemented by me. It was a huge undertaking that I approached with the help of Webflow and my own HTML/CSS knowledge.
This project is constantly growing and changing as Soluno's brandand influence also grows. As the site manager, it is something that I am very proud of. I invite you to take a look at the live Soluno website!
Blue for security, trust, and experience. A calm and recognizable colour for our clients to feel a sense of security. This is complemented by orange; energetic, new, and stands out in a sea of the industry's blue and green palettes.
These colours charge each other up, and balance each other out. They reflect what customers can expect with Soluno; new ideas being executed with professionalism, precision, and energy.
Design program(s) used: Adobe Illustrator CC
The Soluno "Squarecase" is a simple design that reflects the company's desire to elevate their customers' law practices. The square shape and circular beginning to the arrow was inspired by computer circuit boards. The steps speak to the idea of ascension and improvement and separate the image into two puzzle pieces; blue (experience), and orange (innovation/energy) fit together to make something bigger and better: Soluno.
Throughout all mediums, the Soluno colour story remains consistent and uncomplicated.
Colours appear in the same order as they appear on the Squarecase; blue on top, white in the middle, orange on the bottom.
Blue often appears in the form of a gradient to create a peaceful transition between items. Orange is the primany accent colour in most instances, and also appears in "orange slices" of various alpha levels as a graphic accent.
The brand opts for white/light neutrals to create a bright and open effect.
The Halyard typeface is the primarily used, with various weights to dictate visual hierarchy.
Photographs are preferred for most visual content, although I also developed a set of high contrast assets to be used in digital content.
Both online and in-person, Soluno is becoming a recognizable presence in the legal industry. I attribute this mainly to my efforts to make the brand simple, consistent, and forward-thinking while remaining familiar to the industry. Many customers have remarked that they associate orange with Soluno even when they are not in a legal-tech setting.
I noticed the true positive effects of a brand that communicates openness, professionalism, and energy during Soluno's most recent trade show conference; where many attendees would use our branded booth as a meeting point, as it was the only one out of almost 100 exhibitors that could be described as "The Soluno booth... you know; the orange one."
Soluno's original booth was no longer suiting the needs of the company. The styling was simple and no longer matched the updated brand. Devlos Software also growing as a company, and so my marketing team could afford a larger exhibition booth that truly represented our product.
My task for this project was to lead the design and deployment of a new trade show display that could be arranged for multiple different booth formations; communicate the information customers wanted to know; and remain consistently branded with the rest of our presence.
Modular Display Layout
Soluno attends around 13 trade shows a year, and all exhibit spaces allocate different booth sizes. My team started by deciding on the essential equipment and information that needed to be available, and then mixed and matched the pieces to suit each potential booth shape.
Once the general layout was agreed on, the individual elements of the booth needed to be designed and/or ordered. We worked towards outfitting the largest possible booth dimension, as all smaller designs would be a subset of those materials. High fidelity mock-ups were made so that the sales team would be able to arrange the booth in accordance to the vision.
Panel graphics were designed using Adobe Illustrator CC.
Mockups were created using Adobe Photoshop CC.
To populate the booth with takeaway sales materials, I worked with my part-time copywriter to develop multiple different flyers and collateral. The largest undertaking was the production of our two-spread marketing brochure, and the most popular print piece was our comparison chart; which displayed Soluno's abilities against our main industry competitors.
Brochure was made with Adobe InDesign CC.
Product Comparison Chart was made with Microsoft Excel and Adobe Illustrator CC.
All other print material was made with Adobe Illustrator CC.
The video content for the exhibition booth was intended to achieve three goals: draw attendees' eyes toward our booth, quickly explain what Soluno is in case they are unaware, and be a potential conversation starter between attendees and our sales team.
There were three screens to populate in our largest booth layout. The front demo station would be displaying our website when a demo was not taking place, so no video content was needed. However, the secondary demo station was meant to be a more casual family-room style, and so a long-form "Saturday morning cartoon" style video would be playing there until it was needed for a live demonstration. The third video would be on a constant loop for the entire show, and would be a quick "explainer video" to draw visitors in because of its constant exposure.
"Daniel" Cartoon Video made with Procreate, Adobe After Effects CC, Adobe Illustrator CC, Adobe Premiere CC, with illustrations by myself and voice work by Justin Krawczyk.
"Meet Soluno" Explainer Video made with Adobe After Effects CC.
Everyone loves a good giveaway, and I wanted to make sure that we spent our money on something that visitors would enjoy and find useful, with the added benefit that they would also be mini advertisements for our product when they brought them home or to their office.
We settled on chocolate coins embossed with the Soluno logo; the team felt this worked on multiple levels. Soluno is a legal accounting product that deals with money, chocolate is a crowd favourite, and having the coins embossed is a fun way for people to remember our product.
We also selected post-it notes because those are one of the most useful products that is also highly likely to be taken to the attendee's office instead of thrown out or given away to others. Each post-it note also acts as a tiny billboard for Soluno, so our brand impact would last long after the show is over.
I worked with my team to order booth furniture such as the coffee table, accent plants, stools, and podiums. For larger shows, we opted to rent the couch on a show-by-show basis instead of paying to ship it to each venue. I also helped lead the logistical team that took care of taking all the materials from head office to our inaugural venue in Chicago, IL.
Prior to 2020, Soluno's main source of sales was via a collection of external consultants who would recommend our product to their clients. However these consultants took a 20% cut of product sales. If my team could increase web-driven leads, conversions, and sales that had no affiliation with consultants, Soluno stood to make more profit off of each sale as well as increase the company's overall sales.
After the success of the "Meet Daniel" video that premiered at our first 2020 trade conference, my marketing team decided to expand on the cartoon world of Daniel, and explore the trials and tribulations of running a law firm through the eyes of five characters; Daniel, Amy, Aisha, Ed, and Justin. Each of their stories is inspired by real customer testimonials, and spoke one of the driving values that influence law firms.
There are three main aspects to the Solunoverse campaign:
- Five 50-second video ads introducing a character, their struggle, and how an aspect of Soluno helped them with their problem.
- Written digital content that related to each of the characters' values.
- A series of live webinar sessions that highlighted features that would appeal to each of these personas.
Over the course of about two weeks, me and my part-time team worked to design characters, write and edit a script, storyboard each video, and collaborate with voice talent to get the necessary audio assets.
For the visual content, we decided to do a live drawing of the storyboard (similar to "whiteboard style" videos seen on the internet), and cut it together to give it a semi-digital, fluid appearance.
Storyboards drawn with Microsoft OneNote.
Voice narration provided by Justin Krawczyk and edited with Adobe Audition CC.
Once the storyboards and audio was approved, I set out on the task to create and edit each video. These videos had to be effective both with and without audio, and so the decision was made to add captions to the video. The goal with editing was the speed up and cut together the live drawing to sync up with the existing audio content. Some technical challenges arose when the timings planned in the storyboard proved to be unrealistic with the audio, but ultimately this resulted in a product that was cut together more intelligently.
Live drawings made with Procreate and recorded with Record it! App for iPad.
Videos edited with Adobe Premiere CC and Adobe After Effects CC.
These videos are set to be distributed over all of Soluno's active digital mediums; Facebook, Twitter, LinkedIn, and on the Soluno website. Each video will be promoted in accordance to an unspecified budget. Viewers of the video can follow a link to a targeted landing page, where they can learn more specific information about the product, and book a demo with the software.
This aspect of the project has just started and is expected to take 2-3 weeks to complete. For this portion of the project, a collection of five thought pieces will be written. Each of them will relate to the subject each of the Solunoverse characters are concerned about. This content is set to be published directly onto Soluno's website blog over the course of 5 weeks, and be promoted concurrently with the Solunoverse videos.
The benefits of adding written collateral to this campaign is two-fold: firstly, we can distribute this across all our community platforms including social media and email. This will help re-capture an audience who may have lapsed in engagement, as well as drive readers to our website. With luck, a portion of these readers will spend a little more time exploring our product website and begin a sales cycle with us.
Secondly, these articles will act as newsletter articles to send out to our Mailing List and other channels to promote the third branch of the Solunoverse campaign: the webinar sessions.
This phase of the project is not set to begin until after the written content is complete. Once this phase has begun, its will consist of a series of email and social media advertisements promoting the upcoming Webinar sessions. The Solunoverse videos will direct viewers to a sign up page for the webinar, and the written content will be appended to have a webinar sign-up CTA at the end of the article.
This webinar series is intended to show potential customers a glimpse of Soluno in action and how it will benefit users with all five of the Solunoverse values. Specifics of this project will be decided soon.
The ApolloCUBE is the hypothetical flagship product for the Apollo line of lighting products. These lights are aimed to be modular and multi-functional lights that gradually change the colour of its light throughout the day in order to mimic the movement of outdoor lighting.
The lights can be connected to a phone app that allows a user to toggle the light on/off, adjust the colour, or connect multiple lights together so that they can be adjusted together.
The mid-fidelity prototype we put together was part of a 12 week project with my 5 teammates, and was designed to work as a shelf and productivity tool as well as a light.
Transition video made with Adobe Photoshop CS6 and Adobe Premiere CC.
ApolloCUBE and the hypothetical Apollo line of products is inspired by the Greek god Apollo, who was said toguide the sun in the sky every day. This has a very direct connection to ApolloCUBE's primary function brand logo is a simple one - transitioning from energizing white/blue light in the morning to warm and relaxing orange light in the evening. The final 'O' is accented with a gradient orange-to-yellow, and appears to be a light surrounded by the four sides of the CUBE's walls.
For the colour palette, white was chosen as the main base colour as it is cleaner and more strongly associated with health and wellness. For the accent colours I also took care to choose more muted or wellness-associated colours to give the product a look of peacefulness and productivity. Orange was chosen as the primary accent colour, and a secondary yellow was added for gradient or smaller accents. This was complemented by a confident blue and a softer blue counterpart.
The packaging for this light was intended to be easily replicated and changed as different Apollo light models were released. As they would likely be stacked in a merchandising situation, I left the lid relatively clear. The model identifier is clear to see, and the copy on the side of the package clearly states the advantages of the light. The cube outline that wraps around the box's edge could be replaced with a high quality photo of the fully-realised product, but since my team lacked time to build the product to the necessary specifications, I opted to make a minimal graphic.
Packaging graphics made with Adobe Photoshop CC and Adobe Illustrator CC.
I designed the phone interface to be bright and high contrast. It is not a complicated interface that users can quickly move through with very little mental fatigue.
This interface didn't require reinvention of the wheel. I took existing conventions from phone operating systems (such as slider toggles). I also pulled inspiration from Car Apps that allow users to turn their cars on and off remotely.
Given more time with this project, I would add an additional screen to communicate light use habits to users, and flesh out the light registration process.
Screen mockups made in Adobe Illustrator CC.
Pitch & Promo Materials
The first advertising campaign for this conceptual brand was based around the tagline "Light, years ahead." This tagline spoke to the functionality of the light as well as the company's progressive ideas about workplace wellness.
We wanted this product to appeal to young professionals who are just beginning their career, and so collateral needed to have an element of fun and energy. I used a vapourwave aesthetic to guide my design, and attempted to keep the look of it light, despite grappling with the prototype photographs.
When our team was chosen to pitch to a panel of judges, we were also required to some up with comprehensive diagrams and a full start-up pitch, which I prepared.
ApolloCUBE prototype diagram made in Adobe Illustrator CC.
"Light, years ahead." poster made on Adobe Photoshop CC and Adobe Illustrator CC.