Major Project: Final Project



Major Project
22/04/2024 - 02/0/2024 / Week 1 - Week 14
Darren Liga / 0351480
Major Project: Final Project


Link to Figma Prototype


Task 1

On the first day of class, we were given an overview of the Major Project, an individual assignment that can be developed as a commercial project.. The project is due in 14 weeks, and we're expected to begin brainstorming ideas, which we'll present to the class next week Since the project is so important, we were allowed to work in groups to brainstorm ideas. Working together helps us come up with ideas faster, share different ideas, and support each other through this challenging project. In our group, Ataka and I are handling the UI/UX, and Clay is doing the graphic design.


Today, we started working under Mr. Asrizal’s supervision and began creating a mood board by searching the internet for inspiration. We came up with the brand name "Booq", an e-learning app for our client, Yudhistira. I designed the initial logo, which is minimalistic and follows the current trend of company logos that can be read the same way upside down. The process helped us shape the brand’s visual identity and direction.

Fig 1.1: Booq Brand Startup

Fig 1.2: Moodboard

After setting the ground of this e-learning app. Ataka and I started the early stages of flowchart of the mobile app and implementing the wireframe into figma.

Fig 2.1: Flowchart (teachers)

Fig 2.2: Flowchart (Students)


Since it’s an e-learning app, there will have 2 versions of the app. 1 for students, 1 for teachers. Teachers version will having the feature of editing and marking the students contents/results. While students on the other hand will have the simplicity of leaning seamlessly with the least amount of buttons to interact with.


We then continued to develop from wireframe to actual buttons and colors. from there it was non stop polishing and designing and prototyping to get it perfect for our client. The client was with us on this journey to simplify options. We were working closely with our client and giving them the figma prototype access to preview all our design in real time.

Fig 3.1: Figma start screen

Ataka and I worked the hardest to start the whole map of the app. As usual, the start is the hardest and it just gets easier from there. 

We then split our task into students and teachers. Ataka was responsible of student’s page, I’m responsible for the teachers page. 

After halfway of the whole ui design, i find teachers section to be slightly harder to ui/ux than students. As i would need alot of upload and edit pages.



Fig 3.2: Homepage Design

We agreed to use main color red for student, Blue for teachers.

Fig 3.3: Teachers - upload assignment

i find this part to be quite complex as i would need to rethink the whole structure of uploading so that the teacher will have minimal effort and less fiddling with the app to get simple tasks done.


Fig 3.4: Teachers - Book section

This section of the app will share similar interface with students.

At the final stage of developing. We found a slight problem with our navbar. “book” section wasnt needed for teachers as teachers wont be uploading them nor reading them.
Fig 3.5: Old Nav Bar (book middle)

Fig3.6: New navbar (Book icon removed)

After all design part was finished, I continued to prototyping in figma to simulate a working app inside figma.

Fig 4.1: Prototyping for interactive flow

Fig 4.2: Assignment flow

Fig 4.3: Quiz Flow

Fig 4.4: Homepage Flow, Live Chat

Final BOOQ Deck



Reflection
Working on the "Booq" e-learning app was both challenging and rewarding. Our team, guided by Mr. Asrizal, collaborated closely from start to finish. We began by creating the brand name and logo, which set the tone for the entire project. This experience helped us apply our skills in a real-world setting, where we learned the importance of teamwork, regular client communication, and refining our designs through an iterative process.

Observations
Collaboration was crucial to handling the project’s challenges. Splitting tasks between UI/UX and graphic design worked well, though we found it tricky to keep everything consistent between the student and teacher versions of the app. The teacher's section, in particular, was more complex and required careful planning. Regular feedback from our client was essential in improving our designs, and the ability to adapt quickly was key as we moved from wireframes to the final product.

Findings
Designing for different users (students and teachers) taught us the importance of creating experiences that fit each group while keeping the overall design consistent. Early prototyping in Figma helped us spot issues and improve the app’s usability. Using different colors for each user group (red for students, blue for teachers) worked well for clarity and branding. The project highlighted the need for thorough planning, efficient design processes, and a good balance between looks and usability.

Areas for Improvement
In future projects, better planning from the start would help, especially in mapping out the user experience. Streamlining complex features like those in the teacher’s section would save time, and more frequent client check-ins could catch issues earlier. Balancing design with functionality is also important—ensuring that the app looks good without making it harder to use. These changes could make the design process smoother and more effective.

Comments

Popular Posts