WE THE PEOPLE CONSULTING GROUP
Consultants of the People, for the People, and by the People
Website Design
About WTPCG
Founders Emin Galoostian and Alfred Cisneros started this company as a small business consulting group that aims to help small and local businesses grow. Having done much for the community, they've gained their clients' trust and those who work with them. As their tagline goes: "We are consultants of the people, for the people, and by the people with a vision for a brighter future by growing our communities."
THE CHALLENGE
When I first received their website, many things struck me to be improved. Nothing seemed very set in stone, neither visual layout nor website interaction, which gave me the excellent opportunity to create the design palette for the company and its website starting from the bottom.
From the drawing board to the final design prototype, I redesigned the company's website with a new interface design with the colors the company wanted to use while still maintaining much of its original layout.
TYPOGRAPHY
The company wanted to use Playfair Display as the title font and Source Sans Pro as their body text. To the left is a typography chart I created to help organize the font styling as I designed the new website.
The maximum font size was 72pts for the header text, and the max thickness (Black) was only reserved for the title and heading. Vice versa, the header text's minimum style was font size 36pts.
Source Sans Pro was mainly used for the body text but also at font size 30pt for captions as needed throughout the website. The text overall did not get smaller than the standard 16pt font size.
USER FLOW
Since the website did not have to be complicated, I decided to keep the user flow simple. The purpose is to showcase to potential clients WTPCG's services, team, and give the client a way to contact the business via email, linked to a message box at the bottom of each page.
Every website will have a navigation bar and header that allows for quick navigation between pages and simple navigation that leads back to the home page via the logo if the user wants to get around quickly.
MY APPROACH
For the Research Phase, I looked at what the company wanted to offer on its website by studying the old design given to me. It was clear that as a small startup, the goal was to showcase three pieces of information: their services, their team, and how clients can pay for a project. While keeping these goals in mind, I also looked at other consulting company websites and tried to incorporate a new visual interface for the company.
Research
Design
Mockup
Prototype
DESIGN
With the results from my research in place, it is time to start putting some ideas onto paper. In the Design Phase, I made the design components used in the mockups for all the pages of the prototype website. That included making the color palette, typography, UI components, and searching for icons. I made a mockup version for all desktop, mobile, and tablet interfaces.
COLOR PALETTE
Based on the above layout, the company first gave me the two colors they wanted to incorporate into their branding and company: dark blue and yellow marked "Base" on the color palette to the right. I chose a few shades lighter and darker to add value and variation and added accent colors for the Call to Action buttons or links.
MOCKUP
With all the pieces of my research, design plan, and feedback from the company, it is time to put everything into a cohesive mockup that could potentially become a full website. For the mockup, I worked on the landing page of the website for all common interfaces that people use today (i.e desktops, mobile, tablets). For the purposes of the portfolio, only the desktop is seen, but the same process was repeated for all the other interfaces.
PROTOTYPE
The final prototype of the website turned out to be a refinement of the old website with new colors, typography, and layout. With respect to what the company wanted to have in its original layout, I tried to incorporate that as much as I could in the new website while implementing the new elements that were developed to give the company the professional makeover that they wanted for their site.
UI ELEMENTS & ICONS
User interface elements need to lead the user around the site. I designed several UI components like the Call to Action (CTA) buttons. The chart on the right is intended as a baseline understanding as we proceed with the design.
Finally, the finishing touch to the website -- icons that can help translate the intent of the site's information to users. In addition, they also make the website look more aesthetically appealing and functional.
Key Contributions
Interaction Design
Visual Design
Branding
Research
Tools Used
Figma
Photoshop
Illustrator
Sketch
Duration
April 2022 - Ongoing
(11 months)
My Role
UX Researcher
UX/UI Designer