workflow A workflow consists of an orchestrated and repeatable pattern of business activity enabled by the systematic organization of resources into processes that transform materials, provide services, or process information.
32 路 workflow 2
the project
Jan Jørgensen webshop Jan Jørgensen is a high end jewellery brand founded in Denmark. Every single jewellery in the collection is designed and produced by hand in Denmark. The goal with the project was to finally make an online flagship store to be proud of. www.janjorgensensmykker.dk
workflow · 23
this is serious business, I am not kidding This is one of the biggest, if not the biggest project that I have ever worked with. This project has demanded me to really think the workflows very carefully in order to succeed. It has gone all the way from idea to design, to re evaluating and coding both front and backend. It has involved not only the webshop but the entire branding and internal workflow of the company. This was a truly complex matter and has
been in the making for almost 2 years. The main goal was essentially to redesign the main webshop of the Jan J酶rgensen Jewellery brand. This has been attempted several times by different web agencies but without luck. The exclusive design and style in the company has never been truly transferred to the webshop. So the big goal was to finally make a true online flagship store that could carry the brand with manner.
concept dev.
UI design
UX dev.
frontend coding
backend coding
what is the core value?
how dos it look?
how dos it feel?
make the feeling and design become real
make the shop work
This is a very simplified version of the workflow that this project is build upon. Starting by defining what the flagship store is all about, to designing, coding, and ending by releasing the new version. I am so lucky to be the son of the founder so I already had a pretty solid understanding of the vision now that I am basically raised in it. That is also why I might succeed now that everyone else has failed.
24 路 workflow
UI & UX cleanup
finnishing up and tweaking
After we had the vision and idea ready, we went on designing for months trying to find the perfect design that would fit. After endless hours we finally decided a version build on a 45 degree grid system that we had also developed. Afterwards we started implementing the design in code and ensured that the user experience was just as good as the design itself. So the UX dev. and frontend part is very much connected. But let's have a look in more detail.
enough about visions, let's get technical In this project there are several workflows, and a lot of them are connected and tangled in each other. On the page before I talked a little bit about the overall workflow for this project, but beneath it all there is also a lot of technical workflows that we need to understand and follow as both graphic designers and coders. First we need to consider where this is going to be used in order to take the right choices on making the design. This is obviously for the web and as we know bitmaps still rule the web, although we see more and more vector like SVG and CSS3 based graphics. But our design was very complex and heavily graphic based so there is no way of escaping the bitmaps. With that in mind I started off in Photoshop on a 960 template as usual. But not a normal 960 template, I doubled the size to 1920px to make all my graphical elements ready to high resolution displays like the retina displays found in most iOS devices and MacBooks. Remember this is a high end jewellery brand that is supposed to be considered state of the art. This of cause requires everything to be sharp and clear, also the bitmap graphics.
Now let's talk a bit about responsive design. When we designed every颅 thing Google had not yet announced their new algorithm that favours mobile friendly designs, and considering the huge amount of extra work needed in order to make the site responsive we decided to ditch it. After all we believed that very few people would buy expensive jewellery for thousands on their mobile phone, so we decided to focus on the desktop and tablets. The target group is simply not there yet. However this might not be the very best decision looking backwards, especially after Google decided to change the picture. But back to the bitmaps! I've used one big PSD in order to see everything together, that said if I started today I would have used the new artboard function recently introduced in Photoshop CC 2015. Now, the design process in Photoshop is an entire workflow in itself, all the way from organizing and naming the layers, to using non destructive editing and smart objects, to finally slicing and saving the graphic elements and make them ready to use in our HTML. But that is simply too much for this book. Now, let's get coding! workflow 路 25
code is beautiful Let's take a deep breath! I always feel very excited in the very moment I am about to start coding something entirely new. It might sound a bit crazy, but knowing that this empty text file has endless possibilities is just an amazing feeling and I love it. But let's get to it. This was actually not a task that I was supposed to do originally, but it turned out that the guy working in the agency that was supposed to implement this brand new design quit just before we had everything ready. He was also their lead engineer in the technology that powered the system behind the webshop, so the agency had to stop all new development for all customers until a new engineer was found. But it's not easy to find software engineers, so with an unknown deadline we discussed the possibility about me doing all the frontend-coding, and then when a new engineer was hopefully on board he could connect my code with the backend. In that way we where able continue the project with less delay, so we did. The best way to do this was to start from scratch and I simply started building everything with HTML/CSS/JS and PHP, knowing that everything had to be code refracted in XLS to be compatible with their CMS later on.
26 · workflow
During this coding process I used GIT to manage version control, and pushed everything to GitHub to keep my code accessible and easy to cooperate with later on. I talked to GIT using the UNIX bash shell. Regarding the frontend technology, I’ve used HTML5 along with all its tags to ensure better search engine optimization (SEO). CSS3 is used as much as it's compilable with most common browsers. I always prefer CSS before JS which is also good practice, but some JS was necessary in the top menu, and in a script that I wrote to show if the live chat is online or offline. PHP was only used to simple includes. Everything is of cause well tested across a variety of devices and webbrowsers to ensure a good quality everywhere.
var result = "approved"; After the frontend code was ready I actually tried to implement it with the backend myself, but there was simply too many black boxes, limited access and no documentation at all, so I had to pass it to the new engineer who implemented the rest of the code with the XLS templates which is today running with the CMS. The implementation process was quite hard because of the system complexity. To give one example some of the prices in the webshop is dynamically changing every minute, checking for the current stock price on gold. This gold price that is also combined with the regular price is at the same time without VAT because of it's raw value making itself a currency. Now think of this in a jewellery that comes in a variety of different variants with different surfaces, diamonds, materials and qualities. All of the variants have images of that specific variant including a 360 degree image, and a dynamically changing description. So a bunch of things could go wrong in this process, and it did! But in the end everything was fixed, and the vision of the flagship store was finally achieved thanks to great patience and endless hours of hard work.
workflow 路 27