Schoolconomy
In February 2024, I participated in a design competition through the KSU UI/UX club. The club partnered with a company called Hatchbridge, which grows startup companies. We formed teams and were matched with one of three companies. I was on a team of three, and we got assigned to a company called Schoolconomy.
My team had a week to design a landing page in Figma for desktop and mobile. The purpose of the website landing page was to encourage users to download their mobile app.
My team won the competition, and Schoolconomy is working to develop our design.
Before
Although the project duration was only a week long, my team took ideas from Lean UX (agile) methodologies. To start, we interviewed a representative from the company about what business goals they had. From this, we established that they were looking for something eye-catching that would appeal to both children, parents, and teachers. While the business has a current landing page, it didn’t match the branding of their mobile app. Another request the company had was to include an animated visual. We were also given the screens of their current mobile app. This helped us to match their color scheme and style.
Business Goals
Inspiration
For inspiration, we looked at a multitude of successful landing pages. One that we really liked was Duolingo’s landing page. I particularly liked that it found a balance in appealing to both young and older audiences. The playfulness of it was fun without being juvenile. We made a list of what each landing page had in common, and from here made a list of requirements for our page. Using this, we formed an outline.
After getting the basic layout, we established styles within Figma. For this, we used a brief style guide that Schoolconomy gave us. Purple appeared to be the color most heavily used in the mobile app, so we decided to make that color the primary color of our landing page.
We wanted to give a sort of modern, creative feel to the company. We found a series of graphics that seemed to suit the company and their values. We started with the rocket illustration. Then, I had the idea to add a gradient sky. I wanted to tie this in with something money related, so I added coin illustrations to look like stars.
Since the company wanted an animation, I used Figma’s smart animate feature to make the rocket move in a subtle way. I wanted the animation to be eye-catching without being overwhelming.
I did a similar animation at the bottom of the page with the running robot. This served primarily as a way of adding visual interest and movement.
Styles
Responsiveness
While not a requirement for the competition, we wanted to visualize what the landing page website would look like on a mobile device. We found that are design transferred well. We only had to make some tweaks with the sizing.
Reflection
Our design won the competition, and it will be implemented by Schoolconomy. They appreciated the creativity of our design, and felt that it was a great representation of the feel of their company and values. This was my first experience completing design work for a business. I learned that it’s best to really think things through and have a method for designing. With visual design, I’m always tempted to jump right in and design based on aesthetics. However, by taking a step back and considering business goals, my team was able to create a successful design. By establishing a structure and plan, it actually helped me have even more room to be creative. I found that my team really got in the flow of things once we had a direction and a common goal. Overall, this was an excellent experience and a good challenge for my visual design skills.