22/9/2024 - 22/9/2025 (Week 1 - Week 14)
Shawn Wong Kai Hen / 0375372
Design Exploration / Bachelor of Design (Hons) in Creative
Media
Design Exploration - Compilation
INTRUCTIONS
PROJECT
MANAGEMENT
I defined my project direction by focusing on designing
Studee, a
student-centered productivity app aimed at enhancing my UI design skills
and deepening my exploration of user experience. During this stage, I
conducted
competitor analysis on
existing planner applications, studied
student user behaviors,
and identified gaps that informed my
unique value proposition. I also began developing the app
user flowchart and
established the
visual styling and mood direction
to ensure a clear and consistent design approach.
During this week, based on feedback from Mr. Asrizal, I was advised
to further refine the competitor analysis and unique features, as the
previous research did not clearly show how my app stands out compared
to competitors.
Fig 1.1 Competitor Refinement
Fig 1.2 Unique Features Refinement
After reviewing and receiving confirmation from Mr. Asrizal, I began
working on the sketches and low-fidelity designs for my app. I
researched relevant references and brainstormed ways to design a
useful study app. Below are my early low-fi designs, which will be
further refined in the high-fi stage.
In Week 7, the low-fidelity design was reviewed and approved by Mr.
Asrizal. I then continued developing the high-fidelity design, which
progressed through to Week 10.
During Week 9, I had almost completed the high-fidelity design,
but the prototype was not ready yet. I planned to present the
prototype in Week 10 and realized I still needed to build it in
FlutterFlow, so I continued refining the design to ensure
everything was completed on time.
Fig 2.3 High-Fi Design With Prototype
In Week 10, I completed the prototype and presented the
progress to Mr. Asrizal. After receiving his approval, I began
developing the app using FlutterFlow.
Figma
Workspace
Fig 2.4 My
Figma
Workspace
Fig 2.5 Prototype Design
Access Here For Better View:
During these weeks, I started working on the app in
FlutterFlow. Since I hadn’t used it for some time, I needed to
familiarize myself with the tool again. Unfortunately,
FlutterFlow has introduced many updates since last semester,
and several features are now paid, which limited some design
options. Despite this, I did my best to complete the app based
on the available features.
Fig 3.1 FlutterFlow Design Progression
After completing the design in FlutterFlow, I tried to
publish it as a web link but encountered an issue similar
to last semester. The project was displayed in a web view
instead of a mobile view, causing layout issues. Since the
design was created based on the iPhone 16 Pro Max size
(440 × 956), the responsive scaling did not match properly
when viewed on the website or tested on my phone.
Fig 3.2 Published For Test Run
Fig 3.3 Website View Responsive Problem
Fig 3.4 Mobile View Problem
Some parts of the mobile view worked correctly,
but others did not. Although all containers were
designed to be white, they appeared black during
testing, possibly due to a publishing issue or
bug. I will share the properly completed test
version below once it is fixed.
-
Access the Flutter Flow Test -
Here
Experience
Throughout the development of Studee, I experienced the complete UI/UX design process, from industry
and competitor research to wireframing, prototyping, and final
high-fidelity design. Each stage challenged me to think beyond
visual aesthetics and focus on usability, clarity, and user needs.
Designing features such as the dashboard, task tracking, notes,
and widgets required careful consideration of information
hierarchy and interaction flow. Working on the app’s visual
styling, layout system, and presentation slides strengthened my
confidence in applying UI/UX principles in a structured and
purposeful way.
Observation
I observed that many students struggle with academic planning not
because they lack motivation, but because existing productivity tools
are either too complex, fragmented, or not designed specifically for
student workflows. Users often switch between multiple apps for tasks,
deadlines, and notes, which increases cognitive load and stress.
Through iterative design, I noticed that simplifying layouts, reducing
visual clutter, and prioritizing “today’s overview” significantly
improved clarity. Feedback from my lecturer also emphasized the
importance of clearly communicating the core solution rather than
overcrowding the design with excessive features.
Findings
From this project, I learned that effective UI/UX design goes beyond
creating visually appealing interfaces; it requires empathy,
problem-solving, and strong narrative thinking. Studee’s key value
lies in consolidating essential study tools into a single,
student-centered experience that is calm, accessible, and easy to use.
I found that organizing features around clear user goals—such as
managing deadlines, tracking assignments, and taking notes—made the
app more intuitive and relatable. Additionally, I realized that how a
project is presented is just as important as the design itself, as
clear visual storytelling helps communicate intent, usability, and
overall design value.
Comments