Landing Blog
Desktop and Mobile Navigation
Problem
After the blog was created, we realize we had some issues with the navigation. On desktop, the search field didn’t have a way to clear a previous entry. On mobile, the dropdown buttons were too close to each other and users could easily hit the wrong button. The users also didn’t know how to close the dropdown menu. The search button completely disappeared when it was sized down to a tablet device.
Opportunity
The navigation built for the blog didn’t match the main website’s navigation. This gave me a chance to completely clean up the design from a UI and UX perspective.
Challenges
The mobile navigation had the most issues so I went through deep exploration. I explored different ways the menu could be a dropdown to make space for a search field. We decided not to go in this direction because it gave users more work. Most of the users are here organically and want to find a specific page so hiding everything added more clicks.
The search field was also another issue. I had to explore how it would appear. Should it be an icon? Or should I have a search field? What happens if it’s hidden in the dropdown menu?
Solution
For the Desktop, I changed the search field to give it more room to type and add a clear button. On mobile, I limited the menu title to give it extra padding. When a category is open, the carrot changes direction indicating to the user to tap it again to close it. By limiting the titles, the search icon is no longer missing. Clicking the icon slides the search field in and makes it easy for users to find an article.
Takeaway
While redesigning the navigation, I noticed the entire site needed a design refresh. Some of the assets were outdated and didn’t match the branding of the current site. Below the next section, I did a deep exploration of ways to improve the overall blog.
Prototype
Overall Blog
Problem
While working on the navigation, I realized the blog itself could use an update since we changed our brand colors and had a design system setup.
Opportunities
What if we gave the blog navigation more room to breathe from the main navigation?
The hover state has a very harsh drop shadow. Can we make it softer?
The featured cards are using a lot of white space if the articles don’t line up with each other
Some blog cards have a round corner, while others don’t
The articles need a pull quote and options to upload more than one image
Can we drive users to subscribe or send them to search for our apartments
Can we introduce tags?
Can we add more features to our Author’s page
Challenges
Resources were limited so even though I went through a full exploration, we could only move forward with some pieces.
Having colored backgrounds for sections added weird padding so I had to find a way to use color without adding disruption to the site.
The images on the site would be from our members which meant they wouldn’t always be the best quality. I had to design with that in mind, especially for the hero section. They also needed the ability to upload more than one image in their article.
I also needed to find a way to drive readers to subscribe or explore Landing apartments.
Solution
For the home pages, I changed the featured layout to get rid of empty white spaces. I also limited it to four articles so the rest of the page could be explored. I got rid of colored blocks to fix extra padding that would appear throughout the site. To make up for the loss of color, I added colored tags to match the category page color.
For the category pages, I removed the hero image in the header to let the articles shine and cleaned up the design to make it simple. I set a style guide for featured articles vs the list to make it easier to understand the difference.
For the article page, I got rid of the color block in the header the make the breadcrumb more obvious. I created a version to have it centered or left-aligned if there was an ad on the page.
For the Author’s page, I created components for city recommendations, a quote card, a featured article, and social links.