%402x.svg){kind=icon}
Initially, Seismic™ was interested in adding content to their current website that communicated their new market focus on manufacturing and worker safety as well as new imagery showcasing their new product and how it functions. After our first design review, we decided to completely redo their website to better reflect their dual market position and bring a revitalized energy in their messaging with clear product details and call to action.
Working completely remotely, I worked with Seismic™ stakeholders to assess content needs, current collateral, and reviewed Seismic’s established brand identity guidelines and strategy. I created a new sitemap with low then high fidelity wireframes, then designed a few updated visual design themes. When the design direction was approved, I began extensive work on generating new images and graphics as well as copywriting content for each page. With weekly design reviews, I continuously revved the content and design over several weeks until the final design was reviewed and approved by all Seismic stakeholders. I then moved platform hosts and built the new site, testing each component and touchpoint to ensure a smooth user experience. With one last run through with stakeholders, the new Seismic™ website was launched live with an immediate increase in site traffic and engagement. Finally, I delivered a collateral folder with all files for use in future projects as well as light post-launch website content updating and maintenance education.
PROJECT BRIEF AND CONTEXT
Design a new website for Seismic™, a soft robotics apparel start up based in Silicon Valley.
Seismic's current website was outdated, only showing their initial product which targets the wellness market with limited copy explaining the suit functionality. The new website needed to built on a new hosting platform and include a renewed focus on their new suit for the worker safety and manufacturing market with in-depth product information and all new imagery and updated visual language.
Create a new site which focuses on their new product for worker safety and fleet suit data, with detailed information on what the product is, how it works and its value. Include suit and data preorder CTA, generate high level data dashboard UX/UI screens, and produce all new images of their suits, data output graphics, icons and how-it-works animations as well as comprehensive copy for each page.
Potential new investors and partnerships, individual consumers in the aging, wellness and labor markets.
CHALLENGES AND PROCESS OVERVIEW
Once the new sitemap was finalized, I outlined each page’s flow with high-level sections and content needs. One of the biggest challenges with this website build were images - the images I had to work with were either outdated, needed heavy touch up and stitching work or simply did not exist. Using both Photoshop and Illustrator, I created new images featuring the Seismic Suit and hardware, designed icons, and data visualization graphs. Another important image to update and include was a gif animation showing how Powered Clothing works, along with short yet detailed descriptions of what was happening in each frame which was crucial in educating their customers about their product.
Realizing Seismic’s product value was not only in the physical product but also in the data from the suit, I began work researching and designing two data dashboards - one for the individual consumer in the wellness market and another fleet dashboard for the worker safety market which was both consumer and company manager facing. Extensive time was spent on each dashboard, but the work on the dashboards provided a head start on the full dashboard designs scheduled to begin once the new website was live.
Creating the text copy for each page presented another challenge. I did have a starting point to build on since the old website did include some copy, but there was not nearly enough for the new site which now had dedicated pages for both the wellness and the worker safety markets. After I outlined the high-level goal for each text section, I wrote rough copy for most of the sections which explained each product and its value. I then collaborated with Seismic stakeholders to write and finalize the copy for each page.
The final touches for this website build were adding bios for each employee, linking their social media, providing quick links to the Seismic Portal and Help Center, adding legal information like cookies popup and privacy policies, and developing forms for preordering a suit and contacting Seismic for partnerships, investment opportunities and press enquiries. I also decided to include a page dedicated to and for the Japanese market as Seismic already has a presence in Japan as well as corporate partnerships. Towards the end of the build, we decided to move the platform host from WordPress to Squarespace which gave us better control over the responsive design, a more efficient form submission process, as well as a low learning curve for Seismic employees to manage and maintain content after I handed over the completed website.
SOLUTION HIGHLIGHTS
I began by auditing the current Seismic™ website content, identifying what was successful in terms of content, functionality and relevance. I moved into grouping information to define the relationships between the content and formed conventions within the site's structure, content and flow.
In order to effectively ensure the users needs and expectations are met, I defined and organized user goals when visiting the site. Potential and current users included individual consumers, investors, partners, press and employees - all with different agendas and goals that must be met. The variety of user goals were addressed through researching, designing and validating the new site's structure, navigation, use of standard conventions, informational content and content structure. The UX design not only improved the overall experience when visiting the site, it simplified the interaction between the user and the company resulting in site traffic and engagement growth.
With an established UX design foundation, the UI aspects of the design were addressed. Following Seismic’s branding guidelines, I began work on designing the visual and interactive components while keeping focused on the overarching story and voice of Seismic. UI design details included attention to navigation, buttons, typography, imagery and icons, color and placement. The result is a cohesive and aesthetically pleasing responsive design that intuitively guides users through the site.
A high priority goal for the new website was to show users who Seismic™ is, as well as provide robust and in-depth information about Powered Clothing that covers what it is, how it works, who it is for and what is its value. This was achieved by first outlining a high level narrative and developing a strategy on how to effectively communicate the story through new text copy, graphics, and photos - content that most of which did not exist and needed to be created in tandem with the UX/UI development. The resulting text copy and professional imagery were not only essential in the success of the website and in educating users, it also created a bank of assets and collateral that could be used in future projects.
%402x.svg)
%401x.svg){kind=icon}