Introducing Our Tied Camel 🐪

Our Tied Camel (OTC) is the digital workspace for Muslims to track their time, prayer (salah) and tasks in one customisable space.

This is a web application designed to help Muslims balance their daily life and Islamic responsibilities. The features of our workspace include popular productivity tools, like the pomodoro timer and faith-based tools, such as a prayer tracker.

I'll include the full features below but first, I wanted to share the design journey that led to the final version of our workspace. This is an idea that has been refined and developed over the last year.

The Design Journey

The web application for OTC has been built by a no-code developer in Bubble based on these designs. Tools I used were Miro, and Figma. I’ve included the courses that helped me learn Figma under the ‘mock-up’ section.

Sketch

Getting started is always the hardest part. That's why, the first design for OTC was a very rough 2am sketch. I kept holding back thinking I needed to use an online wireframing tool or learn Figma. But, this was the best way to start. A simple sketch that has been the foundation for all the designs that followed.

Wireframe

In April, I used that sketch to start working on a wireframe for our Bubble developer. For this, Miro was recommended and it was great. I liked that there was ready to use templates and tools, and plenty of ways to add annotations to the design. I can't show the full board but from the image, you can already see I really liked annotating.

This allowed me to worry less about design and instead, focus on deciding which features were most important for the minimum viable product (MVP). I was less focused on perfecting the details and more attentive towards the general layout and functionality.

Mock-up

The following month, I began to learn Figma and UX / UI design using SuperHi's Plan, Design + Code Your First Website course. In Lesson 2 of the course, Figma is covered and I found this to be the perfect introduction for me as a beginner. Especially because I wanted to create moodboards and brand assets before designing mock-ups.

Later, I completed Codeacademy's Introduction to UI and UX Design course that covered wireframing and prototyping in Figma. This helped me develop my knowledge, and prepare interactive mock-ups. Since then, I have been watching Figma tutorials on YouTube to see how people build various web applications.

After a few drafts, this was my final mock-up / prototype that I shared with our developer. Being able to interact with the design was so exciting and far more simple to set up than I expected. From a UX / UI perspective, these definitely aren't following any rules. I was very much going by eye to get my vision across to our developer.

No-Code Web App

Finally, here is the end product. During the development and testing process, the design and functionality were further refined. I'm really happy with how it has turned out and it's quite interesting to see how this all started with a rough 2 am sketch. If you're interested in more of the design, I'll be posting the individual feature boxes on Twitter over the next few weeks.

The Core Features

Our Tied Camel's workspace features have been divided into 3 categories:

Productivity Tools

These are tools for Muslims to manage their tasks, track their focus time, and stay connected with their faith using prayer (salah) reminders and checklists, and easy-to-access supplications (duas).

Calendar Integration

This allows Muslim's to plan around their daily prayer (salah) times that occur five times a day. Prayer times are predefined and change slightly everyday, which is why having a digital tool add these to a calendar makes the planning process easier. The workspace also displays the Islamic date and allows users to view upcoming events from their Google or Microsoft calendars.

Customisable Workspace

Finally, the workspace can be tailored to the user's preferences. They can choose a nickname for their greeting display, change the background using colours, images or videos, and mix ambience for the ideal atmosphere that promotes focus and deep work.

Why Our Tied Camel?

Tie your Camel, and Trust in Allah (God) means we should be proactive in fulfilling our responsibilities, then leave the rest to God. That's why OTC is about managing your tasks and time (tying your camel) but also prioritising your faith, which is essentially trusting in God. Both are important for achieving the results you want. You can read more about the story behind Our Tied Camel in this thread here.

Thanks for reading! If you have questions or feedback, leave a comment 💬