Empiric Website Redesign
PROJECT OVERVIEW
Project length: 3 weeks
Empiric, Inc. is a startup based in San Francisco that utilizes software tools, such as AI and machine learning, to transform industrial automation within the manufacturing industry.
Through Empiric’s fully integrated platform and sensors, manufacturers can collect vital data that enable them to improve efficiency in areas such as waste reduction, operator productivity, and safety.
Our Challenge
To attract the attention of investors, it is vital that Empiric’s website quickly and clearly showcases the features of their platform while leaving potential clients with a lasting impression.
💡
How might we refine Empiric’s website to create a more seamless and visually compelling experience for clients and partners?
Empiric identified that its landing page and home page were the most important to improve upon because it creates a first impression for users and provides them with enough information to decide to explore the website.
We found that sections within the home page that showcased use cases and product features were the most visited by potential business partners and investors.
UX Researcher
Information Architecture
UX Designer
UX Roles
Figma
Jira
Tools
USER RESEARCH
To understand what potential clients looked to gain from Empiric’s website, I collaborated with Empiric’s CEO and project manager to develop a rough profile of a possible user that would guide my design choices.
Chemical Manufacturers (Quality, Operations)
Food & Beverage Manufacturers (Quality, Operations)
Potential investors
I also visited other manufacturing websites that were similar to Empiric to gain a sense of how this type of information is presented to potential investors.
I developed a list of common design features and stylistic choices that I found to be successful across these examples:
Grid Structure
Samsara’s website effectively utilizes a grid structure to list and organize the benefits of using their platform within the manufacturing industry. This produces a clean layout that improves readability and makes use of both positive and negative space.
Icons
Samsara and Spot.ai both include icons in their navigation bar and within other sections of their platform that visually communicate specific ideas, objects, or actions. Icons aid the user’s understanding of the text by serving as a familiar element on the page. When used within a grid with similar components, this can add to visual consistency.
Large-scale images
These websites all utilized enlarged images of their technological solutions and products that quickly capture clients’ attention and emphasize the most important features of their product. Additionally, visibility is a priority when showcasing digital platforms that include a combination of text, data, and visual components.
IDEATION
I quickly sketched out possible designs for the home page of Empiric’s website, which consisted of a product stack section, use case section, and platform features section.
We centered our designs around achieving the following goals:
Effectively communicating our marketing messaging to our Ideal Customer Profile (ICP)
Driving inbound traffic to get pilots and sales
Using an existing design system that was consistent with brand guidelines, I created initial mockup screens.
Revised Landing Page
Improvements
|
Utilized a carousel to showcase multiple screens within the platform instead of a single hero image
Included arrow buttons and carousel indicators to guide users while navigating the website
Users have a clear idea of how Empiric’s platform looked and functioned
Empiric Platform Features Screen
Improvements
|
Used a grid structure to organize small blocks of text that communicated the features of Empiric’s platform
These blocks were accompanied by icons that provided visual clues for the text
Prioritized consistency and visibility
Product Stack Screen
Improvements
|
Designed a clean and colorful graphic that conveys the connected nature of Empiric’s applications, data platform, and external data sources
Created a clear visual hierarchy using varying colors and type sizes
Balances content of home page
Revised Use Case Screen
Improvements
|
Interactive cards that allow users to view more information about each use case within a pop-up window
Organize information in bulleted list to increase readability and efficiently use negative space
USER FEEDBACK
After submitting my initial designs for review with the developers and Empiric’s team, I received the following notes:
Landing Page
Feedback:
“We want to emphasize each individual screenshot of the platform by increasing the size of each image and adding a brief description of each feature.”
Iteration:
I removed the carousel and increased the size of each image to cover more than 50% of the width of the screen. I emphasized each subheading and placed a block of text to the side of the image.
Product Stack Screen
Feedback:
“Empiric’s platform and applications should be centered rather than displayed hierarchically to emphasize the products.”
Iteration:
After looking at other product stack diagrams, I decided on a web-style organization. I still used a monochromatic color palette but used circular shapes and rounded rectangles to place information. I mocked up 3 different variations of this diagram:
Final Iteration:
The final iteration clearly indicates a hierarchy of information. Users start by looking at external data systems and collectors, and their eye moves to the inner circle containing Empiric’s applications and platforms.
CONCLUSION
Challenges and Takeaways
The most challenging portion of this project was conducting user research without having access to investors and business partners within the manufacturing industry that I could interview. As a result, I wasn’t able to note pain points and gather their opinions regarding stylistic choices or features within the website. I collaborated with Empiric’s team to gather information about their clients and possible users of their website, and empathized with this population to develop a list of user needs.
I also had to work within the constraints of the developers. I understood that my designs couldn’t be too complex for the developers to incorporate. I believe that simple designs worked well because we wanted to draw attention to the manufacturing platform and supporting products and maximize usability.
If I had more time and more expertise in using Figma, I would want to create more complex prototypes using shortcuts and other key features.