Making a Web Page Easier to Use
by Avi
Good technology is all about simplicity. You shouldn’t have to sit through any training. It should just make sense.
Late last night, we launched a redesigned Profile for college coaches on our Teamlab app. I thought our members might be interested to hear about how we think through designing a web page.
Previously, the page was setup as a “live preview.” Everything below a dotted line was what live on the public-facing version of the page. This included the college team’s name (which could be changed), a stream of pictures and videos, and a recruiting questionnaire (which could be edited.)
This page had an identity crisis. On the one hand, it was a live preview. On the other, you could edit things within the live preview. We also found that many college coaches wondered, when they were on this page, why they could fill out their recruiting questionnaire right within their own website. In short, it was too confusing and needed a makeover.
The new version of the page has a much clearer purpose that can be articulated in 7 words: This is where you control your Profile. To serve that purpose, we made a number of key changes that make the page much easier to use:
- Adding a new post is the most important thing you do on your Profile. Now, you can post a picture, video, or text directly from this page. You don’t have to click an “Add a new Post” button to get to a new page where you post.
- Coaches rarely change the name of their page or modify their questionnaires. There was no need for these editing tools to be front and center. So we moved them to a toolbar on the right. It’s still easy to access. It’s just not glaring at you every time you hit the page, creating a distraction.
- We removed the questionnaire preview, making it easier to understand that this is the place where you control stuff, not where you type the names of new contacts.
- We made a clear distinction between the page that controls the profile and the actual profile, by adding a clear link that says “View public profile.” This also helps create a cognitive distinction between what you’re looking at now (the control page) and the live version of the page.
