Menu
GLO+GRO • LANDING PAGE
Developing a landing page for a wellness newsletter
Web Application | UX/UI + Front-end Development
Project overview
GLO+GRO is a wellness newsletter that delivers daily affirmations to your inbox. The mission of this brand is to help subscribers glow from within + grow personally. The newsletter is free to subscribe to + is delivered every morning.
The role: UX/UI design designer + front-end developer working solo || The scope: UX/UI design, Development || The timeline: 5 weeks
The challenge
With so many messages coming at you daily across media platforms + social media, it can be difficult to feel your best day in + out. Creative entrepreneurs who rely on social media for their work or livelihood aren’t always able to unplug from their phone to refill their cup + pour into themselves.
The opportunity
Although many are unable to unplug from their phones, there’s an opportunity to enhance their overall well-being within their daily routines.
LOW FIDELITY WIREFRAME – Version 1
LOW FIDELITY WIREFRAME – Version 2
Initial mockups
The goal behind creating the low fidelity wireframe was to understand the best placement for items on the page. The landing page itself would have one primary CTA + I wanted to ensure that the user was easily able to identify the step they needed to take without having to search.
Insight 1: Originally this project was planned to be a downloadable app, but changed to an email subscription. This decision came after realizing that the user is constantly connected through existing communication platforms. This insight allowed me to shift to an email subscription to easily fit into their daily routine.
Insight 2: By laying out the page’s components, I realized I was giving more information than what the user needed + not prioritizing the primary CTA. This led to me questioning how can I optimize this page so that users quickly get the result they are looking for? The result was condensing the page to solely focus on the subscription.
Final wireframe: The design I finished with took into account the end user’s needs and user feedback.
Final mockups
The final design highlighted the primary CTA while also taking into account the brand. There were subtle changes made to make the page light, playful + approachable to the user. Elements like rounded corners, the brand color palette + imagery left the design feeling clean, youthful + professional all at once.
Development
After finalizing the designs, I moved on to focus on implementing all my work through front-end development learned through my coding fellowship. Using HTML, CSS + a bit of Javascript, I was able to deliver a functioning web app.
The end result
I fully coded a working landing page as my final project during my time as a Coding Fellow at LACRM.