Productive Shop Redesign | Jason Fernandes

Insight:

The productive shop website is in dire need of a redesign. The old website had received feedback of not matching the companies business and the goals it intents to pursue. The company wss trying to reflect its brand value and the client it caters to on its new website as well as update the user experience and design in order to reflect these values and promote their business.

Solution:

The management decided to give a fresh spin to the website's redesign as well as the brand from scratch, including the brand guide, its website and collateral. We set out to create a website that makes it easier for potential clients to find their business needs while introducing visual aesthetics and provide depth and insight into what services they provide by adding visuals, animations and modern design standards.

Challenges

With a short timeline of just 4 months, while dabbling with other client's designs, we had to create a website that would be engaging to the users and interactive while at the same time segregate vast sections into a fluid experience that does not feel text heavy.

Initial stage

We decided to scrap the entire design style and branding for the new website. In order to better understand the type of clients Productive Shop catered to, I interviewed the Project Managers, CEO and COO to get a sense of who the existing clients were and the clients they usually pitch to for projects.

Some of the issues we found with the exisiting site were:

Website design did not match companies target audience, more playful colours and cartoonish 3D illustrations rather than a serious B2B agency vibe.
Each service page was content heavy and had repetitive layout for sections
Drop shadow usage which is not part of the design system
Navigation menu was confusing to clients
Design system was missing - buttons, fonts were of varying sizes

Planning phase

After receiving feedback and understanding the client base, we moved onto wire framing the homepage. I teamed up with Julia, the other UI/UX designer in the team. We started designing the hero section since it was the first thing the user would notice. The other challenge was to figure out how to consolidate all the necessary copy without making the website feel lengthy and disengaging to the user. After numerous inspirations, researching and experimenting we came up with this final wireframe.
Outcome from the planning and strategy phase:

Competitve audit- Some of the competitors websites we researched included Mckinley & Co., Brand&Mortar, New York Agency, among others.
Several iterations of designs and wireframes
Gain and pain points from the old website and competitors
Potential opportunities to introduce interaction and UI animation into the website.

Branding the website

Once we had the wire framing and basic structure of the website planned, we started working on the brand style for it. We created the logo representing the "idea bulb" concept and along with Julia, I worked on choosing the right colours and fonts as well the type of illustrations, images and animations we would be creating for Productive Shop. With a strong understanding of the kind of clients and potential clients and the values of the company, we created the branding.

Information Architecture

We reworked on the entire site's Information Architecture, from the tests we conducted and our interviews we found out that users often would get lost in the navigation of the website. We streamlined it into categories - Solutions: This included specific case studies and solutions for potential clients, Expertise: This section consisted of all the services offered. Resources section is something that was introduced after feedback from SEO teams, in order to boost prescence on search engines and Company section where users, potential clients and potential employees could learn more about the company.

Final design

After numerous iterations considering all the UI and UX factors, we reached this final iteration of the design. Using the wireframes and the initial brand system, we injected it using figma.
During this stage, we also collaborated with the copywriting team in order to optimize the copy to the design and how we could showcase the services in the headline with the animated concept I came up with.
We created illustrations based on each service the company provided. These were created in Illustrator and then imported and adjusted into the figma file.
The final design was then put together and I created a prototype to present to the stakeholders, c-level execs, developers as well as conduct an internal user testing to solve any remaining pain points that might have been missed.

Once it was approved, we started working on the internal pages, the animations and interactions on the website.

Final design mockup (Scrollable)

Visual journey of the website's design

Here's some of the mockups/prototypes we tested out with variations for headers and other sections on the homepage. The design progressed from feedback from stakeholders and user testing sessions. While they did not make the cut for the homepage, some of the designs for sections were utilized and worked better for the internal pages.

Design system & components

After the homepage was designed, I took the elements and created a design system in addition to updating the brand guide to maintain consistency for designers and developers before we started designing the internal pages.
Some of the components I created were:

Buttons - Primary, Secondary & Links
Font sizes for H1, H2, H3 & body copy
Repeated components for various section on the website
UI cards for service sections
Blog thumbnail backgrounds for different topics

(Scroll to view)

Internal page designs

The website consisted of Services, Solutions. Each section of these required certain amount of pages. In order to ensure they were consistent with their sections, we designed two templates that would work. We created templates that would help sell the services we provide by creating an engaging design backed up by some great copy and coding.

Solutions pages layout

Expertise pages layout

UI animations & Illustrations

We created animations for each of the service and solutions pages. Each illustration has a style that resonates with the brand identity of Productive Shop. Here are some of them that I created. They were designed in Adobe Illustrator with guidelines on the stroke thickness and other elements represented on the website (dots and lines) and in order to ensure they were not heavy for the website we used a software called Svgator to animate these illustrations and exported them in .js format.

Web Design & Branding

Enterprise SEO

Uncover SEO

About Productive Shop

Web Development

Web Maintainance

What was the outcome?

Website Launch:

After completed these designs, we collaborated with the developers and QA teams to successfully launch the website as well as squashed any bugs after launch.

Business Perspective:

The company generated more page visits and also were able to onboard three new clients as a direct result of the strategy, design and development efforts.

What I would do next time

While we tested the website using Analytics, A/B testing and heat mapping, I would have liked to have conducted user testing before and after the redesign in order to understand