website/ecoprint.html at main · GrahamEllacott/website · 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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Stylesheet -->
        <link rel="stylesheet" href="css/style.css">
        <title>EcoPrint Case Study</title>
        <link rel="icon" href="img/favicon.ico">
    </head>
    <body>
        <header>
            <img src="img/Logo.png" class="logo" alt="glasses logo">
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="index.html#about-me">About Me</a></li>
                    <li><a href="projects.html">Projects</a></li>
                    <li><a href="index.html#contact">Contact</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <div class="grid-container">

                <h1 class="grid-heading">EcoPrint</h1>
                <div class="grid-full bkg-accent">
                    <div class="box-padding">
                        Our assignment was to create an app to help people concerned about sustainability and our environment here in Canada
                        Our goal was to raise awareness and improve hopefulness for people aware of environmental issues, also help people see the positive impact they can make on the environment

                        <br><br>
                        as a nonprofit organization, we were not worried about monetization or revenue generation, our main focus was on user engagement and retention, thus a competitive analysis was not necessary for this project
                    </div>
                </div>

                <h2 class="grid-heading">User Research</h2>
                <div class="grid-half bkg-secondary">
                    <div class="box-padding">
                        <h3>Persona 1 <br>John Thomas</h3>
                        <h4>Male - 37 years</h4>
                        <strong>Seasonal Fisherman</strong>
                        <br>
                        <p>John is a Father of three from St. Johns, Newfoundland. Being a fisherman he witnesses first-hand the impact climate change has on wildlife. He worries about losing his family home due to storm surges in the local area. He wants to find out how he can adopt sustainable habits to make a better future for himself, his family and his community.</p>
                    </div>
                </div>
                <div class="grid-half bkg-semi-dark">
                    <div class="box-padding">
                        <h3>Persona 2 <br>Amka Ollana</h3>
                        <h4>Female - 24 years</h4>
                        <strong>Climate Activist</strong>
                        <br>
                        <p>Amka is a Traditional knowledge keeper born, raised and deeply connected to her inuit heritage. She is devoted to preserving and passing on the cultural wisdom of her ancestors. She worries about the thinning ice in Iqaluit, Nunavut. She doesn't want to lose important parts of her heritage due to changing environmental conditions, and she feels powerless to stop these problems that cause her so much anxiety.</p>
                    </div>
                </div>

                <h2 class="grid-heading">Brainstorming</h2>
                <div class="grid-half bkg-accent">
                    <div class="box-padding">
                        <p>We decided the problem we were trying to solve with this project was to raise <strong>awareness</strong> about climate change, but also to give the user <strong>hopefulness</strong> that things can and will get better</p>
                        <br>
                        <p>We decided that it was most plausible to create an app that helps users track their environmental impact in an effort to reduce their carbon footprint</p>
                    </div>
                </div>

                <div class="grid-half bkg-primary">
                    <div class="box-padding">
                        <ul style="margin-left: 30px;">
                            <li>Using a combination of AR and VR technology to create environmental simulations showing the impact we have on the planet.</li>
                            <li>Repurposing unused public screens and ad space to display real-time climate data</li>
                            <li>Integrate climate action education and incentives within the community and community events</li>
                            <li>Implementing a social media networking app that allows users to collectively work towards climate action incentives and goals</li>
                        </ul>
                    </div>
                </div>

                <h2 class="grid-heading">Planning</h2>
                <div class="grid-full bkg-semi-dark">
                    <div class="box-padding">
                        The app would allow users to track their daily activities and see how they impact the environment. The app would also provide tips and resources on how to reduce their carbon footprint. It would also have an acheivement system to encourage users to make more sustainable choices, and always keep working to better impact the planet. It was meant to be low maintenence, the app would connect to other services to automatically track activities like transportation, energy usage, and waste production.
                    </div>
                </div>

                <img src="img/ecoprint/process1.png" alt="" class="grid-half" width="100%" height="100%">
                <img src="img/ecoprint/process2.png" alt="" class="grid-half" width="100%" height="100%">

                <div class="grid-full bkg-accent">
                    <div class="box-padding">
                        Here is some of our design mockups and sketches we made during the planning phase of the project, we ended up sticking pretty close to these initial designs since we were going for a minimalist and easy to use design anyway.
                        <br><br>
                        You can also see a flowchart we made of the app's user flow and how the different screens could connect to each other. We tried to come up with a realistic user flow that would make sense for the app and be easy to navigate.
                    </div>
                </div>

                <div class="grid-quarter grid-full-override bkg-secondary">
                    <div class="box-padding">
                        We tried to make a minimalist design that was easy to use and navigate. A user most likely wouldn't spend a lot of time on the app, so we wanted to make sure that they could quickly find the information they were looking for.
                    </div>
                </div>

                <img src="img/ecoprint/Ecoprint1-wire.png" alt="graph wireframe" class="grid-quarter" width="100%" height="auto">
                <img src="img/ecoprint/Ecoprint2-wire.png" alt="overview wireframe" class="grid-quarter" width="100%" height="auto">
                <img src="img/ecoprint/Ecoprint3-wire.png" alt="connect wireframe" class="grid-quarter" width="100%" height="auto">


                <h2 class="grid-heading">Surveying</h2>
                <div class="grid-full bkg-primary">
                    <div class="box-padding">
                        Part of our research during this project was to survey people about which design they preferred. We created a survey with 3 different designs and asked people to choose which one they liked the most and why.
                    </div>
                </div>
                <img src="img/ecoprint/Ecoprint1-blue.png" alt="blue palette" class="grid-quarter" width="100%" height="auto">
                <img src="img/ecoprint/Ecoprint1.png" alt="green palette" class="grid-quarter" width="100%" height="auto">
                <img src="img/ecoprint/Ecoprint1-red.png" alt="red palette" class="grid-quarter" width="100%" height="auto">
                <div class="grid-quarter grid-full-override bkg-accent">
                    <div class="box-padding">
                        The results were that:
                        <ul style="margin-left: 30px;">
                            <li>68% of users preferred the green design</li>
                            <li>19% of users preferred the blue design</li>
                            <li>13% of users preferred the red design</li>
                        </ul>
                    </div>
                </div>

                <div class="grid-full bkg-secondary">
                    <div class="box-padding">
                        The main reason people preferred the green design was that it felt more fitting for an environmental app.
                    </div>
                </div>

                <h2 class="grid-heading">Result</h2>
                <div class="grid-quarter grid-full-override bkg-semi-dark">
                    <div class="box-padding">
                        Our final prototypes for the app were created in Figma. They display our concept of a simplistic but hopeful app that encourages users to make more sustainable choices. It was designed to be used by people of all backgrounds, but mainly for people who are already concerned about the environment and want to make a positive impact.
                    </div>
                </div>
                <img src="img/ecoprint/Ecoprint1.png" alt="" class="grid-quarter" width="100%" height="auto">
                <img src="img/ecoprint/Ecoprint2.png" alt="" class="grid-quarter" width="100%" height="auto">
                <img src="img/ecoprint/Ecoprint3.png" alt="" class="grid-quarter" width="100%" height="auto">

                <div class="grid-full bkg-accent">
                    <div class="box-padding">
                        The app was given a colorscheme that was meant to make the user think eco-friendly. It only has a few functions, but the goal was that the app is used for a short period of time, then the user would go about their day and try to make more sustainable choices. The app would then be used again later to track their progress and see how they are doing. We used large font and clear iconography to make the app easy to use and navigate for any user.
                        <br><br>
                        Overall this experience was a great opportunity to practice my UX design skills and work as part of a team. I learned a lot about the design process and how to create a user-friendly app. Getting to see the UX design lifecycle from the beginning to the end was a truly enjoyable experience. In the future I would love to use my skills to try and develop a fully functional app rather than just a prototype. It was great to work in a team and see how different people approach the same problem in different ways, as well as coming up with ideas I wouldn't have even considered on my own.
                        <br><br>
                        I would like to thank my teammates, Sébastien Violette, Kim Gallego and Daniel Peleg for their hard work and dedication to this project. It was a pleasure working with you.
                    </div>
                </div>

            </div>
        </main>
        <footer>
            <div class="footer-top">
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="index.html#about-me">About Me</a></li>
                        <li><a href="projects.html">Projects</a></li>
                        <li><a href="index.html#contact">Contact</a></li>
                    </ul>
                </nav>
                <img src="img/Logo.png" class="logo" alt="glasses logo">
            </div>
            <p>Copyright &copy; Graham Ellacott 2025</p>
        </footer>
    </body>
</html>