Advice Analytics ↗
@Designedbyvalerie

Advice Analytics Website Redesign

UI Designer, Web Designer
Overview
From my original role as Product Marketing Intern to only after 5 weeks being promoted to Associate Marketing Manager, one of my first full-scale projects was to do a complete redesign of the website homepage. Advice Analytics strives to help over millions of Americans with their retirement.
location
San Diego, CA
duration
5 weeks [Expedited production]
product year
2021
THE PROBLEM

With a high bounce rate of 94.41% and not enough unique visitors, my director and I decided to tackle this issue.

Our previous marketing specialist ran a 30 posts in 30 days campaign, yet we did not receive any "sticky" traffic. At our team meeting, I created a powerpoint with KPIs and the steps needed to be taken to achieve these in order to showcase the need for the change.

"I really am interested in this product. However, I was not very convinced I need it and the website did not do a lot of convincing." - User Tester
apparel
Over the years, I've done the graphic design t-shirt logos for lots of my peers Greek life events such as philanthropy shirts that are sold to donate to a chapter's phil organization, COVID-19 relief fundraisers, and also am currently doing custom designs through my platform on Instagram. Production of product was completed through San Diego screenprinting with the exception of clothing I made for myself.
GRAPHIC
Aside from designing graphics to go onto t-shirts or apparel, I do a fair share of regular graphic design whether it's for myself, my friends, inspiration, to sell on stickers, or just for fun. On average, I design graphics on PS/Illustrator about 2-3x a month. Not everything I've made is pictured here. Recently, I've switched over to Cricut Design Space as I've been a lot more physical products lately (see next section).
beginnings of my products on
instagram
Below are all the products I currently have made and sold on my Instagram @designedbyvalerie. All of them come from different forms of inspiration... Pinterest, holidays, Instagram explore, the Cricut Instagram, my own crazy mind. :) Aside from the here and there colleagues who hit me up to design, this is definitely my freelance focus for 2021. Hit me up for custom cards and home decor!
research

Research was conducted over 1.5 weeks prior. I implemented Hotjar into our website and studied recordings every day, studying the users who did make it to the website and what they spent the most time on.

Other design research was conducted and completed in a document and powerpoint. Due to privacy agreements, please inquire at valerievgonzaga@gmail.com if any further questions arrive.

insights
01 Modernization to reduce bounce rate
This is completely outdated. We need to follow more modern trends. There needs to be something more that makes me want to stay on which can result in gaining more leads to lead conversion.
02 Increased clarity
There needs to be something that makes me want to stay on this website because I do not know what it is. 03 Let's just fix this: A powerpoint was created for my internal team with what detailed steps needs to be taken further, to which I won approval and began sketching right away.
DESIGN
Comp. Analysis
Sketching

Prototyping
Implementation
Due to an expedited process, only competitive and design research was conducted. Sketches were immediately due within one week to get to production very quickly.
How do I design an eye-catching informational homepage that will lead to our company gaining more traction and more clients?

SKETCHES
No items found.
Despite sketches not being "required" by my director, I created a few rough ones just to give a brief layout of what I was thinking. The process here was to create an eye-catching top header and provide more information than in the past. Because we are a very new company, we need the very top (what every user opens to) to give the most bang following the common website design trends from 2021. Top, elements, middle (animations), extra value, testimonies, contact us, pizazz. All of these follow the regular structure of website hierarchy. I spent most time on animations as one of our goals to establish was to “stop the scroll.” As a FinTech company, we realized the importance of having as much information as possible, but still being catchy and concise. All sketches I do are now by hand on paper, as I find it easier and less committal compared to using my iPad.
Prototypes
The mobile prototype was create first, following black styles to remain "professional." However, stylistically we went ahead and discussed using our branded blue as soon on the desktop prototype.

The idea here was to provide easy access into the website and to give clear understanding that the purpose is to browse different things and places that exist in a specific city.

These sketches translated into lo-fi prototypes I did on Figma. I followed closely to the prototypes that "won" approval and also ones I believed were most modern. Despite the design being modeled off of typical app design, Andres had a liking for it on desktop as well.
Prototypes
01 Prototype

The way the Product Design team functions is more so on seeing the visual prototype. With each sketch, I translated it into Axure, a prototyping software, and showcased how it would actually look on the software. The orange button was not the correct color and the length of the button was a bit too wide here. Our style also does not permit buttons on the left hand side.

1.5 Prototype

Moving the placement of the button to right below “Add Another Custom Message” was an idea I had, yet it then showed as a “competition” to adding another message. In addition to this, they would both need to be blue which would then compete even more. My next solution was then to move the send preview button to within the “Custom Messages” widget.

02 Prototype

My director at the time shared the brand library with me as I realized I did not have it at my disposal. Due to the orange being for a different action, the gray button aligned with the importance of this new feature. Important, but not as important as orange. Moving the button within the box made it clear that it pertained to custom messages only.


prototypes

Split into four sections, I show different iterated prototypes for the four main sections I divided the homepage into. Presenting my full wireframe to my director and CEO, the turnaround from this meeting was about 2 weeks. I created two versions, one with a carousel of animations and one with an elongated scroll where there would be blocked features with gallery style product images (you can see the process in the Benefits & Elements tab.

The Hero image was decided on quickly, following modern styles and an animation falling as our main hero image to "stop the scroll" to allow users immediate knowledge of our main product. Testimonies, Extra Value & CTA required some fine tuning only for style purposes driven by wanting to provide the user more reason to "stop the scroll." One big thing for me is always, always keeping the user in mind. Once approved, I began working on finalizing the layout immediately. I met with my director once a day keeping her updated and continuously testing back and forth with her.

User testing was completely in-house and through friends from UC San Diego. Animations took me the longest, but I feel as if Jitter and Adobe AfterEffects became very close in that timeframe :-). In addition to the prototype, I was able to write a full word document of all the interactions.

Full product elements were scrapped to just include short preview of products.
FINAL prototype

Happy to announce that the website is live at https://www.adviceanalytics.com/.

Before my departure, I was able to use HotJar to see our metrics and users were typically spending longer than before on our page.

REFLECTION & FINAL NOTE

Right now, the bounce rate sits lower at 43.13%, significantly lower than our original 94%. New unique users have increased from the single digits to almost in the threes. I continue to monitor user behavior to this day, and am looking forward to seeing where the trajectory of this company goes!

I would like to thank my director Alyssa Morales for not only supporting me but also believing in my abilities straight right into my promotion. This was my very first big project in my career, seriously, and there were many nights that I did a lot of re-schooling myself just to make sure I was doing things "right." After our first meeting and my initial first drafts, she mentioned to me, "We know you have more creative - don't be scared. I want you to rip it apart." To which, I realized I was very much playing it safe. If she had not said that to me, the website would look very similar to how it did before. I'm glad I was able to have this creative freedom, as I do understand it is not likely in many companies. I would also like to thank Yashar, our CPO, for his feedback and Jerry, our CEO, for providing all copy.

Other projects

Wells Fargo Premier
↗ View work
Advice Analytics Website Redesign
↗ View work
events.com Custom Confirmation Layout
↗ View work
Freelance graphic, product design & commissions
↗ View work