UPSASRS/case-study.html at main · majorie-jubiril/UPSASRS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>UPSA Student Request System – Case Study</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

<div class="container case-study">

  <!-- HERO -->
  <section class="cs-hero">
    <h1>UPSA Student Request System</h1>
    <p>Digitizing fragmented student request workflows into a structured, trackable system</p>

    <div class="cs-meta">
      <span>Role: Product Designer</span>
      <span>Scope: UX, UI, Frontend</span>
      <span>Type: End-to-end project</span>
    </div>

    <div class="cs-actions">
      <a href="https://upsasrs.netlify.app" target="_blank" class="primary-btn">
        View Live Product
      </a>

      <a href="https://github.com/majorie-jubiril/UPSASRS" target="_blank" class="secondary-btn">
        View GitHub Repository
      </a>
    </div>
  </section>

  <!-- PRODUCT WALKTHROUGH -->
  <section>
    <h2>Product Walkthrough</h2>

    <!-- Dashboard -->
    <div class="cs-step">
      <h3>Dashboard</h3>
      <p>Students can view all requests and track progress from a central dashboard.</p>

      <div class="cs-group">
        <img src="images/case-study/dashboard.png" alt="Dashboard">
        <p class="img-caption">Empty dashboard before any request is made</p>
      </div>
    </div>

    <!-- Request Form -->
    <div class="cs-step">
      <h3>Guided Request Form</h3>
      <p>A multi-step form simplifies the process and improves clarity.</p>

      <div class="cs-group">
        <img src="images/case-study/request-form1.png" alt="">
        <img src="images/case-study/request-form2.png" alt="">
        <p class="img-caption">Step-by-step request flow</p>
      </div>
    </div>

    <!-- Payment -->
    <div class="cs-step">
      <h3>Payment & Proof Upload</h3>
      <p>Users complete payment externally and upload proof for validation.</p>

      <div class="cs-group">
        <img src="images/case-study/payment.png" alt="">
        <img src="images/case-study/upload.png" alt="">
        <p class="img-caption">Payment and proof upload process</p>
      </div>
    </div>

    <!-- Review -->
    <div class="cs-step">
      <h3>Review & Submit</h3>
      <p>Users review their details before final submission.</p>

      <div class="cs-group">
        <img src="images/case-study/review1.png" alt="">
        <img src="images/case-study/review2.png" alt="">
        <p class="img-caption">Review and confirmation step</p>
      </div>
    </div>

    <!-- Post Submission -->
    <div class="cs-step">
      <h3>Post-Submission Dashboard</h3>
      <p>After submission, users can monitor progress and status updates.</p>

      <div class="cs-group">
        <img src="images/case-study/dashboard-post-request.png" alt="">
        <p class="img-caption">Dashboard after submitting a request</p>
      </div>
    </div>

    <!-- Tracking -->
    <div class="cs-step">
      <h3>Request Tracking</h3>
      <p>Detailed tracking provides visibility into each stage of processing.</p>

      <div class="cs-group">
        <img src="images/case-study/details1.png" alt="">
        <img src="images/case-study/details2.png" alt="">
        <p class="img-caption">Request tracking and status breakdown</p>
      </div>
    </div>

  </section>

  <!-- OVERVIEW -->
  <section>
    <h2>Overview</h2>
    <p>
      A web-based system designed to digitize and streamline student service requests such as transcripts and introductory letters.
      It replaces manual processes with a structured, trackable workflow.
    </p>
  </section>

  <!-- PROBLEM -->
  <section>
    <h2>Problem</h2>
    <ul>
      <li>Students lack visibility into request status</li>
      <li>Processes are fragmented and unclear</li>
      <li>Payment and submission steps are confusing</li>
      <li>Admins struggle with tracking and consistency</li>
    </ul>
  </section>

  <!-- SOLUTION -->
  <section>
    <h2>Solution</h2>
    <ul>
      <li>Multi-step guided request flow</li>
      <li>Status tracking system</li>
      <li>Manual payment validation with proof upload</li>
      <li>Admin dashboard for processing requests</li>
    </ul>
  </section>

  <!-- DECISIONS -->
  <section>
    <h2>Key Design Decisions</h2>

    <h3>Multi-step Form</h3>
    <p>
      Reduced cognitive load and improved clarity by guiding users step-by-step instead of presenting a long form.
    </p>

    <h3>Manual Payment Validation</h3>
    <p>
      Maintained alignment with existing UFIS workflows to ensure feasibility and adoption, while leaving room for future automation.
    </p>
  </section>

  <!-- SYSTEM -->
  <section>
    <h2>System Thinking</h2>
    <p><strong>Request Lifecycle:</strong> Submitted → Pending → In Progress → Completed</p>
    <p><strong>Roles:</strong> Students (submit/track) and Admins (validate/process)</p>
  </section>

  <!-- CHALLENGES -->
  <section>
    <h2>Challenges</h2>
    <p>
      Translating product ideas into a working system required stepping into development,
      handling state management, and ensuring flow consistency across pages.
    </p>
  </section>

  <!-- OUTCOME -->
  <section>
    <h2>Outcome</h2>
    <p>
      A fully functional, deployed system that improves transparency, structure, and efficiency
      in student request workflows.
    </p>
  </section>

</div>

</body>
</html>