The intelligent line illustrates SummerHaven’s approach to forging their own path to create unique investment products.
Platform
Website
Role
Content strategy and visual design
Skills
Adobe CS (XD, Illustrator, Photoshop)
Prototyping
Wireframes
Visual Design
Overview
SummerHaven is an Asset Management company focused on Commodity Future Strategies. They specialize in building custom financial products for institutions but also produce index funds which are available to private investors. Due to federal regulations, each type of product exists as its own entity: SummerHaven Investment Management and SummerHaven Index Management.
Tasked with updating the current sites to increase perfomance, responsiveness and functionality, my role was UX/UI and visual design. I also contributed to content strategy.
Previous and updated landing of SummerHaven Index site.
Previous and updated landing of SummerHaven Investment Management site.
Brief
Both sites primarily serve to educate interested parties on SummerHaven and their products. In additon to potential clients this could include press or researchers.
The CTA for the Investment Management site, whose target is institutional investors, is to contact SummerHaven directly. And for the Index site, geared towards financial advisors and individuals, the goal is to drive users to a third-party site where ETFs can be purchased.
SummerHaven offices.
Process
Stakeholder Interview
The stakeholder wanted to make sure that we communicated that they build their products on an academic foundation and analysis to get results. They do not develop from other research, but start from the ground up.
User Flows
The client had identified what roles visitors of the site would have. We mapped out the desireable path for a user to take depending if they were an institutional investor or a private financial advisor.
Next we mapped out their journey through each site. This gaves us a clearer idea of how to organize the site and its architecture.
Competitive Feature Analysis
Focusing on the features we had indentified as a priority (responsiveness, research tools), I looked at other firms in the same space. I gleaned the following insights:
- Read or download. White Papers and articles should be both in a responsive format on the site and available as a PDF. For mobile users, the ability to read easily on your device rather being pushed to another app is a benefit. It also improves SEO to have content in a page where it is searchable.
- Quick subscribe form in footer. Adding a newsletter quick sign-up form in the footer will make the option readily available on every page rather than sending them to another. This will help increase subscriptions to thier periodic performance updates.
- Dynamic Data. For the Index site, providing dynamic data and charts for research is expected. The landing page should provide performance real-time data on their ETFs.
Site Map
I created a map for both sites for their proposed structure and current for comparison. For the IM site, we needed a more robust "About" section to provide materials for the press and to convey capabilities for institutional investors. For both sites, we needed to identify where legal intersitials would need to appear to meet regulatory requirements.
Current site map for SummerHaven Investment Management.
Current site map for SummerHaven Index.
Proposed site map for SummerHaven Investment Management.
Proposed site map for SummerHaven Index.
Traffic Analysis & Breakpoints
Looking at the client's current site traffice, we determined there were factors that would affect our approach.
- Older browsers. Most users were on Windows desktops and a significant portion of them are on Internet Explorer, a browser that hasn’t been supported in over five years. The challenge is that some functionality will not work and we must provide alternate content in some cases.
- Lower than average visits from mobile and tablets. This could be due to the fact the site does not read well on those devices.
We decided we would only need two breakpoints: landscape and portrait below 800 pixels wide. (Older machines will still get a landscape layout.) Working with a 12-column grid, we started with three templates: landing, section landing, article page.
Wireframing Content
It was important to float-up and highlight content on the landing page to provide a glimpse into the breadth of research and products. The same thinking would apply to section pages. I added a sticky navbar since many pages on the site would scroll long.
All pages in Adobe XD. Most pages in the site would use the article wireframe as a template.
Moodboard
We established a palette and visual treatment for the site by working with moodboards.
Final selection for visual direction.
Design Solution
Visual Concept
In addition to developing a visual language, I presented the idea of using a drawn line over images of natural resources to illustrate that SummerHaven goes to the source and finds their own path. The intelligent line was used over photographs on the IM site but as a lone visual on the Index site.
Landscape and portrait layouts for SummerHaven Investment Management site.
Final Delivery
I collected and prepared files for a design hand-off to the SummerHaven's development team. Copy was provided in a seperate content deck.
View all SummerHaven Index Management layouts for portrait and landscape.
SummerHaven Investment Management landing page.
SummerHaven Index Management landing page.
A sticky navbar provides access to navigation on long scrolling pages.
Research landing page.
