Understanding Project Needs

Project Overview

Home was created for a class project, prompting us to analyze a genre that is commonly used in our field, and create a composition that serves as a guide for other students in the field. We could choose any medium and any genre, and I chose to make a website analyzing financial technology home pages.

Goals

Create a website that will teach students in UI/UX about the genre of financial technology home pages
Help viewers understand the analysis, easily find information, learn key concepts, and engage with the site
Serve as an educational tool while also driving readers towards my contact information, as it will be hosted on my portfolio site

Timeline

Oct 27-Nov 14 2024

Disciplines

User Experience Design
User Interface Design

Responsibilities

Research
Analysis
Writing
Visuals/Animations
Webflow Implementation

Tools

Webflow
Adobe CC Illustrator, Photoshop, and After Effects
Lottie
Figma

Problem Statement

Users need to learn the important aspects included in a financial technology home page (as well as what not to include) in a way that is engaging and easy to understand. At the same time, it needs to build my credibility as a designer who is worth learning from, as well as worth hiring/promoting by my secondary audiences.

Research and Analysis

Desk Research

First, I started researching the overarching needs and goals of a web home page. These apply to all home pages, and the research is selected from various time periods. I chose these sources because I wanted my base understanding of home page needs to be timeless, avoiding undue focus on current design trends.

Based on my research, these are the key measures of an effective home page:

Balancing Complexity

The amount of diverse elements, imagery, and links all contribute to the home page’s level of complexity. Don’t add too much or too little, complexity has a sweet spot, and should be kept to a moderate level.

Essential Content

A quick overview of what you offer, without any extra details, a way of reaching everything on the site, and a way of contacting you are all necessary components of a good home page.

High Involvement

A home page must be involving to create approach behavior in a user. Involvement is a measure of how rich for exploration your page is.

Competitor Analysis

The meat of my analysis was based on the ‘competitor’ or example sites depicted below. I compared all of the sites against each other, and made note of what they all had in common. A specific focus is given to how the sites maintain attention, balance complexity, and create approach behavior in users who enter the site without a goal.

Synthesis

Users

Next, I had to form an understanding of the needs and motivations of the types of audience the site will have, which will allow me to predict their journey through the pages.

User 1: Student and Entry Level UI/UX Designers

May read all the way through if engaged enough
Seeking instructions on how to create a home page
Needs the site to be credible, engaging, and easy to understand

User 2: Professors and TAs

Will read all the way through, likely multiple times
Seeking a multimodal composition (images, text, spatial) that analyzes a genre
Needs the site to complete all assignment requirements, be easy to navigate, and have all sources cited correctly

User 3: Potential Employers

Least likely to read all the way through
Seeking evidence of my UI/UX design abilities
Needs the site to be well made, show my ability at a glance, and not require effort to see all of my design elements and my contact information

Features and Content Priorities

Home Page

Needs to reflect genre conventions to build my and my advice/analysis’ credibility
Shows off bulk of my visual and UI design for those who won’t press on to the analysis

Analysis Pages

Breaks the aspects of my analysis into cohesive groups, creates a rhythm of information and similarity to example sites homepages
Navigation to all of these pages should always be present for those who need to go through my analysis thoroughly/multiple times
Needs a mixture of imagery and type to keep engagement from those seeking to learn from the site

"About Home" page

Needs to be accessible from every page for those who need to know the scope and brief of the project without reading all the way through

"About Me" Page

A background on me for those who are seeking information about me as a designer
Contact information should not be limited to this page

User Flows

With my goals and user personas in mind, I planned my layout around leading users through a similar journey starting from my home page towards my contact info, with different paths depending on the type of user and where they came from.

Structure and Prototyping

I mapped out a site structure that is engaging and follows genre conventions of the financial technology home page, keeping in mind the paths I planned for navigation.

Sketch of Home: A Genre Analysis' home page layout.

Because I needed to fully publish the site, I did not use Figma, because it would have made the transition to Webflow a redundant process and held me back on the 2-week timeframe.

Materialize

I chose to mirror the visual language of financial technology sites in my analysis, calling for clean sans-serif type, bold color, and flat, modern, icons. The color palette has been checked for contrast and accessibility, and has been used alongside some custom elements to create a credible brand for the project.

Visuals

I created motion graphics, integrated mockups, and constructed charts and sliders for more diversity in content presentation, as well as visual cohesion. Keeping visuals simple is necessary, as I don't want to overwhelm the educational content of the site.

Chart describing mystery, coherence, legibility, and diversity

A graph charting the inverse curvilinear relationship between complexity and effectiveness

Delivery

Results

My site was selected by my professor for instructing future semesters of students, and I was able to get all of the aspects I planned for it done before the deadline. I'm very proud of all I learned from this project, and it has been shared amongst my peers, representing my main audience, fellow UI/UX students.

Takeaways

After this project, I understand the power of analysis and genre (or competitor) research deeply. I am able to see home pages much differently and pick up on smaller details that make them effective, so I can't wait to apply this process to other genres. Alongside a better understanding of the UX process, I gained familiarity with responsive design, CSS flexbox layout (auto-layout), and CSS units.