Note: To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of my current employer.
MY ROLE: π€ Concepting / βοΈ Sketching / π Wireframing / π¨ UI/UX Design / πUX Research / π€ Prototyping
TOOLS: Sketch / Photoshop / Illustrator / Invision
PLATFORM: Desktop and Mobile
Business Goals: New product for small businesses, the main business goal was to get really small business users to click on the Get Started button. This would launch the small business user to our new website where they could onboard themselves into our new product.
Based on their requirements and user research from the product team, I wireframed a quick pricing section. For the second iteration of the pricing section, I was asked to include the more expensive full service payroll package as another option. I then redesigned the section and received stakeholder approval to move forward with the design.
To make it clear to small business what they needed to qualify for the new Online Payroll, I added a green tab at the top explaining the eligibility criteria required for small businesses. I kept the Online Payroll section background white so users could easily scan information. As well as making the CTA a prominent dark blue color, so the users eyes would immediately land on the CTA when they got to the page.
MY ROLE: π€ Concepting / βοΈ Sketching / π Wireframing / π¨ UI/UX Design / πUX Research / π€ Prototyping
TOOLS: Sketch /Illustrator / Invision
PLATFORM: Desktop and Mobile
Business Goals: Part of my job, is to do research on new SEO landing pages designs. I would take the research I did and redesign our SEO components to be used on future landing page tests.
Combining best practices and internal user research - I designed new SEO landing page wireframe components. Simpler progressive modals, email request forms that can be added in different locations on our landing pages. With teams or stakeholder approval, I would then incorporate these new components into existing landing page design - later to be A/B or split tested.
MY ROLE: π€ Concepting / βοΈ Sketching / π Wireframing / π¨ UI/UX Design / π€ Prototyping
TOOLS: Sketch / Photoshop / Illustrator / Invision
PLATFORM: Desktop and Mobile
Business Goals: Design a landing page for Stadium Live app. One of their main goals was to use emoji's (reach a younger demo who would be interested in the app), make it clear that it was an app and include some of their features they showcased within their app. They also wanted it to be simple enough - so their front end developer could update new features, imagery and copy.
Working closely with the front end developer and based off their research. I started with landing page wireframe with color suggestions. They came back with their new 8 bit logo, new colors that they wanted to use and screenshots that they wanted to be featured. I then added new colors scheme, cleaned up the screenshots & imagery and simplified their feature imagery.
MY ROLE: π€ Concepting / βοΈ Sketching / π Wireframing / π¨ UI/UX Design / π€ Prototyping
TOOLS: Sketch / Photoshop / Illustrator / Invision
PLATFORM: Desktop and Mobile
Business Goal: Received research data that users would come to our landing page at night - they would either hover around our call button on desktop & on our mobile site. On mobile some users would click the call button but then quickly hang up. We looked at call center data and noticed that we would have calls coming in after 6PM, the majority would hang up before the call was picked up. We assumed the reason was, the user thought it was too late to call or that maybe they thought we were closed for the day.
I worked with the front end developer team to design simple non-intrusive modal that would appear (after a couple of seconds) when people hovered over the call us section on desktop & mobile site. The modal would then appear to encouraging customers to go ahead and call us. (In the end they did not use the winking emoji icon.)
MY ROLE: π€ Concepting / βοΈ Sketching / π Wireframing / π¨ UI/UX Design
TOOLS: Sketch / Photoshop / Illustrator
PLATFORM: Desktop
Business Goal: I was hired to update the Stackr App landing page. It was originally built by the owner who is also the engineer, he wanted to update the basic CSS of the site and was open to any suggestions. I worked with the owner and looked at their most current user data and emails from users to figure out pain points. We decided to add more copy explaining the product, add a screenshot that all users would see once signed in and also included a free trial to encourage users to try the product.
Updated the design but kept the original structure of the site, to make it easier to update. I took their original colors and gave him more color options. I also removed illustrations and added product image. Simplified the What does it do? section, added the Free Trial and made sure to include copy, No credit card needed.
Once completed we did a split test and saw an increase of users hitting get started and less emails asking questions about the product on the new page.
MY ROLE: π€ Concepting / βοΈ Sketching / π Wireframing / π¨ UI/UX Design
TOOLS: Sketch / Photoshop / Illustrator / Invision
PLATFORM: Desktop and Mobile
Business Goal: Worked with the creator of the Cessabit app game to design a simple landing page. He provided all the illustrations that he used for the game. Asked to reflect the simplicity of the game, to keep it black and white and based off other users from his other games he wanted the page to feel calm.
After researching and playing the game for a 2 weeks, taking notes and screen shots. I kept the landing page black & white (similar to the game) and used the only color in the game which is the yellow and yellow brown text for the CTAs buttons.
I wanted to spend more time on this landing page but he received approval from the app store early and had to launch the landing page ASAP. He is in the process of designing a new version of the game, for the revised landing page and based on user feedback. I will be incorporating animation and video to the site.
MY ROLE: π€ Concepting / βοΈ Sketching / π Wireframing / π¨ UI/UX Design
TOOLS: Photoshop / Illustrator / Invision
PLATFORM: Desktop and Mobile
Business Goal: Create a custom payroll quote image, incorporate a special offer and include product features for a new SEO landing page. Meeting with team and stakeholders they mentioned they were in the process of designing a new section for our main website that compared all our products and features. But at that time I had no reference point to base the design off of. We picked the top features to showcase based off user data.
I then started with a very simple wireframe (built in Illustrator) of a payroll quote with features. Once I received their approval I incorporated current design system and then photoshopped the new vector image into the iPad screen. I chose building this graphic in Illustrator so if the offer or any features changed, I could go back into the original vector file and update.
In this SEO landing page we did see increased page views and conversions, which led us to build a corresponding digital ad campaigns. One version promoted the special offer the second version promoted the features but both when clicked came to this landing page.
MY ROLE: π€ Concepting / βοΈ Sketching / π¨ UI/UX Design
TOOLS: Photoshop / Illustrator
PLATFORM: Desktop and Mobile
Business Goal: Simple ask updated the design of the of the chat interstitial popup modal into our new system design. Talking with the front end developer team who was in charge of these updates, they mentioned that they modal had too much copy.
I wireframed the new design changed the hierarchy and organized the text into two sections. Once I received their approval, I redesigned the modal a bit more and incorporated the new visual system design, updating the colors and fonts.
MY ROLE: π€ Concepting / βοΈ Sketching / π Wireframing / π¨ UI/UX Design / π€ Prototyping
TOOLS: Photoshop / Illustrator
PLATFORM:Mobile
Business Goal: I was asked to take the desktop form and rebuild them for mobile. Talking to the team we decided to design it as progressive form. They provided data that had examples where users opted out of the form and called instead. Or started to fill out the form and then abandon it completely. The goal was to have users fill the form fields and move away from calling us, but we still needed to keep the phone as an option.
Taking all this information in, I built out wireframes received approval and moved quickly to the design portion. For the mobile progressive form I broke up the form fields, using the first three form field sections and below it, added the option to call. If the user filled out their name, email and company the form would expand, revealing the next three form fields. The call options would be pushed down under the form. This way the user had already filled out half their information and were more likely to finish filling out the rest of the form. To make it easier for the user I moved the error states to the right hand side of the field so the user still could see what needed to be filled out.
Once we launched this, we saw a significant uptick in filled out mobile forms.
MY ROLE: π€ Concepting / βοΈ Sketching / π¨Design / πUX Research
TOOLS: Photoshop / Illustrator / Indesign
PLATFORM: Acrobat PDF
Business Goal: Create a new landing page design system to be used across all business units. When I started at ADP I noticed that all business units created their own landing pages - some used our new branding others used old branding. All the CTA's, icons, illustration, fonts and photography were all inconsistent.
I took 3-4 weeks and reviewed most of their landing pages from each business unit. Talking to corporate branding & web design system team, I put together a simple pdf with the new design system. Breaking down the components of all landing pages; color, fonts, type hierarchy, buttons, icons and imagery. Also provided landing page examples - using the design system correctly and incorrectly. (Uploaded the pdf to out brand center and distributed the link to list of designers from every department.)
Within the year landing pages started to look more consistent.
MY ROLE: π€ Concepting / βοΈ Sketching / π Wireframing / π¨ UI/UX Design
TOOLS: Photoshop / Illustrator
PLATFORM: Desktop and Mobile
Business Goal: Redesign and modernize the SEO landing page. They were seeing a drop off of users on their landing page and wanted to give users new options. The BRD was to update imagery, add video and make it personal.
Built a low fidelity wireframe of the new landing page once approved - I quickly went into pulling new imagery and colors. Trying to make the site more personal, I removed the business stock photo imagery from the hero, I instead used a screenshot of the video interview of the CEO. I darkened the image a bit to make it easier for our users to read the headline and copy. This image would also tie into the video component that was added to the page. I also added CEO testimonial to make it more personal for the user and below added more information that small businesses would need to make an informed decision about the demo.
The landing page saw an increased number of interactions, large amount of video plays and an increase in demo requests.
MY ROLE: π€ Concepting / βοΈ Sketching / π¨ UI/UX Design
TOOLS: Photoshop / Illustrator
PLATFORM: Desktop
Business Goal: I was asked to take a very text heavy disorganized page and redesign it. Originally this page was made up of lists of browsers business names, addresses and phone numbers - that did not line up correctly. All the text would be highlighted in colors to show if their small business was listed, not found or missing information. The major goal was to clearly show where small business did not appear on the web.
I jumped into my sketchbook and quickly reorganized the page. Once I had I good handle on the layout of the page, built a wireframe. At the top of the page I added the amount of location errors the small business had. I then organized all the information into a simple table based design. Instead of having the all the text highlighted in a error color, I added a status tab where the user could find out if their business was listed, not found or missing information.
This new design made it easier for users to see where they had errors. It also made it easier for front end developers to update information in the future if anything changed with the small business status.