Dockyard Design Challenge



Dockyard Title.jpg

Below is my design challenge case study. Please note that all images are lightbox enabled—if you’d like a closer look, just click! Please reach out if there are any loading issues or if you have any questions. Thanks!




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. 



  • A feed of discussions

  • Notifications

  • Switching between and browsing channels

  • Create new discussions

  • Search

  • Filtering (e.g. ‘Popular Discussions’)

  • Accessing profiles.





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?”





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!

Thanks for viewing all of this, I enjoyed participating in the challenge and designing the web app.

From sketches to animation this case study took nearly 2 days of work to design. I realise this exceeds the time recommendation but I wanted to demonstrate the full range of my process and I was having fun so I ran with it.

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.

Thanks again for your time and I’m more than happy to discuss this further. I look forward to hearing your feedback—talk to you soon!

Matthew Whiting