One of my first iterations was to group items together, either by Challenge title or hashtags. However I had to scrap this idea as we weren’t able to group content just yet.

Another variation explored the idea of having content at different sizes to create a sense of visual hierarchy. I scrapped this pretty quickly as I was limiting the volume of content the user could consume in a glance.

The masonry layout definitely showcases a high volume of content and creates visual interest. However, combining two different shapes (squares and rectangles) means each square would be centre-cropped, so the context of each Story could be lost.

By keeping the Story ratios consistent without cropping, the masonry layout now works. The Story order is random for now, but there’s scope to dedicate the larger tiles to adverts (either promoting Localhood Challenges or travel brands).

The Spotlight Story behaves in a consistent manner to the User Story panels. The user has the ability to swipe up on the location or local business being advertised.

Our users are switching from Instagram or TikTok to Localhood, so it was important to mimic those basic social platform interactions, like swiping or horizontal scrolling.

Spotlight edge case where no content is available. Main CTA should refresh for the user.

At this point I’m curious whether it would make more sense to separate Spotlight from Stories and Drafts.

This page was designed by a previous designer, however I’m including it for context.

I decided to add the notifications page to the nav bar as its important for the user to be able to access it from any page.

When the user first opens the app, it will open on the Spotlight page, to inspire Creators to view all Stories.

As my main objective is to inspire users to create stories, so I’ve made sure there are two clear calls to action to create stories - one in the nav bar and another top right.

As Localhood Stories are a web-based version of the popular Story format, there is a limit of 20 panels that can be loaded at one time. Once the stories end it will bring the user back to the Spotlight page.

When there is no content to be displayed, for consistency I am using the same empty state format that is used for Stories and Drafts.

For high priority messages, we display a dialog that appears when the user opens the app. This is perfect for time sensitive actions.

Another dialog can be displayed when the user first starts in the app, with a clear call to action to start creating their first story.

On the Drafts page, this banner has a prominent but less urgent action required, gently reminding our Creator to push their content live. This will remain until dismissed, or if the Creator pushes content live.

On the initial Home screen, before our Creator has created any Stories, a primary action to ‘Create Story’ is complimented by imagery suggesting rewards or cash.

As notifications are important to our user, I have placed it as a main page on the bottom nav bar. Upon clicking it all content will be displayed.

Once a user clicks on Challenges, only content related to Challenges will appear. User can choose to click into a Challenge page or close the action chip.

With Message filtering, only Localhood messages will appear, relating to Challenge wins, Challenge details, money going into Creators accounts or the occasional research message from the Localhood Design Team.

Again keeping the empty state consistent with the illustrations, however I am also encouraging our Creator to turn iOS notifications on if they haven’t already.

When a Creator first joins, they will be greeted with onboarding screens explaining how to use the app. This is a perfect time to make sure our Creator allows notifications from Localhood.

If our Creator has pressed yes, a generic iOS notifications will appear after our designed message. In most cases, Creators click Allow.