Introduction
GeniusBot
The task of this project was to design the marketing landing page for a web software startup product, which uses artificial intelligence to answer questions and provide information from the user’s past email correspondence. The purpose of the landing page is to introduce users to the product and convince them to sign up for a free trial membership using emotional design. Additionally, I designed a marketing video that would play on the hero of the marketing page and a social media ad.
Key Project Data
Role: UI/Visual Designer, Video Editor
Tools: Figma, Adobe After Effects
Ideation
Sketches
After the client and I decided on the general tone we wanted the project to convey, I got to work sketching ideas for the layout of the marketing page. This page was meant to spark joy while also feeling innovative. To invoke the joy of the piece, I worked with lots of creative, fun shapes. The innovative nature of the design came with bold, clean lines and large contrast in the size of elements.
The primary goal of this project was to design for a specific emotion. I started off by creating two different style tiles of different moods that could guide the project and presented them to the client for feedback and direction. The first style tile was based on the idea of joy — it included bubbly, fun shapes and bright colors. The second style tile was driven by the idea of innovation — it was meant to be clean, modern and cutting-edge. For this mood, I included sharp edges, stark contrast, and a subtler color palette.
Style Tiles
The client liked both directions and couldn’t decide between the two, so they asked for a mix between both. This led me to create a third style tile that fused the initial two ideas.
Design Process
Wireframes
Once I had a general idea of the layout of the landing page with my sketches, I got to work on wireframes. Since the timeline for the project was fairly short, I jumped to high-fidelity wireframes. This allowed me to incorporate visual design elements into the wireframes to give a better idea of what the final design would look like. I incorporated lots of rounded, soft shapes and added an underlying pattern of a robot’s bolts to evoke a fun theme that would draw the viewer in. I also employed a high use of size contrast with the typography to create a sense of innovation.
Visual Design
Once my wireframes were complete, I moved on to the visual design portion of the project, where I would add color, imagery, and texture to the design. This is where a lot of the emotion I was trying to evoke would come from. The colors I chose, based on my style tile, added a lot of personality to the design. The bright, cheery nature of them added to the sense of joy I was attempting to create.
Marketing Video
Video
Using Adobe After Effects, I created a video to play over the Hero image of the marketing landing page. I made sure that the video began and ended on the same frame of the Hero image so that it could play on a loop at the top of the page.
Final Design
Reflections + Takeaways
Challenges
This project challenged me by making me fuse my two first initial design ideas (happiness/joy and innovation). It was challenging to stay focused on those initial designs and carry them through to the final product so that they did not diverge significantly from the initial mood board. It was also much easier to design for the mood of happiness than for innovation/cutting edge since the latter is much more abstract and hard to pin down.
Designing for Emotion
This project, with its focus on evoking emotion, was an interesting exercise in making design decisions with intention. I had to keep in mind the product I was working with as well as the emotion I was trying to evoke when designing. Overall, I think this is a very strong approach to designing and helped give nuance to my design decisions, allowing me to develop as a designer.