Day 16 of 100: A profile overlay screen concept for radar.techcabal.com
The only way to know a community is to be a part of it.
Preamble
I know Techcabal and sometime ago, I followed some ASK Me Anything sessions(AMAs) on its forum site, Radar — A forum where the African tech community can discuss, share ideas and make connections.
You can checkout insightful AMAs by some people who have contributed greatly to the development of Africa’s tech ecosystem — the likes of Ex-Googler Emeka Afigbo, Mark Essien, founder hotels.ng etc to have a taste of the mouth watering conversations going on within Radar. I joined Radar about 2 months ago and have been richly blessed by what’s going on in there. Thanks to my friend, Ben Daniel, for the introduction.
Design challenge
So today’s design challenge was to create an overlay screen or popularly called a modal dialog box. As I thought about the use case to tackle, I remembered Radar’s overlay screen comes up when you click on a user’s image icon on any thread.
The profile overlay screen is good, it’s simple, avoids information overload on the small screen, presents few details, and links to view the user’s complete profile and user acquired badges.
It’s a great great privilege to be able to share with the community my findings:
Username prioritized above user’s actual name
Well…I don’t know why, but looking at one’s profile, I would want to know the user’s real name since I encounter the username on all threads. Why should we still make the username ( which can be ojichalamdahot2000 ) the main focus item instead of a real name?
Whitespace distribution
If you look closely at the profile overlay screen again below, you will see the texts and the image are left-aligned and leaves the message button floating on top of a big ocean of whitespace. We can deal with whitespace distribution easily.
Functionality is part of UX too
UX is not just UI design, a functionally working feature of a site without much detail in the visual design is still perfect so far the users accomplish their task without any hassle. So Radar’s profile overlay screen works but it can be better. We can make changes to the following and see how the overall experience can be improved:
- Distribute whitespace properly.
- A user’s real name should be the main focal point and not username.
- A bit of a creative touch.
Some sketches
First prototype
Final prototype
Disclaimer: This design is only for educational purposes and in no way meant to be used otherwise.
Post edited to remove the point of adding a user location — I later discovered it’s there already.
Thank you for going through this. Let me know what you think by liking or through comments? Any feedback or opinion — very welcomed :)
