top of page

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." 

After contracting with a small startup called We the People Consulting Group (WTPCG), one of my first assignments was redesigning their business website to provide a more professional look. After taking inspiration from similar consulting sites, I expanded their color palette and designed a new layout for their website without disrupting too much of their original navigation.

WE THE PEOPLE CONSULTING GROUP

Website Design

Consultants of the People, for the People, and by the People

Role - UX Design, Interaction, Visual
Duration - 4 months

Tools: Figma, Adobe Photoshop, Illustrator

Client - WTPCG (site still under construction)

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

Research

Design

Mockup

Prototype

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.

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.

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.

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.

bottom of page