sim website redesign
Safety in Motion offers a complete approach to preventing workplace injuries. This system includes training materials, physical techniques, consulting, and implementation strategies.
view prototype
my roles
UX Design
Visual Design
deliverables
Competitive Analysis | User Stories & Flows | Paper Prototype | Wireframes | User Testing | Design Presentation
tools used
Figma
InVision
Maze.design
Usability Hub
challenge
Safety in Motion approached me to redesign the look and feel of their website in order to solve three major issues. They wanted an updated, more modern feel, improved navigation, and a more efficient means of organizing and conveying information.
solution
The solution I designed utilizes color, sizing, and white space to efficiently organize information on the SIM website. Utilizing these design principles helps to draw the user’s eyes to the most important parts of each screen. Navigation was consolidated with a high success rates during usability testing.
competitive analysis
I conducted a competitive analysis of HumanTech, HumanScale, and MoveSmart. Through my research I was able to identify some of the strengths of SIM’s competitors: clear calls to action and utilizing images and videos to break up long streches of information. However all of these competitors used too much text and many were inconsistent with their branding choices.
information architecture
wireframes
I designed the wireframes for this app based on my user research as well as on the more successful design elements of SIM’s competitors.
usability testing
When I put my wireframes in front of users they had a lot of insights to share. Most found my designs easy to navigate and reacted positively to the two column design.
“Looks great, nice and simple”
Users stated that they were unsure what the company actually does or what the SIM system entails. There was also mixed results when it came to user preferences for a dropdown or a modal view on the SIM system page.
visual design
branding
In turning my wireframes into high fidelity mockups I wanted to stay true to Safety in Motion’s brand colors but soften them a bit to produce a more modern look.
In applying these brand colors to my wireframes I wanted to emphasize the orange red Pomegranate color. Orange symbolizes enthusiasm, joy, health, stimulation, and success. As SIM is a company that focuses on health and safety in the workplace, emphasizing their Pomegranate brand color seemed fitting.
Pomegranate HEX: #ef421e
Jade HEX: #00b04f
Yellow HEX: #fff200
hi-fi mock ups and preference testing
In order to refine my designs and to test some of my assumptions I did a few rounds of preference testing.
During the first round of usability testing with wireframes users were divided on which element was best for organizing the Prevention Principles: a dropdown or modal view. With high fidelity mockups, 55% preferred the dropdown while 45% preferred the modal view.
“Great organization, seamless with the website and allows me to easily click on another principle.”
In my original designs I wanted to emphasize Safety in Motion’s Pomegranate orange brand color by using it within the hero section of the homepage. However initial feedback was negative. When I put the above three options in front of users, 100% preferred the third black & white option. These users stated that the third option’s hero section made it easier to see the navigation links, call to action, & logo.
conclusion
what worked?
The redesigned website allows users to learn more about the SIM System quickly and easily. From the homepage there was a 100% direct success rate for finding more information about the SIM System with a 20% misclick rate. Users had an 80% direct success rate in finding out more about each Prevention Principle with a 12.5% misclick rate.
what didn’t work?
A challenging aspect of this project was branding, specifically the color scheme. I went through several iterations with my first attempts highlighting the brand colors while hiding the CTA & navigation links. Through numerous revisions and user testing I ended with a subtler design with which the client was very happy.
key takeaways
User testing was everything for this project. The client wanted an updated website that would reflect a more modern image while allowing users to quickly and easily find more information about the SIM system. Testing allowed me to try out different iterations, test assumptions, and correct mistakes to help the client achieve their goals.
let's connect!
