In this project, we will be developing a journal app that allows users to write and share their journals anonymously, with other users able to comment on them and support them. This app will provide a safe, engaging, and interactive space for users to express themselves and connect with others without judgement. The project will be carried out in phases, with clear milestones to track progress and ensure timely delivery.
We will need four key components: UX design, UI design, frontend, and backend.
Backend development and wire-framing should ideally start concurrently. As wireframes define the app's visual layout and required features, backend development can align accordingly, determining necessary views and data collection processes.
<aside> <img src="/icons/crayon_brown.svg" alt="/icons/crayon_brown.svg" width="40px" /> Wire-Framing sketches → wireframes → Validation Designers create low-fidelity representations of the interface. These wireframes outline the structure and layout of key elements, such as navigation, content, and functionality, without including detailed design elements like colors, images, or typography.
</aside>
<aside> <img src="/icons/server_yellow.svg" alt="/icons/server_yellow.svg" width="40px" /> Backend Development Modeling → Views → Testing ****The backend developer can start a little bit after the first wireframes, at this stage there is insight about the app content and functionalities like : user information that will be shared with the app, views that will be needed on each page.
</aside>
Same thing for the ui design and front-end, they start simultaneity
PS : backend development will continue till the end of the sprint, it does not stop with the wireframes
<aside> <img src="/icons/color-palette_green.svg" alt="/icons/color-palette_green.svg" width="40px" /> UI Design Design → Make It Responsive UI design aims to create visually appealing, intuitive, and functional interfaces that effectively communicate the product's purpose and enable users to accomplish their goals
</aside>
<aside> <img src="/icons/snippet_purple.svg" alt="/icons/snippet_purple.svg" width="40px" /> Front-End Development Dev the ui → Link to BE → Testing After the first screens are done in the ui step, the font-end developer can start developing. The first step is the mockup (the interface without any real data) Then we link to the backend. And we repeat for each task
</aside>
| MILESTONE | DESCRIPTION | PRICE |
|---|---|---|
| All the wireframes | Wireframes for the whole app to make sure we are on the same boat before starting | 300$ |
| Creating a journal | • On-boarding page | |
| • Sign up page | ||
| • Create journal page |
◦ Choose prompt
◦ Write
◦ Share or not | 400$ |
| wellness page & The Landing Page | • The wellness page (list of public journals) • Journal page ◦ read the whole journal ◦ like ◦ comment • Landing Page | 500$ | | Profile | • Profile Page ◦ change name and update password ◦ delete account • My journals • My journals Detail page ◦ change if it public or not ◦ delete option | 300$ | | Testing and deployment | | 0$ |
For this project, we will be using Upwork Direct Contracts to facilitate payments. This will ensure clear tracking of progress, protect both parties, and offer transparency.
Upwork Direct Contract Setup: