fbpx

Re-designing BeeTalk’s User Profile Screen

BeeTalk is a chat app for finding new friends online with enhanced chatting experience e.g: shake, whisper, doodle etc. Past few days, I’ve been finding and researching about user profile experiences on some chatting apps and came across BeeTalk app that I personally think it’s a cool app.

However …

The challenge I ran into was with their clunky user profile experience where all of the pieces of information in one screen.

Therefore, the goal of this case study is to simplify their user profile screen by separating important content upfront and least information on the secondary screen. This case study describes my process of re-designing their user profile screen.

Tools

Adobe XD

Process

I’ve started the process with the discovery phase followed by conducting short interviewed within my circle; Understanding the challenge, what needs to enhance and the importance of the value.

Here’s what I discovered:

1. The user profile screen too cluttered.
2. Dense amounts of content, long scroll.
3. 3 out of 5 users prefer viewing more photos than other information.

From the finding, I found out there is additional information that can be minimized by displaying to the secondary screen. I believe most users wanted to see are gender, age, relationship status, and more photos.

Therefore, I put CTA on the first screen which is ‘see more’ link to view details about that particular user.

BeeTalk Wireframe
Low Fidelity Scribble Wireframe

 

Design

I’m using their CI selection of color which are yellow and black. Also, I created an additional search ID on top of the screen to let the user easily find their networks.

Before

Beetalk User Profile

After

Beetalk User Profile after

Animated version

Beetalk user profile

Conclusion

As mentioned this case study is only focused on user profile screen and not covering the entire structure of the app. Hence also, has not been fully tested yet (it’s one of DailyUI challenge prompt that I took part in).

Thanks, I hope you enjoyed reading this article as much as I enjoyed practicing my writing skills. I’ll close with one inspiring quote by Jennifer Morla – ”Design brings content into focus, design makes function visible.”

Leave a Reply

Your email address will not be published.