Case Study | HYSB Consulting
Mobile-Responsive Consulting Site
Challenge
To redesign a mobile & web-responsive consulting site
Focus
Condensing information in a more digestible format
Simplify design
Mobile & Desktop Screens
The site is no longer live but I did have fun putting my design to life!
Role & Tools Used
Web Designer
Squarespace; Basic HTML & CSS
Figma
Figma Prototype
Condensing the Info
Figma File Video Walkthrough
Why did I pursue this project?
My friend sent me his consulting website he made on a whim. The main thing that stood out to me was the overwhelming walls of text. I offered to help redesign the site and even build it in Squarespace. This ended up taking about two week from design to bringing the design to life in Squarespace.
Goal #1 Condensing the Info
Condense the blocks of text to more readable chunks and sections
Inform the reader while making visually appealing experience
Reduce the number of pages to just a single page with anchor links to each relevant section
Mobile Friendly Conversion
Mobile Figma Design
Putting Design to Development
Figma Prototypes
Implementation Takeaways
Implemented basic HTML and CSS skills to get close to implementing what my Figma design looked like
Played around with spacing and stacking to get the right mobile layout in Squarespace
Researched a lot of different methods to achieve the
Work Session 1
Work Session 2
Work Session 3
Work Session 4
Key Takeaways
Lessons Learned
Client feedback is invaluable
I made it a point to make sure I was getting feedback on the design direction to make sure I was aligned with the vision of my client. I also gathered feedback after finishing development in Squarespace to catch any minor issues to update.Simple is best
It is take some time to see how I could condense the information in a way that could still have the information needed but also be visually appealing.