LOCAL/
02:02:21
ui/ux for honor ed.
ui/ux for honor ed.
This page goes over some of the work that I did for Honor Education, the decisions we made and the result. Most of the work is done in Figma, Origami, Principal and After Effects. We also made use of technologies like Lottie, Three.js, Rive and Unreal Engine.
App loading screens
I wanted to kick things off by sharing some of the loading screens I designed for the app. We explored a bunch of different directions before landing on the final one. One of our main goals was to make sure the "Group Reactions" colors really stood out, we wanted the animation to feel instantly recognizable and on-brand, even in the smallest moments.
A standout for me is the second-to-last screen, with the white background. That one loads when entering a specific class, and it shows the names of students in that class as part of the animation — kind of like a subtle roll call. It added a nice touch of community, and to make it work, I used Lottie and manually edited the JSON file so the text fields could update dynamically based on class data.
The last screen was more experimental — I built it in Cinema4D just to explore a different style. We didn’t end up using it, but it was a fun dive into 3D for something as simple as a loading screen.
Even though these are quick moments, we saw them as a real chance to add personality and thoughtfulness to the app experience.
Group Reactions
One of the big features I worked on was Group Reactions. The idea behind it is to give students the option to add tags like if the content is interesting, if they think something is important or if something is unclear to them.
This allowed us to get a lot more data about what students were finding interesting, things the whole class was unclear on, etc. This also gave the students power to tag anything across any medium of content the class had to offer.
Usually we see that the contents of a class is a mixture of file types, they have pdfs, videos, images, text, etc. Group Reactions integrates perfectly across all these different file types to bring a unified tagging, note taking and community experience.
These videos show the Video and E-Pub Group Reactions prototypes in action. We can see the user finding something interesting in the content and they try to add a reaction to the video and the e-pub, after adding the reaction the app prompts them if they want to accompany that video a text or a voice note/comment. After that they can choose if they want to keep that just as a note, which will be private, or they can share it as a comment with the class.
After adding the reaction, we see the user go into the community section of the Group Reactions feature, here the user can see how the class has reacted to the content, the color in the background changes accordingly. Let's say a lot of people were unclear about something, then the background would be more red. This was achieved using Three.js and GLSL, I will go more in detail about that later.
Pitching clients - uniqlo
We used a lot of my prototypes to pitch to clients such as Wharton School of Business, Lynn University and Uniqlo. I wanted to go over one of those pitch prototypes as this one has a very interesting story behind it.
The Uniqlo prototype takes us from the login page and then explores features like Group Reactions and Community Notes. It showcases perfectly how our technology and data collection tools can integrate seamlessly in a massive company's training app.
We see different types of content in the course, like videos, pdfs, images, etc. The user then adds a reaction to one of the stories.
We ended up landing Uniqlo as a client and they encouraged their users to use Group Reactions feature as often as they can. It ended up providing them with a ton of data on how people were engaging with their content and how they could make it better.
Story time: This prototype was done in less than 2 hours. The VP of Design at the time reached out to me at around 12 PM and told me our CEO was pitching to Uniqlo around 3 PM and they need the prototype asap so that they can prepare the rest of the presentation. It was stressful but we got it done.
Gradients
We wanted gradients to have a life of their own, we wanted them to be a hero element in the app and dynamically react to the class reaction data. We had various different gradient elements across our app, even our loading screen had a hero gradient element.
On the left you see the dynamic gradient element I designed for the Group Reactions tab inside the Honor Learning App. For Prototyping purposes, I exported each of those layers as a Lottie file and scaled them with the real time reaction data. For the final version I got started with a version in GLSL, to make it cleaner and look better, although the dev team soon took over my starting file.
The video on the right is an element that was used in the website and marketing side of things, that video was used in almost every pitch and was very prominent on the website. The gradient element was developed in GLSL and then tweaked a bit in After Effects for the final render.
Immersive scroll
Immersive Scroll was the other big feature that I was designing and prototyping for at Honor. The team wanted a vertical, TikTok like experience for the learning app. From our initial testing, students found it very easy to go between the different content types and were engaged a lot more.
In the adjacent video, you can see it in action on a mobile device. "Envisioning the Future" class has a lot of different types of content, including a quick Q&A that the teacher wanted to include to keep the students more engaged. You tap on any of those elements and it takes you to an immersive view, where you can scroll through all those media types seamlessly.
The Group Reaction interface stays consistent across all these different content types and allows you to annotate, make notes and share your thoughts with the class easily.
In the second video you can see Immersive Scroll in action on the web, we wanted to keep the experience very similar across devices.
teaching app group reactions
The companion to the Learning App was the Teaching App. This as the name suggests is meant for Teachers and Course Administrators. With just a simple hover you can see all the Group Reactions and student engagement data for every sub section of the course. I was mostly focused on the Learning App but I got to work on the Group Reactions feature integration in the Teaching App.
App loading screens
I wanted to kick things off by sharing some of the loading screens I designed for the app. We explored a bunch of different directions before landing on the final one. One of our main goals was to make sure the "Group Reactions" colors really stood out, we wanted the animation to feel instantly recognizable and on-brand, even in the smallest moments.
A standout for me is the second-to-last screen, with the white background. That one loads when entering a specific class, and it shows the names of students in that class as part of the animation — kind of like a subtle roll call. It added a nice touch of community, and to make it work, I used Lottie and manually edited the JSON file so the text fields could update dynamically based on class data.
The last screen was more experimental — I built it in Cinema4D just to explore a different style. We didn’t end up using it, but it was a fun dive into 3D for something as simple as a loading screen.
Even though these are quick moments, we saw them as a real chance to add personality and thoughtfulness to the app experience.
Group Reactions
One of the big features I worked on was Group Reactions. The idea behind it is to give students the option to add tags like if the content is interesting, if they think something is important or if something is unclear to them.
This allowed us to get a lot more data about what students were finding interesting, things the whole class was unclear on, etc. This also gave the students power to tag anything across any medium of content the class had to offer.
Usually we see that the contents of a class is a mixture of file types, they have pdfs, videos, images, text, etc. Group Reactions integrates perfectly across all these different file types to bring a unified tagging, note taking and community experience.
These videos show the Video and E-Pub Group Reactions prototypes in action. We can see the user finding something interesting in the content and they try to add a reaction to the video and the e-pub, after adding the reaction the app prompts them if they want to accompany that video a text or a voice note/comment. After that they can choose if they want to keep that just as a note, which will be private, or they can share it as a comment with the class.
After adding the reaction, we see the user go into the community section of the Group Reactions feature, here the user can see how the class has reacted to the content, the color in the background changes accordingly. Let's say a lot of people were unclear about something, then the background would be more red. This was achieved using Three.js and GLSL, I will go more in detail about that later.
Pitching clients - uniqlo
We used a lot of my prototypes to pitch to clients such as Wharton School of Business, Lynn University and Uniqlo. I wanted to go over one of those pitch prototypes as this one has a very interesting story behind it.
The Uniqlo prototype takes us from the login page and then explores features like Group Reactions and Community Notes. It showcases perfectly how our technology and data collection tools can integrate seamlessly in a massive company's training app.
We see different types of content in the course, like videos, pdfs, images, etc. The user then adds a reaction to one of the stories.
We ended up landing Uniqlo as a client and they encouraged their users to use Group Reactions feature as often as they can. It ended up providing them with a ton of data on how people were engaging with their content and how they could make it better.
Story time: This prototype was done in less than 2 hours. The VP of Design at the time reached out to me at around 12 PM and told me our CEO was pitching to Uniqlo around 3 PM and they need the prototype asap so that they can prepare the rest of the presentation. It was stressful but we got it done.
Gradients
We wanted gradients to have a life of their own, we wanted them to be a hero element in the app and dynamically react to the class reaction data. We had various different gradient elements across our app, even our loading screen had a hero gradient element.
On the left you see the dynamic gradient element I designed for the Group Reactions tab inside the Honor Learning App. For Prototyping purposes, I exported each of those layers as a Lottie file and scaled them with the real time reaction data. For the final version I got started with a version in GLSL, to make it cleaner and look better, although the dev team soon took over my starting file.
The video on the right is an element that was used in the website and marketing side of things, that video was used in almost every pitch and was very prominent on the website. The gradient element was developed in GLSL and then tweaked a bit in After Effects for the final render.
Immersive scroll
Immersive Scroll was the other big feature that I was designing and prototyping for at Honor. The team wanted a vertical, TikTok like experience for the learning app. From our initial testing, students found it very easy to go between the different content types and were engaged a lot more.
In the adjacent video, you can see it in action on a mobile device. "Envisioning the Future" class has a lot of different types of content, including a quick Q&A that the teacher wanted to include to keep the students more engaged. You tap on any of those elements and it takes you to an immersive view, where you can scroll through all those media types seamlessly.
The Group Reaction interface stays consistent across all these different content types and allows you to annotate, make notes and share your thoughts with the class easily.
In the second video you can see Immersive Scroll in action on the web, we wanted to keep the experience very similar across devices.
teaching app group reactions
The companion to the Learning App was the Teaching App. This as the name suggests is meant for Teachers and Course Administrators. With just a simple hover you can see all the Group Reactions and student engagement data for every sub section of the course. I was mostly focused on the Learning App but I got to work on the Group Reactions feature integration in the Teaching App.
App loading screens
I wanted to kick things off by sharing some of the loading screens I designed for the app. We explored a bunch of different directions before landing on the final one. One of our main goals was to make sure the "Group Reactions" colors really stood out, we wanted the animation to feel instantly recognizable and on-brand, even in the smallest moments.
A standout for me is the second-to-last screen, with the white background. That one loads when entering a specific class, and it shows the names of students in that class as part of the animation — kind of like a subtle roll call. It added a nice touch of community, and to make it work, I used Lottie and manually edited the JSON file so the text fields could update dynamically based on class data.
The last screen was more experimental — I built it in Cinema4D just to explore a different style. We didn’t end up using it, but it was a fun dive into 3D for something as simple as a loading screen.
Even though these are quick moments, we saw them as a real chance to add personality and thoughtfulness to the app experience.
Group Reactions
One of the big features I worked on was Group Reactions. The idea behind it is to give students the option to add tags like if the content is interesting, if they think something is important or if something is unclear to them.
This allowed us to get a lot more data about what students were finding interesting, things the whole class was unclear on, etc. This also gave the students power to tag anything across any medium of content the class had to offer.
Usually we see that the contents of a class is a mixture of file types, they have pdfs, videos, images, text, etc. Group Reactions integrates perfectly across all these different file types to bring a unified tagging, note taking and community experience.
These videos show the Video and E-Pub Group Reactions prototypes in action. We can see the user finding something interesting in the content and they try to add a reaction to the video and the e-pub, after adding the reaction the app prompts them if they want to accompany that video a text or a voice note/comment. After that they can choose if they want to keep that just as a note, which will be private, or they can share it as a comment with the class.
After adding the reaction, we see the user go into the community section of the Group Reactions feature, here the user can see how the class has reacted to the content, the color in the background changes accordingly. Let's say a lot of people were unclear about something, then the background would be more red. This was achieved using Three.js and GLSL, I will go more in detail about that later.
Pitching clients - uniqlo
We used a lot of my prototypes to pitch to clients such as Wharton School of Business, Lynn University and Uniqlo. I wanted to go over one of those pitch prototypes as this one has a very interesting story behind it.
The Uniqlo prototype takes us from the login page and then explores features like Group Reactions and Community Notes. It showcases perfectly how our technology and data collection tools can integrate seamlessly in a massive company's training app.
We see different types of content in the course, like videos, pdfs, images, etc. The user then adds a reaction to one of the stories.
We ended up landing Uniqlo as a client and they encouraged their users to use Group Reactions feature as often as they can. It ended up providing them with a ton of data on how people were engaging with their content and how they could make it better.
Story time: This prototype was done in less than 2 hours. The VP of Design at the time reached out to me at around 12 PM and told me our CEO was pitching to Uniqlo around 3 PM and they need the prototype asap so that they can prepare the rest of the presentation. It was stressful but we got it done.
Gradients
We wanted gradients to have a life of their own, we wanted them to be a hero element in the app and dynamically react to the class reaction data. We had various different gradient elements across our app, even our loading screen had a hero gradient element.
On the left you see the dynamic gradient element I designed for the Group Reactions tab inside the Honor Learning App. For Prototyping purposes, I exported each of those layers as a Lottie file and scaled them with the real time reaction data. For the final version I got started with a version in GLSL, to make it cleaner and look better, although the dev team soon took over my starting file.
The video on the right is an element that was used in the website and marketing side of things, that video was used in almost every pitch and was very prominent on the website. The gradient element was developed in GLSL and then tweaked a bit in After Effects for the final render.
Immersive scroll
Immersive Scroll was the other big feature that I was designing and prototyping for at Honor. The team wanted a vertical, TikTok like experience for the learning app. From our initial testing, students found it very easy to go between the different content types and were engaged a lot more.
In the adjacent video, you can see it in action on a mobile device. "Envisioning the Future" class has a lot of different types of content, including a quick Q&A that the teacher wanted to include to keep the students more engaged. You tap on any of those elements and it takes you to an immersive view, where you can scroll through all those media types seamlessly.
The Group Reaction interface stays consistent across all these different content types and allows you to annotate, make notes and share your thoughts with the class easily.
In the second video you can see Immersive Scroll in action on the web, we wanted to keep the experience very similar across devices.
teaching app group reactions
The companion to the Learning App was the Teaching App. This as the name suggests is meant for Teachers and Course Administrators. With just a simple hover you can see all the Group Reactions and student engagement data for every sub section of the course. I was mostly focused on the Learning App but I got to work on the Group Reactions feature integration in the Teaching App.
©2024 Mad Pixels DESIGN
Go Back To Top
©2024 Mad Pixels DESIGN
Go Back To Top