Aggressive Strategies LLC

A simple personal, yet professional website, for a long time COO, and Financial Advisor.

My friend, Steve, contacted me to do a website for him...

Steve heard I was designing websites, and decided to speak with me in order to put together a simple professional site, that wouldn't handle actual business or sales

We spoke on the phone and through email.
He wants a personal website with his professional background and new Aggressive Strategies business to be the focus.
The target audience would loosely be professionals in the financial community.
He wants it done quickly and simply; he doesn't want to have to spend much time on this.
He requested, and I sent him a proposal via email; and he approved and said to move forward.
My Role: UX Designer, Web Designer
Tools: Figma, Zoom, sketchpad, pencil, Coolors.co, Unsplash, Wix.com

Research

Interviewing Steve

I know NOTHING about the Financial industry so I wanted to understand his world a little better with tons of questions
He's got a VERY long background in business, investing, and running large businesses
He wants a basic website that has NOTHING to do with sales or selling things; purely informational about "Aggressive Strategies LLC";
The site might one day include sales, but not now
He wants a super simple basic Website
He wants a BIG Focus on branding with colors and font
He wants it done quickly, and doesn't want to be bothered with a ton of meetings: "I just want a simple website"
I told Steve to gather whatever photos & content he wants in the site, and I got started on the research & design right away!

Fidelity Home screen

The Competition

The financial worlds is new to me, so Steve emailed me links to several reference websites I could use. Most were very plain and vague, and chose images like cityscapes, and images of the people on their team.

From there I googled as much as I could to get a better feel for the financial world.

This isn't REALLY a competitor analysis, since he's not trying to compete with anyone, but purely to help me get a feel for the financial world that he's deeply rooted in.

Sketches to Wireframes

Some sketches for the Homepage

Sketching some ideas

Sketching helps me generate clearer ideas for the website.
Thinking about my interview with Steve, I knew his main focus was "SIMPLE".
I decided to keep it to one page: About Steve section and contact section. Doesn't get much more simple than that!
I sketched 3 different versions, with the layout changing minutely in the hero image, Nav, and About section.
I wanted to figure out the hero image before making a decision on the rest of the layout because the hero image is first thing we'll see.

My style guide in Figma

What kind of style...

I started researching some palettes on Coolors.co. I put together some colors that felt fun, professional, and strong (financial feels!)

Steve is from Chicago. And ALL things Chicago are very important to him.

So I wanted the hero image to capture that love with an iconic scene from Chicago. I used Unsplash to find a great free photo to use. I also decided to add a quote specifically about the people from Chicago to add more depth and interest to the image.

I put everything together in Figma, and went through several fonts to get the RIGHT ones for ASL

"I'm impressed with people from Chicago...Hollywood is hype, New York is talk... Chicago is WORK."

Michael Douglas

First version of hi-fidelity About screen in Figma

Hi-Fidelity Wireframes

I did one screen, with the About section, and a contact form below.
I started with the hero image and Michael Douglas quote, and worked my way down.
I focused on Desktop which would be an easier and clearer way to show Steve (who prefers using his desktop over mobile)
I found a great Photo of Steve on his LinkedIn and used that for the About Section.
The yellow tie he wears in the photo, is perfect with the rich blue background color I chose. Which also goes perfectly with the hero image.

User Testing

Prototype & User Testing

I prototyped the hi-fidelity wireframes in Figma, so I could have it tested.
I was able to schedule a User Test over Zoom, and one in person.
The feedback was mostly positive with a simple comment about my page choices. "Maybe you don't have to use a contact form?"
They loved the simple and clean layout, photo and the colors.
I stuck with the contact form, because I wanted ASL's contact info in the footer as well. That way, there were multiple ways Steve could be reached.

Sending the wireframes to Steve...

Steve didn't want to meet over Zoom. He asked that I just email him whatever I have, "in a PDF or something" and he'll just look it over.

He LOVED the hero image and quote. "I am blown away! You included my two favorite things: Chicago and Michael Douglas!"

Steve wanted to add another image of Chicago, "You really caught my attention"

I decided to make it a two page website. At first I played around with another Hero image for the second scene, but decided on a more simple and smaller image in the contact form. To make the landing page stand out even more.

I exported the updated wireframes as JPEGs, and emailed them to Steve, for approval. He preferred to look at them this way, rather than looking in Figma.

He loved them and approved my request to start building his website in Wix!

Hi-fidelity About screen wireframe in Figma
Hi-fidelity Contact screen in Figma

The final website

I was able to complete the website on Wix.com over the weekend. Because I still had a full-time job, outside of UX & Web Design, the weekends were my worktime. Because of my previous freelance work, and the simplicity of the design, I was able to flow easily, and get the job done efficiently.

Here's the fully published website! aslatl.com

After publishing, Steve tinkered with some of the alignments and fonts. But otherwise, you get the idea!