Tangram Flex is a software startup out of Dayton, Ohio, providing system integration services to Department of Defense customers and developing their software integration platform, Tangram Pro™. As a marketing and design intern, I strategized, designed, and developed a new website that gave the team direct control over the site and applied updated branding and messaging, amidst other projects. My roles in this project were:
Website Designer
Collaboratively concepted, strategized, and designed high-fidelity compositions for the website in several phases using Miro and Adobe XD
Webflow Developer
Built the website design in Webflow over multiple phases of the project, and learned a lot along the way
Tangram Flex's website did not adequately guide visitors to understand what the company does or apply updated brand standards. Further, the Tangram team had little control over site updates due to restrictive templates.
The objective of this project was to update Tangram's site visuals and verbiage and implement a low-cost, high-control solution to manage the website as we continued to grow our marketing and business development efforts.
Single-page MVP strategy, design and Webflow development
Five-page site expansion strategy, design and Webflow development
More in-depth pages that target more of the target audience
Tangram Flex's internal marketing team was made up of a handful of cross-functional employees. Working together, we strategized a multi-phased approach to design and develop a new site that we could manage internally as the company continued to evolve. Phase 1 was a simple one-page microsite that allowed us to rethink our content and more easily get an updated site launched.
Industry Research
We started this process by taking inventory of how companies within our industry organized and branded website content. We found that many companies were targeting their audiences with industry and benefit-focused content structures.
Content Strategy
Our priority for the first phase of the site was discovering a cross-section of content that is valuable for viewers and quickly executable for our small team.
This site map was our first try at a multi-phased production process that we could manage internally alongside our other projects. It organized content for the home page MVP as well as the later pages, but overall had a similar content setup to the existing site.
With our site map and inspiration from relevant, well-designed tech company sites, I concepted layouts for the pages of each website phase, keeping in mind that I would also be the developer for these concepts.
Jumping into XD, I took brand typography, colors, and elements such as the tangram puzzle shapes to design a website that fit Tangram's refreshed brand image. The primary goals for this design were to present copy clearly and selectively use visuals that help the viewer understand the company's complex purpose. In addition to exploring the home page design, I designed versatile components that could be easily reusable down the road.
Tangram Flex previously managed the website through an agency. This method was costly and our team didn't have the control we wanted to quickly evolve marketing efforts. In order to decrease costs and safely put control in our hands, we decided to rebuild our site using Webflow.
Developing in Webflow
Due to timeline commitments, we started design and development on a Monday and launched on a Friday (unsuccessfully due to DNS issues, so we actually launched about a week later). I tested out Webflow during the platform decision-making process, but developing the MVP site was my first real experience using this platform.
At this point in the project, our team began working with a marketing consultant to rethink how we spoke and wrote about the company and its offers. Our learnings influenced our team enough to scrap the work we had already done on the site and recreate home page content. Despite months of slow but steady work, I designed and developed the MVP site in one week.
Once Phase 1 of the website launched, it was time to reconsider next steps. We went back to our initial site map to revise phases two and three so our newer messaging concepts would be highlighted. From there, we reconsidered what each content section would communicate and moved into wireframes.
With some extra marketing knowledge in our toolkit, we revisited our original site map concept in order to apply our new copy approaches. Instead of being a product company, we became a software integration services company. Further, we planned to clearly address our approach to these engineering services and the intricate link between our services and product.
The most influential learning from our work with the marketing consultant was how to implement the buyer journey into all of our writing and design projects. Our navigation and the flow of content on every page was framed to address the awareness, early understanding, late understanding, consideration, decision, and loyalty stages of the B2B buying process.
Once we strategized content for the website expansion and considered where video and still content would be used most effectively, it was time to render our ideas into wireframes. These compositions would guide the design and copywriting efforts in the following weeks.
Working with another designer, we began fully designing the pages. I eventually moved into Webflow development as the illustrations and copy were being completed so our team could meet the internal deadline. Finally, with some last-minute changes under our belt, we launched phase two of the Tangram Flex website. Check out the current, live state of the site.
Our small team is getting ready to start writing content and designing additional pages for Phase 2.1 of the Tangram Flex site. So far, our team is very happy to have increased our website leads since launch day. A more robust and targeted Phase 3 is also on the horizon as the company continues to adapt messaging to better suit the target audience.
Working as part of a multi-functional internal team to execute this project brought some surprises. We researched, concepted, designed, reconcepted, redesigned and developed simultaneously, launched, and then began strategizing and designing the future of the site. This meant I had to lessen my grip on the linear web design process I was taught in school. I also learned that designing a website alongside diverse professionals leads to a more refined product. Finally, I learned that strategic answers really can be simple, but the process to get there is never as simple as the answer itself.
