Company: Armature Systems
Team: Nathan Nash, John Lund, and Dana Harvey
Platforms: WordPress
Tools: Figma, Zoom, Draw.io, Maze, Amazon Mechanical Turk
Processes: Sitemap, user flows, wireframes, mood boards, high fidelity mockups, usability testing
Summary
The interactive sales sheet is a tool that shows compatible product offerings for operational security stacks. It helps sales team members and prospective partners walkthrough which technology stack will address their operational security concerns. I collaborated with the Armature Systems team and Modern Master in order to design, develop, and launch this project.
Discover
After Armature System’s accepted my proposal for the contract we began to meet over Zoom to discuss the user flows for the interactive sales sheet. In these meetings, we walked through the flow they had in mind on the white board. I took notes, and asked clarifying questions to gain additional insights. Once these meetings were complete I had the information that I required in order to begin defining the deliverable artifacts. Also, the Armature System team provided me with a Google Doc that contained the content I would require for the designs.
Define
As a part of the contract, I promised to deliver several artifacts to Armature Systems. These artifacts included a sitemap, user flows, wireframes, mood boards, high fidelity mockups, usability testing, and results as well as the opportunity to revise up to three times. The sitemap and the user flows were created in Draw.io.
Sitemap
I created the site map in order to consolidate all of the information from the Google Doc content master sheet into a single graphic.
User Flows
After creating the sitemap, I designed the user flows and made sure to reference the page destinations in the sitemap for the event symbols (rectangles). The user flows applied to both the desktop and mobile versions of the site.
Wire frames (Desktop)
After defining the sitemap and the user flows I was ready to begin creating the wireframes. Since this is a responsive site I wanted to ensure that both the desktop and mobile versions had an optimal user experience. At the time I designed these, not all of the content was available so I used a placeholder font called BLOKK to avoid using lorem ipsum.
Wire frames (Mobile)
During our initial briefing the client said that it was okay for the mobile version to be more stripped down than the desktop site. Therefore, I used Google Material Design web components for most of the design patterns and also created a different user experience that was mobile first.
Develop
Moodboards
After getting sign off on the wireframes I moved on to develop the visual design aspects of the project. I created three separate mood boards, in order to, create three unique brand stories that convey Armature Systems’ value proposition e.g., operational security. After discussing it with the client they ultimately chose Option B.
Visual Design
As mentioned earlier, I wanted to give the client the opportunity to alter the visual design. Therefore, once they settled on Option B, I created three potential variations of what that design could look like. In our case, the client chose Option 2 because they felt that the first option was too stiff whereas the third option was too enterprise.
Rapid Prototype
After the client was happy with the visual direction I began to ensure that it was consistent between the desktop and mobile mockups. Once I finalized the mockups I created a rapid prototype using Figma in order to conduct the usability testing.
Usability Testing
After completing the rapid prototype, I set up a usability testing using Maze and recruited participants via Amazon Mechanical Turk. The analysis of the results is available on the Google Drive link below:
https://docs.google.com/document/d/1kN7txaihEGdVr3z818EJNgjsGlIuC9bTY-4sz2em8eo/edit?usp=sharing
Deliver
Once I had completed all of the deliverable assets including the sitemap, user flows, wireframes, mood boards, rapid prototype, and the usability testing analysis… I wrote up the necessary documentation and handed off a Google Drive folder to the developer.
Conclusions
Working with Armature System’s was an excellent experience. During the course of this project, we were all under stay in place orders due to COVID-19 and were required to work from home and collaborate remotely. Regardless, this didn’t actually affect our ability to work together at all. And would have been no different under better circumstances. This is because I was working from the Minneapolis, MN and our client was based in San Francisco, CA while my associates were outside of Sandpoint, ID. Zoom made it simple for us all to collaborate and deliver successfully.
