Project: GLO+GRO

UX/UI DESIGN + Development

3

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 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 Solution

The goal was to design a landing page that allows users to quickly subscribe + receive the daily pick-me-up they need without unplugging from their phones.

Role + Scope

As the UX/UI designer + developer for this project, the scope of my work was to come up with the designs from start to finish + develop the product with HTML/CSS within five (5) weeks.

The Design Process

LOW FIDELITY WIREFRAME – Version 1

LOW FIDELITY WIREFRAME – Version 2

Low Fidelity Wireframe

This 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 communication platforms, so I opted to make this 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.

high FIDELITY MOCKUP

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.

Screen Shot 2022-03-08 at 4.46.54 PM