Weekend Hackathons
One screen, one product, one weekend
- Use your design chops to improve real world products
- Submit your design here or post it on Insta or X
- Win prizes worth Rs 5K every weekend
- Cityflo
- Amazon Alexa
Amazon Alexa is a voice-based bot system. A user can ask Alexa to perform tasks such as playing music, telling jokes, and reading the latest news through her voice. It can even help control smart applicants in your home.
The Alexa app shows the given screen. Improve this screen so users can easily see the benefits and take the next steps like adding a new service.
Note: You can improve either the screen of the iOS or Android app. Please do not use any annotations or explanations in your designs
- Canva
Canva is a design tool for creating banners, videos, presentations and more. This screen is shown to a user just after login.
Improve this screen, so that it appeals to users, both new and returning. You will need to prioritise elements that actually matter to a user and at the same time reduce complexity for new users, with your design
Note: You need to improve only the highlighted portion of the screen for desktop, and only the first fold. Please do not use any annotations or explanations in your designs
- Product Hunt
Product Hunt is a platform where you can launch major versions of your product to get early traction and feedback from product enthusiasts.
The screen shows a mobile view of a product's 'About the launch' section. Improve this design to increase readability and highlight the right information.
You can add or remove elements as deemed fit.
Note: You need to design only the 'About the launch' section. Please do not use any annotations or explanations in your designs. This challenge is for the Product Hunt mobile site
- Wikipedia
Wikipedia is the world's online encyclopedia. Given the prominence of search based answers and tools like ChatGPT, its significance today is reducing. Every so often, Wikimedia, which is a non-profit behind Wikipedia, runs a donation drive. The highlighted section is shown to a user when they navigate to a page on Wikipedia for the first time.
Improve this section, so as to make it more compelling for the user to donate to the Wikimedia Foundation. You may choose to completely change the message shown, as well as its form, layout and location on page. However, the panel for donation needs to be visible in the first fold of the page.
Note: You need to design only 1 screen for the desktop view and only the first fold. Please do not use any annotations or explanations in your designs
- Digiyatra
Digiyatra is an app that aims to make the entry into airports seamless for travelers. Flyers can add their boarding pass and make their airline boarding experience completely paperless, without the need to carry or show any personal ID.
Improve this screen, which is the virtual boarding pass shown by travelers at entry, security and boarding points. The goal should be to enable easy access (to airport/flight) and easy availability of flight, passenger and gate information. You may also consider adding nudges (transactional/info/commercial), given this screen will be viewed several times by the flyer.
Note: You need to design only 1 screen of the mobile app (Android or iOS). Please do not use any annotations or explanations in your designs
- Housing
Housing is a platform where you can find properties for Buy and Rent. It competes with multiple players in the market like MagicBricks, 99acres and more.
This screen is from Housing's mobile app and shows a detailed view of the residential property available for rent.
Improve this screen to make it easier for users to discover and identify relevant information about the property and take the next steps. You can add or remove elements as deemed fit.
- Swiggy
Swiggy is a delivery platform, primarily used for food delivery. The company has a cancellation policy which is shown as the image above, just before placing the order.
Improve the copy and design of this pop-up so as to communicate the policy more effectively. The goal should be that users both read and understand what the policy is. You can use nudges, illustrations etc to better communicate the message
Note: You need to design only 1 screen of the mobile site. Please do not use any annotations or explanations in your designs. This challenge is for Swiggy mobile site and not the app
The 2024 Olympics are on and Google provides a quick way to know the schedule of upcoming events. This view is especially useful if you want to know when athletes from your country are in action.
Improve this screen to reduce the clutter and bring in overall consistency across elements. The key ask is for the user to be able to quickly know the upcoming events and timings. Post the redesign, the page should still look like a part of a Google search result.
Note: You need to design only 1 screen of the mobile site. Please do not use any annotations or explanations in your designs
- Google Pay
Google Pay is a payment app primarily used for UPI payments at merchants, recharges and bill payments.
Reimagine and redesign the homescreen of the app. You can consider adding new elements/use cases & nudges or drop elements that you feel are not needed. The goal is to create a fresh design & improve prioritisation, while also maintaining usability and functionality, as before.
Note: You need to design only 1 screen of the mobile app (Android or iOS). Please do not use any annotations or explanations in your designs
- Razorpay
Razorpay is a payment solutions provider for businesses. One of the key use cases for which businesses use them is to take online payments from their customers.
Razorpay makes money by charging a percentage basis the total transaction value. The given screen is a part self-serve dashboard using which the businesses can download the Monthly Invoice (i.e. total fees charged by Razorpay to the business)
In B2B transactions, an invoice is needed by business for accounting and tax filing purposes.
Improve this screen to simplify it for a business user to quickly download the monthly invoice.
- Airtel
Indian telecom operators recently increased tariffs by ~20%, making the plans pages more important for customers, as they look to optimise their spends vs value received. Airtel is one such operator that has increased tariffs.
Improve the design of this plans listing page so as to ensure that customers are easily able to understand plan benefits and compare them. Also, consider adding/improving nudges and/or removing redundant elements..
Note: You need to design only 1 screen of the mobile site. Please do not use any annotations or explanations in your designs
- Ixigo
Ixigo is a travel booking app with train bookings, via Indian Railways, as its primary usecase. The company recently IPOed and also underwent a redesign. The earlier design was known to be efficient, user friendly and extremely functional.
Improve the design of this screen so as improve readability, bring in consistency and also make it easy for users to get the key information they need, while trying to book a train ticket. Also consider improving the nudges, pills and other design elements shown. Where possible try and reduce clutter.
Note: You need to design only 1 screen of the mobile app (Android or iOS). Please do not use any annotations or explanations in your designs
- PhonePe
PhonePe is a payment app focussed on UPI payments, besides several other payment related use cases. It offers users the option to pay utility bills and also get reminders.
Improve this screen which is a detailed view of a payment reminder for electricity bill. The goal should be to prioritise information better, improve legibility and if possible improve the visual aesthetic. The resdesigned screen should look like a PhonePe screen (maintain design consistency). You can add/remove elements/nudges, but ensure the key information is retained
Note: You need to design only 1 screen of the mobile app (Android or iOS). Please do not use any annotations or explanations in your designs
- Discord
Discord is a community messaging and engagement platform. For a returning user, it can be quite daunting to catch up on unread messages, especially if there are multiple channels in a community.
How can this problem of unread messages be solved for a user? You can add new sections/elements as needed or create a new screen for such messages.
Note: You need to design only 1 screen for the desktop view and only the first fold. Please do not use any annotations or explanations in your designs
- Cred
Cred is one of the leading fintech app that pioneered giving benefits when you do a credit card payment through its app.
Over time, it has added more use cases to the app.
One such use case is that users can now track eligible offers for their credit card.
Improve this screen to make it easier for users to discover and identify relevant offers across their credit cards. You can add or remove elements as deemed fit.
Note: You need to design only 1 screen of the mobile app (Android or iOS) and only the first fold. Please do not use any annotations or explanations in your designs
- McDonalds
McDonald's India has an India focussed app, predominantly used for availing exclusive offers in stores as also food delivery
Redesign this screen, to look more like the homescreen of a food (QSR) app, to be used at outlets + delivery. Focus on elements that need to added to make this screen more appealing to users, as also personalisation elements. You can follow your own design style or reuse McDonalds' existing style.
Note: You need to design only 1 screen of the mobile app (Android or iOS) and only the first fold. Please do not use any annotations or explanations in your designs
- Netflix
Netflix, the original video streaming OTT, is facing headwinds, both globally and in India. It has revised its plans several times to match with how Indians perceive and value content. Jio's recent push for low priced premium plans has also impacted Netflix.
Improve the design of this plans page which is shown to a user when restarting their subscription. The goal should be to make it easy for the user to compare & understand the differences in the plans and choose the appropriate one. Nudges, hints can be welcome additions, but should not be overly done.
Note: You need to design only 1 screen of the desktop site and only the first fold. Please do not use any annotations or explanations in your designs
- Blinkit
Blinkit is a quick commerce platform aimed at impulsive and last minute purchases, eg grocery. The app's design is similar to/based on its parent company: Zomato
Improve the design of the order summary page, which is presently a near replica of Zomato (a food delivery app), to reduce clutter and make it relevant to quick commerce users. You can also think of adding/removing elements based on their relevancy for a quick checkout.
Note: You need to design only 1 screen of the mobile app (Android or iOS) and only the first fold. Please do not use any annotations or explanations in your designs
- mygate
Mygate is an app used by societies, especially in cities, to manage access control for various visitors: deliveries, cabs, maids, guests. The company recently underwent a major rebranding exercise, to position itself as a 'life experience tech' company.
Improve this screen which is used to show approvals given for entry into a society, by a user. Especially focus on the card layout, style and elements shown, as well as the priority of content within each card. You can choose to add/remove tags and their style/color.
Note: Note: You need to design only 1 screen of the mobile app (Android or iOS) and only the first fold. Please do not use any annotations or explanations in your designs
- HDFC Bank
HDFC Bank is the largest private bank in India. It recently launched a redesigned app after working on it for more than 3 years. However, based on customer feedback, the app's design leaves a lot to be desired.
Reimagine the above screen (homescreen) to match with what a customer expects from a modern bank in terms of overall design. You are free to adopt your own design language. Also make sure that the primary usecases that a user expects, are available in the redesigned screen.
Note: You need to design only 1 screen of the mobile app (Android or iOS) and only the first fold. Please do not use any annotations or explanations in your designs
- ECI 2024 Website
The Indian General Elections 2024 have begun. The ECI (Election Commission of India) has created a dedicated website for the 2024 elections. However, most of the important information for voters, is below the fold and not easily accessible.
Redesign the first fold of this site so has to highlight the key elements, data and links which are relevant to voters such as: searching your name in the electoral roll, knowing your polling station, finding the candidates in your constituency. You can also highlight any other information that you feel would be useful for voters. You are free to choose your own design guidelines and are not required to follow the ones shown on the present site.
Link: https://elections24.eci.gov.in/
Note: You need to design only 1 screen of the mobile website and only the first fold. Please do not use any annotations or explanations in your designs
- Flipkart
Flipkart, one of the largest Indian e-comm platforms, runs a number of offers: from banks, partner, card & financing companies, especially with high value electronic goods. These offers are all clubbed together on the product page, in a section.
Improve the design of this offers section so that it is easy for a user to spot a relevant offer. Also try and reduce the clutter, inadvertently caused due a number of offers running at a time. The user should be able to distinguish between quality & meaningful offers vs those that are meant to upsell other partner offerings.
Note: You need to design for desktop and only one screen. Please do NOT use annotation or explain your design
- MakeMyTrip
Make My Trip is an online travel agent (OTA) platform. It is one of the preferred websites for booking flight tickets.
Improve the design of this screen, which is shown to a user when booking a flight. The goal is to showcase the various options available, as they bring in additional revenue, while not over complicating the overall booking experience. You only need to redesign the modal/popup shown. You may use additional nudges, data points, to convince a user.
Note: You need to design for desktop and only one screen. Please do NOT use annotation or explain your design
Reddit is a social networking platform, which is slightly different from the traditional ones: For eg. most people on reddit use anonymous handles. It has been in the news due to its recent IPO. Core to Reddit's offering are its handles or communities (/r) that ppl can join/follow.
Improve the design of the Communities tab on the Reddit app. This tab presently houses cards of communities worth joining and also communities which the user is already a part of. The design should reflect user expectations from such a tab. This tab is different from the feed, which is shown under Home.
Note: You need to design only 1 screen of the mobile app (iOS or Android) and only the first fold. Please do not use any annotations or explanations in your designs
- Acko
Acko is an online insurance platform where users can buy insurance across health, life, motor, travel etc. Acko has tried to simplify the insurance purchase journey using a minimalist approach. For health insurance, it provides only 2 plans, after asking the user a couple of questions (on age, location).
Improve this screen so as to provide clearer details to the user on the underlying insurance benefits, terms (what is and is not covered) and pre-requisites if any. You may also choose to improve the copy, add/remove elements, show elements that maybe hidden, but are important.
Note: You need to design only one screen and only the first fold of the mobile site. Do NOT use any annotations or add any explanations to your design
- Amazon
Amazon Fresh is the grocery arm of Amazon. In India, one can order fresh grocery, vegetables etc from Amazon Fresh. Also this entity is housed inside Amazon's existing website/app.
Improve the shown checkout page from the perspective of a customer who is used to seeing the regular checkout page that Amazon serves. The goal is to make the page seem like it is a part of Amazon's site (rather than a different entity). Also, make it clearer to the user that she/he cannot checkout unless the required cart value is matched. You need to redesign only the highlighted section.
Note: You need to design only one screen and for desktop. Do NOT use any annotations or add any explanations to your design
- Decathlon
Decathlon is a sports goods and apparel maker. Their online site serves as an important channel, to complement their large stores. Consider the case where a user is trying to explore bicycles on Decathlon’s site.
Improve the design of the card used to display details for a cycle. You DO NOT need to change any of the other elements of the page. The goal is to make the experience of exploring this product simpler. You may choose to add/remove elements, nudges as well as the overall information shown in the card. Also, you can refine the copy shown in the card to match user expectations.
Note: You need to design only one screen and only the first fold of the mobile site. Do NOT use any annotations or add any explanations to your design
- EatSure
EatSure is an online food delivery app, similar to Swiggy/Zomato. However, it’s focussed on only specific brands i.e. cloud kitchens or dark kitchens, from Rebel Foods
They have a loyalty program, within the app, called SureSquad
Improve this screen to better communicate benefits of the program, tiers and overall information about the program. You may also consider improving the overall copy, besides the design elements. You can make certain assumptions while designing, but they should have some basis.
Note: You need to design only one screen and only the first fold of the mobile app (Android/iOS). Do NOT use any annotations or add any explanations to your design
- Uber
Uber has launched a pilot of shuttle bus services in a few cities across India. The offering is catered towards officegoers looking for a regular, convenient and affordable option to travel to work. The booking for such rides happens within the existing Uber app. This screen is shown to users when they try to explore the different routes available near them.
Improve this screen so that users can better understand the options available to them and feel confident about the new offering. The user should be shown only the information that is relevant to him/her. Moreover, discovery of the routes (home to office and vice versa) should be easy. You can consider adding nudges, categories and elements that could help the user.
Note: You need to design only one screen and only the first fold of the mobile app (Android/iOS). Do NOT use any annotations or add any explanations to your design
- BigBasket
BigBasket is an online grocery provider, that was acquired by the Tatas. Customer can choose a slot for delivery during checkout.
Improve this screen to reduce cognitive load for a first time user of the product. You may make certain assumptions on the delivery slots shown, as well as consider adding nudges to make slot selection easier. Remember, this screen is shown as the last step before payment, and hence likely has a higher chance of cart abandonment due to cognitive load. You need to improve only the highlighted section
Note: You need to design for desktop and only one screen should be shown in your design. Please DO NOT annotate your design or provide any explanations
- ChatGPT
OpenAI recently launched a GPT Store where ChatGPT Plus users can use custom GPTs developed by creators. The store can be found within the ChatGPT app.
ChatGPT provides some basic categorization like Featured and Trending apps.
You need to improve the design of this page to aid in better discovery of GPTs, as well as surface up more information about a GPT. You may make assumptions about data points, nudges and information to be shown/hidden. The idea is to make it easy for users to find relevant GPTs.
Note: You only need to design for the first fold of the app (either Android/iOS). Also please DO NOT annotate your designs
- JioMart
JioMart is an e-commerce platform and a joint venture between Jio Platforms and Reliance Retail. Customers can buy groceries, electronics and other goods on it.
JioMart’s homepage highlights two distinct use cases, which are essentially brands: JioMart & Smart Bazaar, representing the interests of the two companies involved. You need to redesign this screen, so that the difference between these two brands is better highlighted. Your design should also try and reduce the confusion that showing the brands this way creates.
Note: You only need to design the first fold for mobile web. Do NOT annotate your designs
- Notion
Notion is a document creation platform and an alternative to Google Docs, Microsoft Word et al. Notion recently launched its own Calendar App.
The above screen is shown to a new user of the app, after basic Google Authentication (and fetching of calendar entries). Reimagine this first screen so as to differentiate Notion Calendar from other Calendar apps, especially for existing Notion users.
Note: Your design should only be for the first fold view for Dekstop. Please DO NOT add any annotations/notes to your design submission
Notion Calendar:https://calendar.notion.so/
- Groww
Groww is the largest broker in India and lets users invest in Stocks and Mutual Funds via its app and website. Generally, for existing investors, the broker’s app/website is the go to place to track their investments and also to make new investments.
Redesign this screen, so that investors get key data points on investments. You can retain the ‘Product & Tools’ section as is. Your design needs to cater to existing investors, who have only stock holdings.
Note: You need to design for the Groww mobile app (Android or iOS) and only for the first fold. Please do not annotate the designs that you submit
LinkedIn recently started collaborative articles. This is how a collaborative article shows up in a user's feed, when someone from your network has contributed to it.
Improve the design of the specific card (highlighted) so that a user notices this new type of content and also feels like reading it. The design should provide some differentiation from a normal post while ensuring the unit feels like a part of the Linkedin app.
Note: Your design should be for the Linkedin Android or iOS app. Only one screen (first fold) should be submitted
Read more about collaborative articles
- Gumroad
Gumroad is an e-commerce marketplace where individuals and companies can sell Digital Goods such as Ebooks, Software licenses, Templates, Tutorials, and more.
When creators list their products on Gumroad, they get a public profile available to them. You can think of it as a microsite for them. Most creators use this link to share it further on the internet. It has four main elements: About, their listed Products, their posts, and an option to Subscribe to the Creator. However, the current layout is rigid and doesn’t do much justice in giving a good first impression (first fold).
Improve the Creator’s profile screen (first fold) to ensure a visitor gets a good first impression of the creator and makes them want to engage further i.e. either browse products, read their posts, or learn more about the Creator
- Figma
Figma is the go to tool for designers. Its UI has remained largely the same since inception, with tweaks and additions being made over time, for new features and offerings. The ‘Recent’ files view has always been a bit confusing and cluttered. This is the first screen shown, when you open Figma (logged in).
Improve or redesign this screen to aid easier file discovery, categorisation and general accessibility. Your goal should be to reduce clutter. The user persona you need to focus on is individuals (and not Teams or organisations) i.e. the screen shown here
Note: Your design should be just one screen for desktop.
- Zomato
Zomato is predominantly a food ordering platform. However, given its scale and user base, it is also an ideal platform for restaurant partners to advertise. The order tracking screen becomes a very important property to advertise, since users will spend a lot of time on it, while waiting for their orders.
Improve this order tracking screen to strike a balance between business needs (showing offers, ads, Zomato Gold promotion) and the primary use case, which is order tracking.
Note: Your output should be only one screen (one fold only). You need to design for the Zomato app on either iOS or Android
- Microsoft Teams
Context:
Micrososft Teams is used by organisations for video calls with both internal & external stakeholders. The screen depicted is shown to a user who is trying to join an internal call, via a browser.
Improve this screen so as to reduce cognitive load for the user, who most likely is not a regular Teams user. The goal should be to simplify the design, improve prioritisation of elements, while ensuring existing functionality is retained.
Note: Your output should be only one screen. You need to design a screen for desktop.
Whatsapp recently launched a new feature called Channels, allowing people to privately share updates
Improve this screen to help better content discovery within channels, new channel discovery, and overall engagement of this feature.
Note: You need to make design changes only for this screen.
- Disney+Hotstar
Maxview is a new vertical video format introduced by Disney+Hotstar for the Cricket World Cup 2023.
Improve this screen to drive better monetisation (for companies via ads) and engagement (for users), for Live events
Note: No changes can be made to the actual video content or video aspect ratio (9:14)
Reference:
https://indianexpress.com/article/technology/tech-news-technology/disney-hotstar-introduces-vertical-video-streaming-for-cricket-world-cup-2023-8966573/
FAQs
Participation in the event is completely free.
It opens on Friday 10 PM and closes on Monday 10 AM (IST).
Yes it is open to all.
This is an individual event.
You can register and submit it on the site or share it on Insta or X tagging our handles.
The submission should be an image (png or jpeg). This can be exported from a design tool (such as Figma, Adobe XD etc) or any tool that you are comfortable using. However, please do not post hand-sketches or only wireframes, as the evaluation is on the quality of design output.
Note: Please do NOT add any annotations, explanation notes to the design. The output should be pure design.- These are design focussed challenges. So the evaluation is based on the quality of the design output. Given time constraints, we realise that putting out pixel perfect designs may not be possible. Hence, more weightage will be given to clear communication of the improvements (in terms of design) and an acceptable design quality. Wireframes and hand sketches are discouraged.
- Also, we expect basic design hygiene to be followed: alignment, font and color consistency et al
- Depending on the challenge context, you may choose to use/change the products design guidelines. We leave this discretion to you.
- We are NOT looking for ‘glitz designs’, if you get what we mean! Functional, quality output is what is needed
We will select a winner and a runner-up for each challenge.
- Winner: Eldorado (worth Rs 2500) + Amazon voucher (Rs 500)
- Runner-up: Eldorado (worth Rs 1999) + Amazon voucher (Rs 250)
Learn more: Eldorado
Terms & Conditions
- Winners will only be announced if there are a minimum of 5 submissions.
- UXHack reserves the right to cancel a challenge once launched.
- The brands considered in public challenges do not have any role to play in these challenges. This is solely an initiative by UXHack to improve these products as part of skills showcase and learning objectives of our users. All such brand logos or any other media shown belongs to respective brands and is not owned by UXHack.
- Any form of plagiarism will lead to disqualification of the entry.