Product Design Challenge

Design a shipment tracking system for an eCommerce platform that allows customers to easily track their orders, receive real-time updates, and resolve any issues related to their shipments. The system should be simple, intuitive, and provide transparency throughout the entire shipping process.

Core Features:

• Order Tracking: Users can view the status of their shipments in real-time, from order confirmation to delivery.
• Milestones & Progress: Show key milestones (e.g., order shipped, in transit, out for delivery) with estimated delivery dates for each.
• Notifications: Send push or email notifications to users when their shipment reaches a milestone or when there are delays.
• Issue Reporting: Users can report issues (e.g., damaged items, wrong address) and request support or file claims.
• Courier & Delivery Info: Provide detailed information about the delivery service, courier contact info, and an estimated time of arrival (ETA).

Requirements:

• Design three screens:
  1. Order Tracking Dashboard: A screen that shows all active orders and their current status, including a visual progress bar for each order.
  2. Order Details Screen: When selecting a specific order, show detailed tracking information, including the courier's current location, delivery ETA, and a map view (optional).
  3. Issue Reporting Screen: A form where users can report delivery problems (e.g., package delayed, item damaged) and request assistance.
• Focus on transparency and simplicity—make it easy for users to find key information about their shipments.
• Ensure users have a clear and smooth experience for both tracking their orders and handling issues.

Deliverables:

• Wireframes or high-fidelity mockups for the three screens.
• A brief explanation (100-150 words) of how your design enhances the shipment tracking experience and reduces anxiety around eCommerce deliveries.

Design a mobile app that helps users focus on reading long-form articles, ebooks, or documents without distractions. The app should include a "Distraction-Free Mode" to enhance focus and offer features that allow users to customize their reading experience, such as font choices, background themes, and bookmarking/highlighting.

Core Features:

1. Article/Document Reader: Users can upload or import articles, documents, or ebooks to read within the app.
2. Distraction-Free Mode: A mode that eliminates notifications, removes unnecessary UI elements, and adjusts the screen to be less visually distracting (e.g., minimal UI, dark mode, focus timer).
3. Customization Options: Users can choose between different font styles, sizes, and background colors for optimal reading comfort.
4. Bookmarking and Notes: Allow users to bookmark sections and add notes for future reference.
5. Reading Progress: Track user progress in the document and show it as a percentage.

Requirements:

• Design three screens:
  1. Library/Home Screen: Display the user's saved articles/documents and options to import new content.
  2. Reading Screen: The main reading interface with distraction-free options (e.g., full-screen mode, font settings).
  3. Customization Screen: A settings screen where users can adjust fonts, background themes, and toggle the distraction-free mode.
• Focus on creating a calm, distraction-free experience that encourages deep reading.
• Ensure the design is minimal yet functional, giving users easy control over their reading preferences.

Deliverables:

• Wireframes or high-fidelity mockups for the three screens.
• A brief explanation (100-150 words) about how the design promotes focused reading and eliminates distractions.

Design a desktop app that combines task management (To-Do lists), Pomodoro technique for time management, and streak tracking to motivate users. The app should help users stay productive by organizing tasks, breaking work into Pomodoro intervals, and rewarding consistent usage through streaks.

Core Features:

1. To-Do List: Users can create, organize, and prioritize tasks.
2. Pomodoro Timer: A built-in timer to follow the Pomodoro technique (25-minute work sessions followed by 5-minute breaks).
3. Streak Tracking: Track daily or weekly streaks based on task completion or usage of the Pomodoro timer.
4. Progress Overview: A dashboard that shows the user's current streak, completed tasks, and productivity stats.

Requirements:

• Design two screens:
  1. Home/Dashboard Screen: Show the user's task list, Pomodoro timer, and streak information in a simple and visually appealing way.
  2. Task Creation/Management Modal: Allow users to add new tasks, start/pause timer for a task, and mark tasks as completed.
• The app should focus on ease of use, combining the three core functionalities seamlessly.
• Prioritize clear visual cues for task progress, timer states, and streak tracking.

Deliverables:

• Wireframes or high-fidelity mockups for the two screens.
• A brief explanation (100-150 words) about your design decisions and how they enhance productivity and motivation for users.

Design the user interface for a web-based Form Builder tool that allows users to easily create, customize, and share forms for data collection. The tool should enable users to drag and drop different input fields, customize the form's layout, and preview the form before publishing.

Core Features:

• Drag-and-Drop Interface: Users can drag various input fields (e.g., text box, checkboxes, radio buttons, dropdowns, etc.) into the form canvas.
• Field Customization: Allow users to edit labels, placeholder text, and validation rules (e.g., required fields).
• Form Layout Control: Users can arrange fields, create sections, and choose between different form layouts (single column, multi-column).
• Form Preview: Provide a preview option where users can see how the form will look to respondents.
• Form Sharing: Include options to share the form via a link or embed code.

Requirements:

• Design three screens:
  1. Form Builder Screen: The main interface where users can drag and drop fields, customize them, and arrange the layout.
  2. Field Settings Screen: A modal or sidebar where users can edit individual field properties (e.g., change label, add validation rules).
  3. Form Preview Screen: Display the final version of the form as it would appear to respondents.
• Prioritize ease of use, allowing non-technical users to quickly build and customize forms.
• Ensure that the interface is intuitive and the drag-and-drop functionality is smooth.

Deliverables:

• Wireframes or high-fidelity mockups for the three screens.
• A brief explanation (100-150 words) of your design choices and how they simplify form creation for users.

We want to keep this challenge's difficulty level to low. But that doesn't mean you can't innovate. The brief is simple. Design a hero section for a website which sells this one only one, exclusive mechanical keyboard. Make it look so good that users will be tempted to buy it! Think how you make the user click on that BUY button. Use different pricing/discount strategy or a copy which creates scarcity.

You can use any of your favorite keyboard and design for it. Our's favorite is Lofree Block Mechanical Keyboard.

Don't limit yourself just with hero section. You can go for entire landing page. But, no pressure. Enjoy this one!

Library users often struggle to find specific books within large collections and may not know whether the books they want are available or checked out. Your task is to design an efficient system that allows users to search for books and provides clear information about the book's location and status, ensuring users can easily find and access the books they need.

Deliverables:

Low-fidelity wireframes for 3 screens (Optional):

• Search screen: Where users can search for books by title, author, or genre.
• Book detail screen: Displays the book's availability, location in the library (e.g., floor or section), and options to reserve or borrow.
• Reservation confirmation screen: Confirms the book reservation and provides further details (e.g., estimated pick-up date).

High-fidelity mockups of the same 3 screens, with a focus on:

• Search usability: Ensure that users can quickly and easily search for books using various criteria (e.g., title, author, genre).
• Book status: Provide a clear way to display the book's current availability (e.g., available, checked out, or reserved).
• User interaction: Ensure that interacting with search results, reserving books, or locating them is seamless and straightforward.

Feature Ideas:

• Save for later: Allow users to save books they are interested in for future reference or borrowing.
• Push notifications: Include an option to notify users when a reserved book becomes available for pickup or when a borrowed book is due for return.
• Library map integration: Provide a mini-map or directions to the specific shelf or section where the book is located within the library.
• Book suggestions: Offer similar or recommended books based on the user's search query, helping them discover more relevant books in the library.

Managing a busy inbox can be overwhelming due to the high volume of emails many users receive daily. Traditional email apps often lack robust filtering and organizational tools, making it difficult for users to quickly locate important emails. Your task is to design a user-friendly experience that allows users to manage their inbox more effectively, applying intuitive filters and organizing emails in a way that reduces clutter.

Deliverables:

Low-fidelity wireframes for 2 screens (Optional):

• Inbox with advanced filtering options: Design the inbox screen with an accessible filter system that allows users to filter their emails by various criteria such as sender, subject, date, and importance. The design should also allow users to mark emails for follow-up or prioritize them.
• Email detail screen with action options: Design the email detail screen where users can read an email and take action such as archiving, marking as important, or moving the email to a specific folder. Include an intuitive layout for performing these actions with minimal steps.

High-fidelity mockups of the same 3 screens, with a focus on:

• Email actions: Provide clear and straightforward options for managing emails (e.g., marking as important, archiving, categorizing) that enhance the inbox organization experience.
• User interaction: Ensure smooth and intuitive interactions for applying filters and taking action on individual emails.

Bonus Features:

• Smart folders: Offer a feature where users can create custom folders based on specific filters, allowing emails to be automatically sorted into these folders.
• Email scheduling: Allow users to set up reminders or scheduling options for important emails (e.g., reminders to respond or follow up).

In today's fast-paced world, users want to stay updated with the latest news in a personalized, organized manner. However, many news apps are cluttered, making it difficult for users to browse through relevant categories or focus on reading without distractions. Your task is to create a streamlined, user-friendly design that enhances the reading experience while allowing users to browse through various news categories effortlessly.

Deliverables:

Low-fidelity wireframes for 3 screens (Optional):

• Home/Feed screen: Displays a personalized feed of news articles based on user preferences (e.g., topics of interest such as technology, politics, sports). There should be options to browse by category, search for articles, or explore trending news. Include a clear hierarchy of headlines, featured stories, and categories.
• Article detail screen: Displays the full article in a clean, readable format. This should focus on maximizing readability and offering features such as saving the article for later, sharing it, and interacting with it (e.g., liking or commenting).
• Category selection screen: Allows users to choose or manage the categories they want to see more or less of (e.g., by selecting or deselecting topics such as business, entertainment, science). The interface should allow for easy customization of the user's news preferences.

High-fidelity mockups of the same 3 screens, with a focus on:

• Readability: Clear typography, appropriate spacing, and a clean design to minimize distractions while reading.
• Personalization: Easy ways for users to manage and customize their news feed based on preferences.
• Content hierarchy: An organized structure that highlights key stories, while also making it easy to explore additional articles by category or interest. Interactions: Clear options for saving, sharing, liking, and commenting on articles, with intuitive UI elements.

Bonus Features:

• Night mode: Implement a dark mode option for users to switch between light and dark reading environments, reducing eye strain during nighttime reading.
• Audio option: Consider adding an option where users can listen to articles being read aloud, with a clear control interface for play/pause and speed adjustment.

In current food delivery apps, the search functionality often lacks flexibility and can be overwhelming due to the large number of results. Users want to find exactly what they’re looking for quickly, whether it’s a restaurant or a specific dish, and may have preferences related to cuisine type, delivery time, or dietary needs (e.g., vegan, gluten-free). Your task is to redesign the search bar to address these issues and offer a seamless, intuitive experience that improves user satisfaction and increases the likelihood of ordering.

Deliverables:

• Low-fidelity wireframes for 3 screens (Optional):
  • Home/Search screen: Features a redesigned search bar prominently displayed, showing the ability to search for restaurants or dishes. There should be easy access to filters, allowing users to refine results based on cuisine, delivery time, and dietary preferences.
  • Search results screen: Displays search results with applied filters, showcasing how the redesign improves the clarity of information and helps users quickly find relevant options.
  • Filter selection screen: Offers a detailed interface where users can select filters like cuisine type, delivery time, price range, dietary preferences (e.g., vegan, vegetarian, etc.), and other relevant categories.
• High-fidelity mockups of the same 3 screens, focusing on:
  • A clean, minimal search bar that is easy to use.
  • Intuitive filter options that don’t overwhelm the user.
  • Clear presentation of results, ensuring key information like delivery time, ratings, and pricing is easily visible.
• Bonus Features:
  • Predictive search suggestions: Implement auto-suggestions that predict what users are searching for (e.g., suggesting “Pizza” after typing “Piz” or suggesting “Italian restaurants”).
  • Voice search: Consider how voice search could be integrated to make the search experience faster and more convenient for users.
  • Saved searches/filters: Allow users to save their favorite searches or filters for quicker access next time.

The dashboard should provide users with an overview of their daily, weekly, and monthly fitness goals (e.g., steps, workouts, calories burned). It should allow users to track progress, set new goals, and visualize their fitness journey.

Deliverables:

• Low-fidelity wireframes (optional) for 3 screens:

  • Dashboard screen: Provides an overview of current progress toward fitness goals, with visualizations like progress bars, charts, or graphs.
  • Goal-setting screen: Allows users to set or adjust daily, weekly, and monthly fitness goals (e.g., steps, calories, workout time).
  • Detailed progress screen: Shows a breakdown of achievements for each category (e.g., steps, calories burned, workout time), with trends and data visualization over time.
• High-fidelity mockups for the same 3 screens, focusing on:
  • Visual hierarchy and clarity of information.
  • Engaging visualizations to represent progress and motivate users (e.g., graphs, achievement badges).
  • Consistent use of color, typography, and UI elements to create a cohesive design.
• Requirements:
  • Usability: Ensure that the dashboard is intuitive and easy to navigate, with clear access to key metrics and goals.
  • Data visualization: Use charts, graphs, or other visual elements to present complex data in a user-friendly and motivating way.
  • User experience: Design the flow so users can easily set, modify, and track their fitness goals.
  • Mobile-first design: Prioritize a mobile-first approach, making the experience smooth on smartphones.
• Bonus: Create a prototype (using Figma, Adobe XD, etc.) that demonstrates interactions, such as updating goals or viewing progress over time.

Design a product comparison page for an e-commerce platform (Ex: Apple iPhone), enabling users to compare the features, prices, and specifications of similar products side by side. The goal is to help users make informed purchasing decisions quickly and easily.

Deliverables:

Low-fidelity wireframes for 2 screens:

• Product selection screen: Users can select products to compare (up to 4 items).
• Product comparison page: Displays selected products side by side, allowing users to compare key features, prices, reviews, and other relevant details.

High-fidelity mockups of the product comparison page with a focus on:

• Clear organization of product information (features, price, reviews, ratings).
• Visual hierarchy that guides the user’s attention.
• Ability to quickly highlight the differences between products.

Requirements:

• Usability: Ensure the comparison is easy to read and navigate, especially on mobile. Use comparison tables, visual cues, or other UI elements to make differences between products stand out.
• Information design: Choose which key details (e.g., features, prices, ratings) are most important for users to compare and display them in a clear, concise manner.
• Visual design: The page should be visually appealing, with attention to consistency in typography, colors, and spacing.
• Interaction design: Allow users to interact with the comparison page—e.g., remove items, highlight differences, or sort by specific criteria.

Bonus:

Create a prototype (Figma, Adobe XD, etc.) showing the interactive elements, such as selecting products to compare or sorting by features.