Timeframe
1 Week
Status
Completed
Webflow & Figma Link
Team
Tony Ramirez (Me) & Caitlynn Campbell
Placement
Runner’s Up
A Design Competition to create a landing page for a start-up Company.
KSU’s UX/UI club partnered with Hatchbridge Incubator to host a design-a-thon whose final goal is to create a landing page for a start-up company. The company we were designing for was Exoskeleton Innovations. We were given a week to create a landing page for the company to attract viewers and new customers to discover this new type of technology.
Exoskeleton Innovations (ESI) is a start-up company made up of entrepreneurs from several metro Atlanta universities who are passionate about creating an exoskeleton suit for athletes to boost their resistance training and performance.
Lean UX
For this project, the urgency of developing the landing page within a tight timeframe necessitated an approach rooted in lean UX principles. With streamlined processes and a focus on efficient collaboration, we optimized our resources to deliver a functional solution promptly. By prioritizing essential features and feedback iteration, we embraced a lean UX methodology that enabled us to efficiently meet the project's objectives despite the constraints of time.
Initial Ideas
Caitlynn and I set a goal to increase viewer reach and interaction by incorporating an attractive HERO section. When looking at inspiration, we came across Porsche’s website, which included a video of their most recent vehicle that they were trying to market, which gave us the idea to create a video for the HERO page.
After coming to a consensus to what was going to be included, we then proceeded to create different layouts for the landing page. We wanted to create something eye-catching, sort of like a TV commercial. After several iterations, we decided to go with the video layout that encases the entire screen.
Primary Iterations
I searched for multiple stock videos that contained action shot of athletes from different sports, as well as workout videos and spliced them together using Adobe Premiere Pro, and created a ~30 second video that would play in the background to create an emotion-driven design for users.
ESI Video
We also decided to rebrand their whole company, since the CEO gave us full creative freedom with this, I decided to create something brandable but unique to ESI.
We decided to redesign the ESI logo to a more contemporary, modern look. We decided to resemble the word “innovation” with ideas, so we made the outline a lightbulb and split the top in 2 halves, one half representing the engineering aspect of ESI which takes the form of a gear, and the other half is the lightbulb with both of the company’s colors on it.
We also rearranged the fonts. We removed “Fredoka” as it didn’t really represent innovation and technology well and used “Sofachrome” (the previous logos typeface) and Montserrat as the new typefaces.
Brand Redesign
Before
After
My partner Caitlynn transferred our design to Webflow as part of the requirements for the submission. There, she helped create a responsive design that works with any tablet, phone, or computer. Linked above is also the Webflow link.
Webflow Transfer
Our final design was a harmonious fusion of modern elements and cutting-edge technology. All the intricate details and thought processes behind our creation can be explored in depth within our comprehensive Figma file shared in the link above, accompanied by insightful mood boards, multiple design iterations, various components, and a holistic view of our entire design journey. Although we clinched the runner-up position, we take immense pride in our accomplishments thus far, relishing the wealth of knowledge gained from this enriching experience.