Alejandro Garzon

UX/UI - Web Designer

Alejandro Pic

Hi,
call me Alé.

My name is Alejandro Garzon. I'm 23 and currently a fifth-year Human-Centered Computing student @ RIT. Born and raised for half of my life in the tropical city of Santa Marta, Colombia, I moved to the United States about 11 years ago. I have a passion for technology, especially when it comes to human computer interaction.

I started as a Computing Exploration student, which allowed me to get a taste of each field before committing. By the end of Freshman year, I had declared as an IT student. As I immersed myself within the field, I found myself being drawn towards topics of design and user interaction. By the beginning of my Sophomore year, I had heard about a new major called “Human-Centered Computing”. I instantly switched, and fell in love with it. Up to now, it has been the best decision I have made during my college career.

SITO logo

SITO Website

Rochester, NY Spring & Summer 2018

Completely re-designed brand, layout structure and functionality for SITO's company website.

READ MORE
SITO laptop

Problem

SITO's company website serves as a site where users can get a quick summary of their work, what they're about, and many other generic information that most company websites provide. However, with its short one page scroll layout, the site is limited to how much information it could provide within the future if the company were to expand. And, with current plans to do exactly that, the website needed a complete design overhaul.

Market Research

Keeping in mind that there was a substantial amount of new content/information requested for the re-design, the one page layout that was currently in place would not be beneficial. This led me to completely scratch that structure and put in a more traditional multiple page website layout. And because I would be starting from scratch, I needed to envision the new base structure, which meant I needed research and analyze how other company website structures operated. After countless examples, I focused my results into the three following websites:

User Flow

After getting a better idea of company website structures, and their effective marketing methodologies, I began to get a more solidified idea of how I wanted to re-structure the SITO website. But before touching any sort of wireframe, I thought out the website's page-by-page interaction by iterating through user flows until I reached a version that would satisfy my client's demands effectively.

 User Flow

Going Low-Fi

I wanted the layout structure of all of the re-designs to have a heavy emphasis on large imagery and short, but powerful text taglines. By following these two main design trends, I could successfully capture and maintain the attention of users who want to quickly navigate through. And, for those who want to learn more about specific sections (jobs, current projects, etc.), they could do so through navigation links provided throughout the site.

Lowfi Wireframes

Going High-Fi

I used the following moodboard to guide my high-fi wireframes, and ensure that every site kept the same branding. And even though I was content with the direction of the overall design, I ended up going a tad off-track.

Moodboard

Even though the majority of the core structure, functionality and flow had already been designed by the time the high-fi wireframes were complete, a significant amount of time was used making re-adjustments to the visual elements, ensuring that all sites would look and feel like they belonged to the same brand.

Highfi Wireframes

Challenges

Although coming up with a completely new site layout/structure and branding was time consuming, it was something I had already been exposed to through other co-ops and schoolwork. However, the real challenge was coming up with meaningful content for the targeted audiences. In previous co-ops, companies had dedicated content writers that were passed down to me to put into actual designs. For this company, that was not the case, and since a lot of their targeted audiences were students like me, I was put in charge of coming up with what should be expressed through each page.



REPORTER logo

Reporter Redesign

Rochester, NY Spring 2017

Analyzed magazine and news sites for their strengths and weaknesses in terms of design layout and UX, and applied them towards redesigning RIT's REPORTER site.

READ MORE

Problem

The Reporter is a student based site that focuses on sharing articles revolving around campus life/interests. Although it has a rather simple and user friendly navigation, its simplistic design makes the site and content visually unappealing, which was a focal point when the site was originally a magazine. With a design layout focused on visual stimulation, users will likely find the site’s content more appealing and engaging.

Reporter Three Screens

Approach

In order to close the gap that seemed to be missing between the Reporter’s previous state (magazine), and its current state (website), I created a layout with a lot more emphasis on visual demographics. For the home page, instead of having a larger navigation section with two bars at the top, I added multiple featured articles with appealing images that will act as the site’s banner. The content area has also been revamped: the Twitter section has been removed, and has been replaced and expanded as a section for the top story/article. The most recent articles will be displayed in a similar manner, but will have an emphasis on its images and typography. Following the same theme, article, and other content pages will still have a large emphasis on visual elements (large images, bold fonts, etc.).

A second site layout was also created. I wanted this design to focus more on the site’s articles and the writer’s content, which led to a design that utilized its space to display more articles. Although more content could be displayed, it was visually unappealing and lackluster compared to the first design.

Project Stakeholders & Audience

Due to how the site is managed by both faculty and students, I looked at their "about" section to get a better understanding of the project stakeholders, and listed those who I thought would be crucial. Also, In order to get a better understanding of what needed to be designed, I thought about your "typical" user within the site. This provided a sense of direction in a quicker manner without having to develop multiple user personas.

Stakeholders and Audience notes

User Stories

User stories were created in order to help pinpoint certain features that could potentially be useful for users. Although not every single feature was planned to be added, it still provided aid in terms of visualizing what the layout would eventually be.

User story notes

Challenges

Creating a completely new design while also trying to preserve some of the aesthetics that make the Reporter THE Reporter was challenging. Although I had a about 10 different concepts in terms of site organization and hierarchy, choosing the actual visual elements was difficult. I had three potential designs in mind for what the site should look like. I created multiple moodboards to try to achieve some of visions I had, and eventually ended up with a dark and bold design with a paper-like style. This would allow for the images and other small color accents to really stand out and do the majority of the talking, which is what I had originally intended to do.

Once I had a clearer image of what the theme of my site would be, I created the high-fi. wireframes, and did multiple revisions. The next step was to actually code the site, and although I've had 'extensive' exposure to HTML/CSS and Javascript, this was the first time I had ever used the framework, Bootstrap. This caught me by surprise due to the amount of time I was spending trying to learn it, especially when it came to understanding how its behind-the-scenes responsive design worked. I found myself often doing revisions of the site as I coded, but did not have the time to change them due to the amount of time I spent solely on teaching myself Bootstrap while trying to meet deadlines. In the end, I was pretty satisfied with the results, and was extremely happy knowing that I had MUCH more experience using Bootstrap than I did at the beginning of the project.


Twisted-Rope Logo

Meet the Team Concept

Buffalo, NY Summer 2017

Designed new “Meet the Team” concept for Twisted-Rope's interactive site that would encourage users to navigate through the site rather than just simply reading from a list.

READ MORE

Problem

Twisted-Rope's interactive site is currently a source for both users and clients to get a sense of what the company's main office is like. Site visitors can navigate through the site and look around and get additional information from clickable hotspots. Within the site, users can also learn specific information about each employee and their role within the company. However, this piece is currently tucked away in a side menu, and once opened, it does not provide any interaction whatsoever, which completely defeats the purpose of an interactive site.

Approach

Due to the site's main purpose being the interactive elements, I wanted to come up with a concept that would encourage users to explore within the site whenever they wanted to get information about the company's employees. I analyzed the site's current layout and discovered that they had member silhouettes scattered across the site. That is when I came up with the idea of a design that would incorporate these silhouettes within the “Meet the Team” piece. Since the majority of the content was already there, I used Principle in order to prototype the exact motions I had in mind for its interactive pieces.

The main concept within this design is that each member would essentially become a clicakble hotspot. Whenever a member is clicked, the area of the office would zoom in to its location while the silhouette expands in an outwards manner. At the same time, a window would appear next to them containing their information. This animation concept was inspired by ones used similarly in video games and comic movies whenever characters are introduced.

Meet the team interactive piece 1

An important element that was needed to be considered was the integration the list of the other team members. After all, it's meet THE team piece, not meet SOME of the team. In order to achieve this, I added a menu that contained a list of all the team members of the company, and linked it through a clickable link that would be present in all of the member's individual descriptions.

Meet the team interactive piece 2

From the member list, users would be able to browse through all the members, and click on their portraits. Once clicked, the site would be pan out to the location of where their silhouette is located, and would prompt the same animation along with their description.

Meet the team interactive piece 3

Due to how the site would be unable to fit 40+ member at all times, only a certain amount would be randomly displayed for certain periods of time. And, if a member is clicked within the list of team members that is not currently present within the site, the previous silhouette would be replaced with the one that was clicked.

Meet the team interactive piece 4


Twitch Logo

Twitch Redesign

Rochester, NY Fall 2017

Redesigned layout and branding for the landing page of a videogame livestreaming website through user and market research.

READ MORE

About the Site

Twitch is a livestreaming website where users can broadcast themselves playing videogames. With more than 2 million monthly broadcasters, the site offers a variety of games and entertainers for users to enjoy. However, due the amount of content being displayed at once (especially on the landing page), users are bombarded with an overwhelming amount of information. From bright and colorful videogame covers, to blocks of texts and descriptions, navigating through the site, especially for the first time, can be a challenge, and can quickly make users miss the main points of the website.

Approach

Since Twitch is a website that revolves around gaming, the focal point SHOULD be videogames. Although the site had already dedicated graphics such as game covers, posters, etc, it does a poor job at making them the focal point. With blocks of text such as streamer descriptions, game titles, and viewer stats, everything becomes unpleasing to look at. By aiming towards a more minimalistic design, users would have less information to process at once.

 Solutions

Audience

In order visualize the direction of the site's redesign, it was crucial to understand how multiple different users would benefit once they arrived at the landing page. And although the large majority of users would be teenagers/young adults, each would have different gaming backgrounds and motivations.

Designing its Elements

Prior to the full redesign, I focused on three specific elements that defined Twitch's landing page; featured streamers, top videogames, and top livestreamers. The composition of these three elements were the deciding factors that "make it or break it" when it comes to making first impressions, aswell as allowing its active users to quickly finding good content while exploring.

Video Player Live Channels

Coming All Together

Once the main three visual elements had been defined, the rest could now be built around them. In order to avoid making the content dense and overwhelming again, I used a black and white color palette. This give the website a more cinematic feel, and allowed for the crisp and bright colors of the video game streams and covers to really stand out and be the main source of attention. The large use of text was removed, and only a minimal amount remained. This created a more scannable layout that allowed for new users to find the most relevant content for both top videogames and streamers extremely quickly. And, as for current users, they would be able to browse for new content just like new users, but also recognize top streamer names that they may have heard of in the past.

Twitch Redesign

More to Come. . .

Soon. Real soon.

Designed and built by Alejandro Garzon, 2018

Contact @ axg6655@g.rit.edu