Focus: Features page redesign, development of the page in Webflow, re-imagination of their brand identity, custom 3d modeling & rendering
Full creative direction
When tasked with this challenge, Sendlane admitted that they're looking to redesign their site entirely—so when tasked with the challenge, they asked me to reimagine everything I knew about their style.
I was tasked to redesign the features page in a prototyping tool of my choice and send the design file over. But, I wanted to go one step further and develop the page myself (knowing they needed help with the entire site.) Check out the final page here
Brand Identity (illustration, icons, colors)
While contemplating which style to go for, I knew one thing for certain: I wanted this style to push the boundaries of what we usually see now in this industry. I’ve never been a fan of design “trends” or what’s popular right now; brand identity should be an extension of a company’s unique voice.
I envision Sendlane’s brand identity to be friendly, cool, and witty.
In the header you’ll see a 3D modeled scene. I modeled the scene myself in Adobe Dimension and took care in trying to convey an abstract message of “maxing” your ROI. The letters “R”, “O”, and “I” rise in the scene as a nod to a positive increase in investment, and the envelope represents the general idea of email marketing and marketing automation. I thought about adding in a laptop & phone render to hint that Sendlane does more than just email, but I found it cluttered the scene too much.
(Note: as I write this, I'm exploring an R2 where the letter "I" sits on the cyclinder behind the "O". This way, the message of return on investment looks like it's rising.)
Below you'll find the base model I created, as well as the final, rendered version. I can't stress enough how much fun this part of the project was.
As much as I love designing in 3D, I thought that 3D icons would be too much for the site. By mixing in flat icons with an added gradient, we keep the immersive style without overdoing it. Plus, we can load these in as .svg files, so the site would load much faster.
Sendlane Pink plays perfectly into the immersive, abstract theme that I tried to create! To do it justice, I paired it with a complementary blue, and contrasted that with a cool-toned black.
With those three primary colors, I created some secondary + tertiary color—which consisted of monochrome variants of those 3 colors. These come in handy when creating illustrations and other assets that need more color variety.
Another major component of a well-built brand identity is voice. Using your current web copy as a base, I wrote some web copy that adds some flair and personality.
UI/UX of the Features page
When I read “use the preferred design tool of your choice”, I knew that I had to use my power duo: Adobe XD and Webflow. I can work in most design tools (Figma, Sketch, Photoshop, etc…) but by working this way, I could quickly mockup my ideas, and then have a solid foundation for what I’m building to use in Webflow.
I wanted to keep this area nice and open to draw attention to the “ROI” copy point and supporting graphic. I’m personally over how “sectioned” most websites have become, with the different colored backgrounds and hard lines—they feel pretty cookie-cutter and too guided. I, instead, wanted a light, welcoming feel here.
I imagine a user comes to the page with two clear intents:
- Learn more about a specific feature
- Browse all available features
With that in mind, the “view all features” link anchors to the features section towards the bottom of the page. So, in the case of wanting to view all features, it’s not high effort to get there from the get-go.
Here, a user can fulfill that other intent—learn more about a specific feature.
You’ll see careful use of hierarchy here with these components:
- A dropdown where someone can comfortably switch between features
- An abstract image that visually supports the feature (I’d like these to be more specific to the feature, and show how things work, but I didn’t have the time to pursue this)
- The feature name
- Copy that intros the feature
- Bulleted copy points that describes the feature further—with cool icons instead of bullets because what is this - 2003? :)
- Slight on-scroll animation to ease the points into view
On change of the feature, there would be a subtle transition animation and the image + copy would change. I designed for one feature this challenge, since time was of essence.
All features section
Here we’ll see a grid view of all 9 features! I added a light gray border to improve scannability, and each “learn more” link anchors back to the feature section (and would activate that selected feature.)
Also, very subtle, but on hover of the cards, the icon scales (adding to that immersive feel that I’m going for.)
Lastly, we have the CTA section. Nothing fancy here; I wanted to keep this familiar because the whole point of this page (I believe) is to direct the user to the demo page—which happens by clicking that button.
I did add a nice fade-up animation to catch the eye, though.
All in all…
In this design challenge, I did my best to emphasize:
- My ability to, not only, design static mockups, but take them all the way to completion with Webflow
- Design for all breakpoints (mobile, tablet, desktop, widescreen monitor, nokia flip phone if you really needed it)
- Showcase my strength in visual design by creating icons, product mockups, and 3D scenes
- Display my confidence with creating and maintaining a brand identity throughout the page
- Show my strong skills in UX design by thoroughly thinking through page intent and placing components accordingly (and designing for how they come into view through micro-animations)