Daily UI Challenge: 003
I'm doing a Daily UI Design Challenge: designing a different screen each weekday for 100 days based on the prompt I receive in my email. Knowing very little about what sorts of prompts I'd receive, I decided to try my best to make all of my screens fit within a fictional travel-planning app, Let's Travel.
I'm also writing about some of my UX considerations along the way.
For day three, my prompt was to create the "above the fold" portion of a landing page. "The Fold" is a concept from newspaper design, referring to the area of the front page that is viewable when the paper is folded in half. In web design, it refers to the content in the top portion of the page, before the user has scrolled further down.
Over the last several years, particularly as the number of different screen sizes has exploded, people have started questioning whether or not the fold even makes sense for digital design. I like this Nielsen Norman Group article from 2015 that argues that the fold is still important because, "What is visible on the page without requiring any action is what encourages us to scroll." There is a lot of research out there that shows that people do scroll, but they're only going to scroll if they think they will get value out of doing so.
To design the top part of the landing page of my Let's Travel app, I needed to answer the question, what content or calls-to-action are going to keep my users engaged with the app? What things do I want my users to see or do first?
Here's the page I designed:
This is the landing page for a user who has an upcoming trip that she planned using the app. If she didn't have any upcoming trips, or if it was her first time using the app, this page would look different, because the priorities for those scenarios are different. For this particular scenario, I am reminding the user of her upcoming trip. She can click on the tile to get more details, as well as to manage her trip.
Next, she is encouraged to plan, or at least start thinking about, her next trip. She can do that by clicking the, "Plan a New Trip" button, or by browsing the suggested destinations. Only one suggestion shows up "above the fold", but if the user is in the mood to browse (it's possible she's just here to manage her upcoming trip, and that's okay!), she can scroll to see more.
As I've mentioned a couple of times now, I don't really know what Let's Travel does yet. I envision a social travel-planning app, a platform for people to build shared itineraries, make suggestions about where to stay, and discover new experiences. This is born out of my own passion for travel, and the struggles I've had planning trips with my partner or my friends.
With that in mind, there may be additional information I'll want to pull onto the landing page as I flesh out the details of what users can plan and how they will collaborate. For example, there may be a need to show notifications on this page, if a collaborator has made a suggestion that needs review. Or perhaps I should show more, or just different, information about an upcoming trip in this summary view.
I've always thought that home pages are tricky to complete first, because so much of their content, and the arrangement of that content, depends on the rest of the product, and if you don't have a full understanding of that product, how can you know what to put on the home page? Many of the details of the Let's Travel landing page will likely change as the app continues to take shape, and some of those details would actually be great candidates for user testing: talking to users to uncover what makes the most sense to surface on this page and how to arrange it.
I'm not sure I'll take the time to do any usability testing as part of these challenges, but I'll certainly try to share any updates I make to the landing page as I continue to trundle forward.
