Strata financial (2016)
Strata (Formerly Self-Directed Individual Retirement Account (or SDIRA) services) came to Springbox in 2016 with a common problem; they are a leader in their field, but were having trouble attracting new customers. Most of their customers came from referrals of professionals who knew the expertise that SDIRA Services had, but the company had trouble conveying this online and converting.
Springbox recommended starting with a workshop, inviting current users and potential users to do an audit of their current branding, website and entire brand ecosystem. What came out of the workshop was the discovery of a need for an overhaul. It was our recommendation to create a new brand, a new website and a reimagined presence for the company. We found that potential users were off-put by the current web experience and found it untrustworthy. One of the most glaring issues was the lack of content strategy and the overwhelming amount of information.
I was brought onto the project after a content audit was conducted, and user interviews and personas had been created. My role was to initially to help create a new sitemap. To effectively do so, we needed to reimagine the navigation, the page-types and suggest edits and combination of certain pages. We created a delineation between consumers and professionals, as they had very different needs and use-behaviors, and reflected this in the site map. We found that consumers would typically come to the site to learn more, and enter the conversion step of the enrollment funnel only after learning and trusting had happened. The information presented to new users needed to be more high-level and less intimidating than an expert like an IRA Custodian who may be looking for a technical piece of information. This was reflected in the subsequent wireframes.
Desktop Wireframes
After creating the sitemap, we identified several page types and started creating wireframes for each page and common modules that could be used across the entire site to keep a consistent look and feel. One of the biggest challenges was when pages were extremely word-heavy, technical and long. Some of these pages were over 11,000 pixels in height of continuous text, or roughly the length of 15 scrolling screens. When a page still required all of that information and needed to live together we needed a way to make it less intimidating to consumers.
I used Sketch and InVision to create a repeatable wireframe for these content packed pages of the site. The first element to simplify this type of page that I created was a sticky header that would link to anchors deeper on the page. This could split content in 2-6 sections, allowing the user to jump large sections of content as well as giving an indication of where they were on the page and what lied ahead.
Mobile Wireframes
The second element is the masonry style layout of content blocks. This layout allows us to surface up many different pieces of content, enlarge the title and give a preview of the copy within each block. Using this approach allows the user to scan quickly and dig in deeper to content that is useful to them.
The concept was shown in two versions, one where the block itself would expand as a drawer when “Read More”
is clicked, pushing the content under it down the page.
The second version was to re-open a modal that took
the screen over. Within the modal, there are navigation elements to move to next or previous content piece, a left rail navigation that shows all pieces and inline defnitions for certain keywords.
To create a truly holistic brand experience for SDIRA Services we needed to make sure their users were well served at all touchpoints. It was important for current users, and especially for future markets that mobile be the best experience possible. This focus on easily digestible presentation of content became even more difficult on mobile, where a convention is to hide some of the content due to restricted viewing size. Since all of the information is important and sometimes legally necessary, we had to solve for full copy as the worst case scenario. To do this, I used real content when designing wireframes. This was a harder task than using smaller text, but it proved that the concept wouldn’t break, right from the very beginning. The only exception where "lorem ipsum" was used was when a copywriter had specified a specific length of an overview but was developing it afterwards, and for Related Links which would be implemented once the sitemap was finalized.
I was able to include all of the content from desktop in the mobile wireframes. I utilized the same navigation approach as in desktop. The masonry grid was adatped to be a single width, and the drawer approach for more content was retained.
Overall I created wireframes for 6 different page types, for a total of 12 with the other designer’s pages. After we had created these wireframes we presented them to the client and after approval I handed mine off to our Creative department, who was in the midst of creating branding to apply to our wires.