BLACK PEPPER - WEBSITE REVAMP

DEVELOPMENT / FRONT-END / DESIGN

Redesign and Developing

I was fortunate enough to enjoy some time working with Black Pepper Software as an intern.
Whilst there, I assisted with designing and developing a website for them. I spent my time with them as a UX design intern and began to transition to more of a front-end development role as the project continued.



Introduction



My time with Black Pepper

I worked on a number of projects whilst interning at BlackPepper software and it was a really enlightening and fun experience. Many of these projects were for industry clients and so it helped me to understand the real work-environment of an agency. For more on my time there, check out an article I wrote for them over at their website.
Whilst there, a project I worked on was updating their website. I was initially shown a design that another designer had mocked up and was asked to try to replicate the feel but generate some different designs for different pages.
This was the initial design I was given to base the following work off.

Homepage Designs

What I was handed

Designs

My first task was given to me when I arrived at Black Pepper. I was given a design by one of the designers at Black Pepper and told to make some alternative designs. This is because I could give the designs a fresh pair of eyes. I toyed around with a few ideas, shown by the middle and right images above.

Updated

Since then, the site has been updated again, so there are no live versions of this website to show. I will represent the original as best as I can here in this run-down. The updated homepage for the site is shown below.

Team Page

I also tried to develop some intersting designs for a team-page, which would show off all of the staff members from Black Pepper with small descriptions to humanise them to any clients they'd be working with and introduce them to who they could potentially be hiring.



Blog Page Designs

Blog article-page design

These were my first attempts at applying this sort of thinking by attempting to create a blog-page in the style of the original design I was given. The design of the first attempt was solid, but was a bit inconsistent with the other pages on the site. I began toying around with a few other ideas, adding in new ideas for features like tags.

I think the final design (shown left) was a good combination of many of my ideas, cumulating into a final design article page design.


Example of different types of blog posts

I wanted to attempt to show how different types of content would be displayed in different blogposts. In the example on the left I attempted to show how a piece of code would be portrayed on a blog if they needed to reference something they were discussing or have an example of a piece of code in the post. I imitated the feel of a program called Sublime Text.
For the post on the right I attempted to show how a blog where the main focus was on a video may be shown on the site.

Projects Page

These are some designs I worked on for a page which would show off the companies case-studies from various organisations they've worked with in the past. The idea being that companies who want to hire Black Pepper Software would look at these case-studies with the progress of a project and quotes from clients.



Development

We then moved onto developing the site. The initial development with HTML and CSS went fairly smoothly. I was then introduced to Craft CMS and used it to help setup the ability for members of blackpepper to put up blogs on the site.
I worked with another intern closely and incorporated Git and pair-programming into our workflow. We spent a week working on the front-end side and then moved onto using Craft CMS and Twig to get information from the database.
The process was very iterative and as we developed it would inform how the design turned out and then we'd update the designs and re-develop them.
Unfortunately my 8 weeks of internship ran out before i could see the site to it's full conclusion but I learnt a lot from my time with them.

Final Site

Black Pepper have since updated their website from the one I had assisted them with. The link to their new site is here.
Below there is a video showing what the live site looked like.

-->