This is how we did on the UX/UI Hackathon. We created a company called BREWTEAFULL, an online shop selling loose leaf tea.
As well as the web page we....
-Used Jamboard for brainstroming
-Created two user stories and personas
-Mapped the user jounrney on a flow diagram
-Created low-fi and high fi wire frames. (https://miro.com/app/board/uXjVO1QyeHw=/?share_link_id=728376851985 , https://www.figma.com/file/CnqR3P0gP7bxj4OVyObaOO/BrewTeaFull-(Shared))
For this hackathon, you'll be using the business idea that you brainstormed during the mindset session.
You'll need to go through the UI/UX process we've been examining this week, including:
- User stories and at least one user persona
- User journey flow diagram (you can use the draw.io extension in VS Code to make this inside the repo)
- Low- and high-fidelity wireframes (using tools like Miro and/or Figma)
- Color scheme - remember, you can create CSS variables to manage things like colors easily!
- A plan that breaks down how you'll code before you code as usual, using computational thinking to plan the logic of your page before you start to build (this plan should include how you're going to organize your CSS in a way that's consistent, readable, and maintainable)
Remember to iterate - first, get your users in mind and design looking good. Then build an MVP version - what is the quickest way you can deliver value and start getting insight? - and then, if you have time, you can consider adding more features.
At the end of the day, when you present what you've created, be sure to also show your planning process and how you crafted your UX and UI.