Note-taking design for a tech bootcamp website
BedtimeStories is an iOS app that lets parents easily create personalized bedtime stories for their children. Using OpenAI's API for story content and DALL-E for illustrations, the app offers a simple prompt or detailed template for story creation. All stories are saved within the app, making bedtime a magical storytelling adventure.
Project status: In progress
- UI/UX Design: In Figma.
Wireframes finished, Mockups in second round of improvements.
- Development: Xcode with SwiftUI.
The prototype is finished, it includes a successful network connection to the OpenAI API to get the story text and image. The stories are persisted using CoreData and displayed on their dedicated view, where users access , favourite and delete their stories.
This project focuses on a note-taking flow for a tech boot camp website. This design flow allows users to watch their video lessons while taking notes. A toolbar with note-taking elements is available to support the user note-taking process. Users can also access their notes in each respective lesson, or they can access all their notes created for the course.
Design a note-taking flow for an online tech bootcamp.
This is the second project in the Google UX Designer certificate. In this phase of the certification the goal is to learn about responsive web design, and the assignment is to design for different screen sizes in Adobe XD.
Some students cannot keep their lesson notes well organized, so it is difficult for them to study from their notes, and they tend to feel frustrated about it.
Create a note-taking flow that allows students to keep their notes well organized and in one place, and add elements to support the note-taking process.
I conducted five remote interviews with users of online tech bootcamp or online tech courses. The purpose of the interviews was to empathize with the users and understand their note-taking process.
Problem statement: Ryan is a UX bootcamp and university student, who needs a note-taking system that allows him to keep his notes concise and well organized because it is difficult for him keep the notes in his notebook organized.
%20AFD.png)
Problem statement: Sara is a student of a coding bootcamp who needs a note-taking system that allows her to edit and print her notes because she prefers to keep all her notes on her computer, so she has easy access to them anytime.
%20PNG.png)
I learned through Ryan's journey map that it is important for this persona to keep his notes well organized, because this persona improve its learning process through his lesson notes.
.001.png)
The main flow allows users to log in to the website, open a lesson, see the video transcript and their notes, and use the notes toolbar so they can add elements to their notes.
I conducted two rounds of remote moderated usability studies with four participants. During the first round, the participants interacted with a low-fidelity prototype that all participants found easy to use, but they found the toolbar confusing. In a second usability study with a high-fidelity prototype, all participants found the note-taking flow and toolbar easy to use and understand
The demo presented below has been developed using SwiftUI. Currently, I am focusing on enhancing error handling and improving user notifications. The UI will be updated once the mockups are finalized.
Functionality:
The app offers two distinct modes for creating a story:
1. Template Mode: In this guided mode, users fill in the fields and select buttons to create a story that is more specific to what children might enjoy.
2. Quick Mode: Users can enter a quick prompt to generate a story on the fly.
Powered by AI technology, this app crafts unique bedtime stories, complete with illustrations, specifically tailored for each child.
App back-end process:
1. Network Call: Upon receiving user input, a network call is made to OpenAI’s API.
2. Story Generation: The API response includes a detailed bedtime story text and an accompanying image generated using the DALL-E model.
3. Data Persistence: The story is saved using CoreData and the image is stored in the Documents Directory.
4. Stories Management: Users can view, favorite, or delete their stories as needed.
Participants of the moderated usability study found the note-taking flow practical and useful. They mentioned they would like to have a tool like the note-taking toolbar in their courses. Finally, they mentioned that they liked the overall UI design.
During this project, I learned the design process for a website and responsive web design. I learned how to use Adobe XD, and this project allowed me to reinforce my knowledge of the UX design process.