Because Marketing is a Startup in the ecommerce space that specializes in no-code dynamic messaging. Since building the first site for the company Because have expanded past their original offering which has led to the messaging being inaccurate. The sales team has also come up with a more consistent pitch and Because wants to be able to change their website to reflect this new story.
Visual Design, Webflow Development
Summer 2023
Ellen Hinds, Wendy Li, Caleb Jobe
Project at Because Marketing Inc.
The current Because Website is out of date and needs to be updated to reflect current offerings and sales messaging.
Redesign the current website to match the new messaging by using the previous version of the site as a starting point. The website should also be designed in a way where it can be developed without help from the Software Development team.
As the product designer at because I took a lead role in the second iteration of the website. My job was to manage the project in addition to assisting with the design of the website and the development on Webflow.
Budget
As a startup Because Marketing wanted to reduce costs by relying on in house designers for both design and development of the website. This meant that the website had to be done in Webflow since there were no developers involved.
Timeline
Since in house designers were being put on the website project it was important to have a fast turnaround. If the website were to take to long it could delay other company projects. In addition to this Sales was missing out on opportunities driven by site traffic since the old website did not reflect all the current offerings.
Because of the timeline restraints, we created a notion one-pager where we defined the good, better, and best versions of the website. We reviewed this with Marketing as well as our CEO Ashland Standbury. After some revisions we decided on building the good version first in order to get the website with updated messaging out as soon as possible. For the good version we worked on reusing as much as possible from the old site to cut down on design and development and focusing only on redesigning key sections.
The target users are people working in marketing for e-commerce that are looking for a no code solution to customize their website. As Shopify users, our primary audience is often overwhelmed by app options so creating a memorable experience was high priority.
During the first iteration of the marketing website, I lead the marketing and design team in creating a brand that conveys Because's core values. This involved figuring out brand positioning, values, and aesthetics. In the second version of the website we focused on refining the branding to make it feel more trendy and modern while still retaining the colorful retro identity. We also updated the colors used on the site and in graphics to improve readability and overall contrast.
We created wireframes to give us a visual starting point and an idea of what features we needed to include. We also made sure to get approval on the general structure and story at this stage.
To maintain low expenditures and make sure that the graphics suited the business visually I created custom motion graphics for the website. This was done with a combination of Cinema4D, Adobe After Effects and Premiere Pro.
Unused Logo Design, AE
Graphic, AE + Cinema4D
Hero, AE + Cinema4D
Because uses bright retro colors to stand out from the minimalism often found in the e-commerce community. The font is bold and readable with a variety of weights to create cohesive hierarchy.
Since we would be working as designers and developing the site in webflow ourselves we decided to save time by creating Semi- High Fidelity designs. We wanted these designs to communicate the overall aesthetic and layout of the site but did not spend too much time on making sure they were pixel perfect.
After the High Fidelity designs were approved, we moved on to building the live site in webflow. This involves an iterative process of reviews and fine tuning. To finish up the good version we made sure to check our initial one-pager to see if we achieved our goals.
The full site is live at trybecause.com
*The live site may not fully represent the original design due to client requests.
Despite only having the good version of the website currently implemented the new website has been a huge improvement for Because. Now potential customers are brought to a site that accurately displays the offerings from Because and customers booked through the website come into demos more informed and excited about the product.
During this process I learned a lot more about project management. I was in charge of scoping the project and making sure everyone involved knew what needed to be done. In addition to this I think that I got to make use of what I learned from the initial design of the website. One of my key takeaways was to make sure and focus on avoiding scope creep. While it’s tempting to work towards perfection when designing keeping in mind that the company has limited resources and not doing more work than was absolutely necessary helped keep the turnaround on this revision much shorter.