Refactoring UI: Attempting to create a better first impression for our non-profit's homepage

For the past two years, I've had the privilege of building an educational non-profit called Destined for X. We connect underprivileged/underrepresented high school students through our Silicon Valley immersion program so they have the tools and skills to develop their personal and professional careers. We teach skills such as effective goal-setting, networking, and public speaking. In addition, students get to tour big tech companies such as Microsoft, Facebook, and Google, while having a chance to meet with top executives, engineers, and entrepreneurs.

The purpose of this blog is not about the story of how we became the organization we are today. If you'd like to hear more about the story of how we have grown these past two years and what we've done, feel free to visit my reflection article on my LinkedIn: From Idea to Reality: Building our Destined for X Community & Empowering our Youth.

Since we are in the middle of student application season and we have a goal of doubling the number of students we are sponsoring this year, I wanted to take another look at our website and see what kind of first impression we were making on visitors or prospective students.

After taking a closer look at our homepage, I was surprised to take notice of a few design decisions that just did not make sense. I don't have formal experience as a designer, but you shouldn't really need to be a professional to notice what looks good and what doesn't. Perhaps my eyes are catching on to new details as I start to care more and more about the visual aspect of a user's experience.

Why we used Squarespace in the first place

• Two years ago, it was the simplest way for us to get a website started.

• Didn't need to touch HTML, CSS, or JS. It just worked.

• Templates were provided.

• Could have a website hosted and ready for use fast! We were a team of three at the time and we were trying to build this program fast. We were shooting for an MVP.

Limitations of Squarespace

• HTML and CSS editing are incredibly difficult. Even discouraged to not mess with their templates.

• Not a large selection of templates.

• Availability of adaptive templates that actually can do stuff.

• Can't add custom functionality.

For the purposes of being scrappy, making things fast, and not getting too caught up in the details, Squarespace worked just fine. However, with the goals that we have set up for ourselves as an organization, it is becoming apparent that we need to have more flexibility and control over how our website. First impressions matter and most people will find out more about us through our website. What appears on that homepage and how information gets communicated in those first few seconds of scrolling matters a lot.

How effective is that first impression on our homepage?

Given my role with the organization--leading student experience and curriculum--I have not had the opportunity to really take a close look at our website and how it built. Currently, as a Full-Stack Software Engineering student @FlatironSchool, I'm realizing that I am attracted to how something looks and how it's presented to a user.

Here is a list of things I notice:

Fonts

• Blues, Reds, Blacks, Greys (only want about two dominant)
• 4 different font families (too many)
• Combination of serif and sans-serif (wanting contrast, but getting conflict)

Spacing

• Spacing is off and often times too large or not consistent with other elements

Flow of Content

• Does it make logical sense to be presenting certain elements/content in the order that they are?
• For a first glance at the website, does it seem professional and legitimate? How could it be improved?

Below are a few snippets from the website's current homepage. It may be easier to look at it directly.

Homepage redesign with Adobe XD

I took the time on a Sunday afternoon to put together a mockup of a redesign of the homepage using Adobe XD. I haven't used a UX/UI Design tool before and this one popped up in my research as one of the best ones to use. Plus it was free.

Link to the high resolution mockup redesign page can be found here

Things that I learned from the redesign process:

• I really liked the process. Working with Adobe XD was simple, but I'm sure that there's a lot more functionality of the software that I'm not yet acquainted with.

• There are many great plugins that other developers have made just for Adobe XD to enhance the design workflow.

• It definitely helps to have the assets for the project and being able to drag and drop them into the project.

• I enjoyed thinking about the flow of the content, how big or how small something was, the spacing, the bolding, the wording, etc. This touches on aspects of human psychology which I've always had an interest in.

• I'm interested in learning more about wireframing and UX/UI Design as a whole. Hoping that it can complement what I'm already learning here at Flatiron, but also inform the general direction of what kind of developer I would like to become. Perhaps I'd like to focus in on UI Frontend Development. Having a good grasp on HTML, CSS, JS and the overall UI design experience.

Sidenote: A need for brand guidelines

What are brand guidelines?

Brand guidelines, also known as a brand style guide, govern the composition, design, and general look-and-feel of a company's branding. Brand guidelines can dictate the content of a logo, blog, website, advertisement, and similar marketing collateral.

As we grow as an organization, we'll need some consistency in our brand. This will matter on our website, but also with our social media outreach. When brand guidelines are created, it is much easier to create content and it takes the guesswork out of the creative process, especially if you have non-design people working on aspects of a project.

Future Work

• Create brand guidelines for the organization.

• We will be transitioning out of Squarespace this upcoming year after the busyness of our 2019 summer program is finished. This would be a great opportunity to sure up my HTML, CSS, and JS skills when building this from scratch.

• I'll probably look into starting a design/web development arm of the team to take care of any future products we'd like to build as it relates to our student programs. Perhaps we could even build our own LMS. We currently use Canvas Instructure LMS to host educational content.