portfolio/project3.html at main · Logfro/portfolio · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="con">
        <p class="nav">Please press F1 for <a href="index.html"><b>HOME</b></a>, F2 for <a href="work.html"><b>WORK</b></a> and Del for <a href="about.html"><b>ABOUT</b></a></p>

        <img src="./res/projects/lbplaner/thumb.png" alt="">
        <div class="headline" style="margin: 2rem auto;">
            <b><h1>Designing a solution for class registration</h1></b>
        </div>

        <div style="margin: 2rem 0;">
            <div class="info">
                <p class="c1"><b>Role</b></p>
                <p class="c2">UX Designer</p>
            </div>

            <div class="info">
                <p class="c1"><b>Responsibilities</b></p>
                <p class="c2">User Research, Feature Ideation, Usability Testing, UI Design</p>
            </div>

            <div class="info">
                <p class="c1"><b>Team</b></p>
                <p class="c2">2 Web Developers, Backend Engineer, Project Manager</p>
            </div>

            <div class="info">
                <p class="c1"><b>Timeline</b></p>
                <p class="c2">1 year (2019 - 2020)</p>
            </div>
        </div>
        <h3>
            "My classes are too crowded. Sometimes I don’t even get to enter the classes I need to be in."
        </h3>
        <h2>Learning Hub: With self-paced and a new education system unique challenges arise</h2>
        <p class="desc">
            The Learning Hub is a new educational concept at the Higher Department of Information Technology at the TGM, which restructures teacher-centered lessons into student-focused, self-controlled learning. Students can decide for themselves which subjects to attend and can freely adjust their learning speed and depth.
            <br>
            <br>
            With a new educational system, it’s only natural that fresh and unique challenges will arise. One of these challenges is that some classes fill up faster than others and the teacher has to decide who gets in. A class registration tool would solve this problem and allow for better planning.
            <br>
            <br>
            This was my first UX project. I was the only designer on the team and also worked on introducing new features.
        </p>
        <h2>Designing not only for my classmates, but also myself</h2>
        <p class="desc">
            Since at the time of the project I was a student of the Department of Information Technology, I was not only designing for my classmates around me, but also for myself. I already had a pretty good intuition about what might be needed to solve this challenge, but I didn’t want to make too many assumptions.
        </p>

        <p class="desc">
            <b>Target demographic:</b>
            <ul>
                <li>Students aged 14-20</li>
                <li>Teachers managing registrations</li>
                <li>Interested in technology</li>
                <li>Initially IT students, with potential expansion to other departments</li>
            </ul>
        </p>
        <h2>Encouraging preplanning, improving overcrowding of classrooms and tracking class attendance</h2>
        <p class="desc">
            After talking to my classmates and teachers, I decided to focus on the following feature set:
        </p>

        <ul>
            <li>Registration system</li>
            <li>Notes for each registration</li>
            <li>Statistical overview for class occupancy for teachers</li>
        </ul>
        <img src="./res/projects/lbplaner/overview.png" alt="Mockup of the Overview screen">
        <p class="text desc">
            My goal was to make the registration process as effortless as possible. The entire week can be planned from the Overview Page in just a few seconds by right-clicking the cards and selecting the desired class.
        </p>

        <img src="./res/projects/lbplaner/dayview.png" alt="Mockup of the Dayview">
        <p class="text desc">
            By selecting the weekday on the sidebar, students can view the graphical view of classes and also swap between morning and afternoon classes.
        </p>
        <img src="./res/projects/lbplaner/mobile.png" alt="Mobile mockups">
        <p class="text desc">
            The mobile web app offers a stacked view and works in a nearly identical way to the desktop site. Students can select the desired classes on the Overview Page by long-pressing instead of right-clicking. On the selection screen, the bottom navigation offers the selection of the day.
        </p>
        <h2>
            Lessons learned
        </h2>
        <p class="desc">
            With this being my first UX project, I was able to learn many valuable lessons, and naturally there were many things I will be able to improve on in the future:
        </p>
        <ul>
            <li>Research available tools more (I used Adobe XD to create all the mockups - a big mistake, although back in the day there weren’t that many alternatives yet)</li>
            <li>Create a design system</li>
            <li>Communicate things more clearly to the developers</li>
            <li>Use a version control system</li>
        </ul>
        <h2>Retrospective</h2>
        <p class="desc">
            To conclude, this was one of the most fulfilling projects I have worked on. We were able to iterate very rapidly and try various ideas. In the end the team was able to launch a product that launched successfully with positive user feedback. It significantly reduced classroom overcrowding and allowed students to plan effectively.
        </p>
    </div>


    <script type="text/javascript" src="js/keydown.js"></script>

</body>
</html>