03.25.2019
Below is the design challenge I completed when applying for the position of Sr. Product Designer at Dockyard.com.
Brief
This exercise is to design the home screen for a mobile web app based around “discussions” or chat rooms. The app has a number of predetermined “channels” based on topics such as cooking, science, and movies. Users can participate in or create new “discussions” to go within any of the channels (e.g. “What is the best kind of rice?” in the cooking channel).
This app is a public app with public discussions and profiles, it is not intended for private messaging. The app should be broadly appealing and easy to use, not directed at a specific audience.
Please propose a design for the home screen while keeping in mind the apps overall structure and navigation. If you need to design a second screen to communicate your ideas, please do, but 2 screens maximum.
Features
A feed of discussions
Notifications
Switching between and browsing channels
Create new discussions
Search
Filtering (e.g. ‘Popular Discussions’)
Accessing profiles.
Research
Understand your goal
Why is this product important?
Users want an easy way to stay informed of current events, explore topics, learn new things and meet new people.
This app makes those needs accessible through an online, mobile community.
This app can answer questions, expand a users knowledge and interests, allow users to meet new people and keep aware of current events and trends.
Define the audience
Who will use this product?
Anyone who is curious about any topic, community or current event.
Owners of smartphones are the primary audience and people with access to the internet via desktop are the secondary audience.
Understand the context
When and where will this product be used?
The product will be mobile-first, so it will be used anywhere and anytime the user has a moment of leisure: work, travel, home, public etc.
It can also be triggered by a specific need, such as someone at the grocery store wondering “What is the best kind of rice?”
Usecases
Usecase 1: New User
Explore Topics / Community
Used in a moment of leisure to explore interests
Usecase 2: Returning user
Answer an Immediate Question
Triggered by an immediate, real-world need
Lo-Fi Wireframes
Hi-Fi Wireframes
Identity: ChatCat
Chat + Categories = ChatCat
Hi-Fi Comps
Thank You!
From sketches to animation this case study took nearly 2 days of work to design. The app’s concept seems to be mainly recreational in nature so I wanted the product to feel playful and have a fun, accessible aesthetic. I tried to keep the UI clean and choose a gender neutral, soothing color palette.
If I had more time I think it would be fun to build out the rest of the app and get a working prototype going. I would also like to do some more research around best practices for mobile web apps. Overall I’m happy with the outcome and I hope you’ve had as much fun looking at it as I did designing it.