portfolio/project2.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
114
115
116
117
118
<!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/tgm/thumb.png" alt="">
        <div class="headline" style="margin: 2rem auto;">
            <b><h1>Redesigning the TGM homepage</h1></b>
        </div>

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

            <div class="info">
                <p class="c1"><b>Responsibilities</b></p>
                <p class="c2">User Research, User Testing, Wireframing, Prototyping</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.5 years (2020 - 2021)</p>
            </div>
        </div>
        <h3>
            "Our school's website looks outdated. It's barely readable on my phone and I just can't find what I'm looking for."
        </h3>
        <h2>Pictures before Redesign</h2>
        <img src="./res/projects/tgm/before_pictures.png" alt="Pictures of Homepage before the Redesign">
        <h2>
            One of Vienna's most renowned teaching and experimental institutions
        </h2>
        <p class="desc">
            TGM is one of Vienna's most renowned technical teaching and experimental institutions. It offers education programs for youth students after eighth grade and extensive adult education. The institution's accredited experimental center offers practical testing and development, connecting education with industry and research.
            <br>
            <br>
            I was tasked with being the lead designer of this project. I mainly worked in close collaboration with one of the web-developers in our team to create a cohesive UX/UI and make the product visually appealing.
        </p>
        <h3>Focusing on the future students and their parents</h3>
        <p class="desc">
            <b>Target Demographic:</b> Future students interested in a technical education and their parents who want to learn about the curriculum the school offers.
        </p>
        <h3>Tackling outdated design, hard to find content and mobile friction</h3>
        <p class="desc">
            After user interviews the following pain points were identified:
        </p>
        <ul>
            <li>Outdated design, especially for a school with a focus on education</li>
            <li>Important content is rather difficult to find</li>
            <li>Poor mobile usability and responsiveness</li>
        </ul>
        <h3>Putting education and current events first while designing for longevity</h3>
        <p class="desc">The biggest emphasis will be put on the education the school offers, both in terms of day school and adult education. News and current events will be highlighted more to inform people about opportunities to get to know the school better, such as open door days, etc. In addition, the redesign will be focusing on building an experience that, even without frequent redesigns, will look fresh and modern for a long time.</p>
        <img src="./res/projects/tgm/sitemap.png" alt="Restructured Sitemap that focuses on education and current events">
        <h3>How do we represent the different departments under one brand image?</h3>
        <p class="desc">
            The school is at the forefront of the page. For a majority of users it is the most relevant section on the website. The departments are displayed on cards and will show a short description on hover.
            <br>
            <br>
            We considered going with unique colours for each department or choosing icons, but in the end we decided on icons for multiple reasons. For two reasons mainly, because they convey more information at a glance and are more versatile to include in a larger variety of different designs.

        </p>
        <img src="./res/projects/tgm/hero_section.png" alt="Mockup of the hero section">
        <video  style="max-width: 1440px;" autoplay muted loop>
            <source src="./res/projects/tgm/landing_page.mp4" type="video/mp4;">
        </video>

        <img src="./res/projects/tgm/news.png" alt="Mockup of the news section">
        <p class="text desc">News and current events are displayed horizontally. The newest cards will be closest to the front. On hover buttons to scroll the cards to the right and left will appear to give the user multiple ways to navigate the cards. The other methods are dragging and shift + scrolling.
        </p>
        <img src="res/projects/tgm/contact.png" alt="Mockup of the contact sectoin">
        <img src="res/projects/tgm/department.png" alt="Mockup of department page of Information Technology">
        <p class="text desc">The subpage of each department has a banner in the background. Right below it the cards allow users to register, look for office hours, view finished projects of students and see the team of teachers working at the department.</p>
        <video  style="max-width: 1440px;" autoplay muted loop>
            <source src="./res/projects/tgm/department.mp4" type="video/mp4;">
        </video>

        <img src="res/projects/tgm/usp.png" alt="Section of department's subjects and unique selling points">
        <img src="res/projects/tgm/mobile.png" alt="Mobile mockups of Landing page">

        <h3>What I'd like to improve on</h3>
        <p class="desc">Things I would like to approach differently next time are:</p>
        <ul>
            <li>Work closer with the development team to reduce discrepancies between mockups and final product</li>
            <li>Validate assumptions with more extensive testing cycles</li>
            <li>Broader, more international and better documented competitive analysis</li>
        </ul>
        <h3>Looking back</h3>
        <p class="desc">
            The rebrand of the TGM website has been one of the largest projects I have worked on to date. With a busy timeline, I had expected the project to be relatively difficult, because it had to unify such a large organization and many different people under a single brand.
            <br>
            <br>
            I am quite happy to say that even with the challenges we faced, we were able to deliver a redesign that accomplishes the goals we were set on and helps people to make better informed decisions about their education and future.

        </p>
    </div>


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