morning brew
investing hub
PROJECT
Morning Brew started a news source for young adults as they have grown they wanted to expand their offering and asked me to design an Investing Hub for their platform
RESEARCH
Starting the process I wanted to dig in to what constitutes a great investing hub. I did competitive analysis of other investing websites to figure out what was working and what wasn't working. This research can be viewed here.
In addition to competitive analysis, I also did research on the following information:
-
Ads
-
Display ads vs. Native Ads
-
Ad Fatigue
-
-
Engagement
-
Trends in UX/UI Design
ANALYSIS
The design includes comprehensive and diverse functionality which had to be presented to users in a simple and clear way. I had to analyze and prioritize all the important sections and features as there was a high risk of overloading the screen. By utilizing research, I made informed decisions on which information should be shown based on importance.
Based on the users being the General Business Audience I wanted to design an interface that is clear, concise and easy to use. The website layout is structured around intuitive navigation, high readability, light background, and eye-catching photos. The light background sets the effective space for a variety of photos and graphics that may come with the articles.
Clear and solid typography utilizing the Inter font makes the information scannable and legible. Color contrast is used for enhancing quick navigation, bright blue color accents attract users’ attention to links, while the greyscale copy on the cards attracts the users eye to the article title first and category and ancillary information second.
PATTERNS
After performing extensive research I was able to dive into the project - I wanted to utilize some of the patterns from the new website design in order to keep the investing hub cohesive. Some of the similar patterns I used were:
-
Subscribe Section
-
In Depth section
-
"The Latest" Cards
However, I reinvented a couple of the patterns/pages:
-
The Trending section - I wanted to utilize the beautiful overlay text cards but after some thought and consideration for accessibility I decided not to overlay the text but instead to move it over to the right of the photo. My thinking was if the text is over the photo it is sacrificing 2 things, contrast and the ability to view the photo, which is why I decided to change it.
-
I also decided not to use the icon on the bottom right of the cards since this is already a categorized page "Investing"
-
The last thing I changed was the individual article page - I felt that some of the elements were not in a normal column structure - they appeared to be more floating so I just re-aligned everything in a pattern I felt comfortable presenting.
And I created some New Patterns
-
Video Section
-
Tag "Topics You Follow" Section
-
"For you" Column
-
Stock Ticker
-
Category Section layouts
-
Partners Ad Section
-
Additional Category 3 Column layout
My overall thinking with these patterns is that they should be thought of as rearrangable. I made informed decisions for how to lay them out but in a normal project I would also do A/B testing to come up with the best way to organize them.
UI DESIGN
FEATURES
PERSONALIZATION & CUSTOMIZATION
Personalization and Customization of websites is a popular trend in user experience design. It’s not enough to just give users the product to solve their problem – it’s better to give them the ability to refine the interface so that it can corresponded to their specific needs.
In order to achieve some level of customization, I added the tag option "Topics You Follow" so the user can dial in on specific information they want to see more of. Once the user selects a single or multiple tags the "For You" content sidebar starts adjusting the content to that specific user.
STOCK TICKER
To really embody the Investing Hub I thought it was most fitting to put a stock ticker bar at the top of the page. This would auto scroll to the left slowly to show different popular stocks of the day. The user could also view a page of data if they click on "View Market Data".
READ TIME
Along with the Author Name and Date I added "Read Time", this small bit of information displays to the user the average read time of the article. Adding read time to a blog form website has been shown to increase engagement with the articles.
An article by Marketing Land "Front-end engineer Brian Cray added estimated reading times to the articles on his site, then looked at before-and-after metrics. They showed the estimated reading time improved his overall time on site by 13.8%. “What’s more interesting though,” he wrote, “people either followed me, subscribed to my blog or retweeted my articles 66.7% more often.”
With our audience after digestible material and data showing that reading time can increase engagement I wanted to make sure to include it.
ADVERTISEMENTS
I wanted to retain an enjoyable experience for the user while also including necessary ads. To achieve this I decided to use a Native Ads pattern. Native Ads are defined as "material in an online publication which resembles the publication's editorial content but is paid for by an advertiser and intended to promote the advertiser's product."
Native ads are an improvement over Display/Banner ads for a few different reasons:
-
Consumers looked at native ads 53% more frequently than display ads.
-
Native ads registered 18% higher lift in purchase intent and 9% lift for brand affinity responses than banner ads.
-
25% more consumers were measured to look at in-feed native ad placements (the most common editorial native ad format) than display ad units.
Native ads are also known to reduce ad fatigue "...when your audience sees your ads so often that they lose interest and stop engaging with your ads."
In order to do this, I created card patterns for throughout the website and also created them in Ad form. There are a couple things that differentiate these ads from the actual article content as referenced below:
-
Icon
-
In lieu of Author name/Article/Read time the user sees the Sponsor
Regular
Ad
There is one part of the website that I uses a Display Ad pattern that can be found at the bottom of the page in the "Partners" section. I used a different pattern here because they are found to be more effective in conjunction with other marketing strategies. "Studies have also shown that 27% of consumers conduct a search for a business after seeing their display ad, and there’s a 59% lift in conversion when users conducted a search related to a display ad."
BOTTOM LINE
Following the words of Bruce Lee "Adapt what is useful, reject what is useless and add what is specifically your own", I was able to come up with a design that I feel does all three.
With Morning Brew's mission to supply content that is clear, digestible and witty, I wanted that same feeling to come through with the design. With great competition from large financial information sources the first impression couldn't be just nice and clean, it also needed to appeal to the emotional and aesthetic sides of user perception.
By being simple to use, engaging the user from the start, and letting them interact according to their personal preferences I feel achieved that. That’s the balance I worked on creating with this design.
FIRST ITERATION
SECOND ITERATION
FAST FOLLOWS & NOTES
One thing I want to note is that you will see I didn't build out the menu bar or footer - I thought my time would be better spent working on elements that don't exist currently.
Based on the time frame I didn't get to build out all of the pages and features that I would have liked to so I wanted to put a couple notes about what those would be.
-
"For You" page - this page would house things like
-
The ability to customize which sections they follow by customizing their tags
-
The ability to view all of the articles that are relevant to them based on their tag selection
-
The ability to customize what shows on the stock ticker
-
The ability to see all of their saved articles
-
-
"Market Data" page
-
This would be accessed by clicking "View Market Data" on the stock ticker.
-
It would be a data - centric page showing articles and information about the stock market daily.
-
-
Save feature
-
This can be seen on the individual article page but I would like to build it out so the user could quickly save articles and access them later for reading.
-
-
Secondary menu w/categories
-
This would live below the main in-depth article and above the page content.
-
It would have the categories and nested sub-categories in it to further refine content.
-
-
Search Feature