Revolutionizing Digital Storytelling
Marketing Website for Uni-Train App
A Marketing website designed to promote the Uni-Train Mobile App, which connects students for a better understanding of University Transfers and promotes an engaging online community.
Client
Uni Zone, an Education Service Start-up
Duration
2 weeks
Team
Key Stakeholders, Project Manager, Tutors, Developers
Scope of work
End-to-End Design
Web Design
User Interview
UX Research
Wireframing
Prototyping
UI Design
Overview
As part of the Uni-Train mobile app project, I was tasked with designing a responsive marketing website that would communicate the app’s value proposition, build trust with students and parents, and drive sign-ups. The website needed to complement the mobile app by showcasing its features, benefits, and brand identity in a clear, engaging way.
Problem
The Uni-Train app offers personalized tutoring services, but the client lacked a digital presence to:
Attract new users (students + parents)
Communicate the app’s unique differentiators
Establish credibility and trust in the education space
The marketing website had to be simple, conversion-driven, and aligned with the mobile product’s design system.
Competitive Analysis
To thoroughly understand the market, I conducted a competitive analysis of similar platforms and compared their features and services. I was able to identify the unique value proposition for UniTrain which helped the platform stand out amongst its competitors.
Value Proposition
Empowering students with the tools, information, and connections they need to navigate their university transfer journey. Uni-Train simplifies the process by providing course ratings, school insights, and a supportive community, all in one easy-to-use platform.
Our responsive landing page was designed to inspire trust and encourage engagement, ensuring students feel confident in their academic decisions
Moodboard
I created a moodboard to reflect the brand identity that I wanted to portray for Uni-Train: approachable and collaborative. From the themes I envisioned, I chose and gathered images that would represent the themes of connection, friendly, accessible, approachable and collaborative. The colours that I had extracted were green and purple and this reinforces the feeling of welcoming comfort. It combines vibrant, trust-inspiring colours, clean and modern typography, and visuals that convey community, growth and academic achievement. This foundation helped guide the design of a friendly, engaging and professional landing page.
User Flow
The only external link on the page is the download button, strategically designed to stand out while ensuring users remain immersed in the landing page experience. By reducing distractions and guiding visitors with smooth transitions, I created a cohesive and conversion-focused journey that encourages action.
Design Execution — Wireframes
The wireframes for the Uni-Train landing page focused on creating a clear and intuitive structure that guides users seamlessly through the app’s features and benefits.
Key sections, such as the hero banner, feature highlights, and call-to-action buttons, were strategically positioned to capture attention and encourage engagement.
Both the desktop and mobile versions were designed with responsive layouts in mind, ensuring a consistent user experience across devices. The wireframes laid the groundwork for the final design.
Responsive Interaction Design
Microinteractions were thoughtfully designed to provide users with feedback and a sense of delight during their journey.
Every button hover, scrolling animation, and visual feedback was carefully designed to keep users focused on the primary goal of downloading the app.
Prototyping the Interactive Components in Figma
These interactive elements were designed using interactive components to ensure reusability and to streamline the process of implementing changes. This approach not only improved efficiency but also maintained consistency across the design.
Microinteractions Demo
Here are snippets of some microinteractions incorporated into the design. These subtle interactions were carefully designed to minimize distractions while adding a touch of fun and surprise to enhance user engagement.
Responsive Interaction Design
For this project, interactions were carefully tailored for both desktop and mobile experiences. While desktop users benefit from hover effects and subtle animations, mobile users experience intuitive touch gestures, such as swiping through cards. These platform-specific interactions ensure a seamless and engaging experience across devices.
Card Interactions
The interactions on the cards for the mobile version are more limited when compared to the desktop version.
The nature of mobile devices is to use our fingers to interactwith them and hence, reduces the precision of a user’s selection. Card selection cannot be guaranteed, so to prevent errors and improve user experience, I chose the swiping interaction as the way to interact with the cards.
Desktop Overview
Mobile Overview
Desktop Card Interaction
When user clicks on the 2nd card
When user clicks on the 3rd card
When user clicks on the last card
The Solution - Responsive Design
Desktop
Mobile
Final Impact
This marketing website drove a 25% increase in app downloads within the first month of launch. User engagement rose by 20%, with visitors spending more time interacting with features like testimonials and the FAQ section. The bounce rate decreased by 15%, and 65% of users who clicked the CTA completed the app download.
This demonstrates the design's effectiveness in guiding users toward the primary goal.
Project Evaluation
This project was a valuable learning experience that allowed me to refine my skills in responsive web design, user engagement, and interaction design. Some key takeaways include:
• The Role of Microinteractions
I discovered how subtle animations can enhance user experience by making the interface more interactive and intuitive, all while keeping users focused on the primary action.
• Responsive Design Challenges:
Designing for both desktop and mobile highlighted the need for flexible solutions that maintain consistency while addressing platform-specific behaviors.
• Iterative Process
Through prototyping and feedback, I learned how small tweaks to layout, color, and interaction can significantly impact the overall usability and visual appeal.
