There are two types of people. The first one loves New Year’s resolutions – they establish them and stick to them throughout the year. The second type hates it, probably because they forget about what they committed to even before the Valentine’s Day. We are somewhere in-between. At the beginning of the year we decided to refresh our website’s look & feel. And in the end – we did it! But it took us a few months to let the idea grow in our minds.
There are so many reasons why we decided to redesign Desmart.com, but let’s start from the very beginning.
The Idea
In 2014 we came up with an idea.
Let’s redesign our website!
Simply, one day someone said:
Our website sucks!
Probably after drinking alcohol, which becomes a truth serum. So we decided to remember the thought that our site is not the best. The old page was really so 2010 and because of our area of work we HAVE TO be up to date with the new trends. And that’s how it all begun.
To that date our website looked like this:
Before we even started, we looked through tons of different websites to find some visual inspirations. We also checked our site analytics to see which parts are most viewed. Then we started to create the website architecture.
Less text, more pictures
We decided our new website will use big pictures (because everyone loves pictures!) and micro interactions. We wanted it to be clear, simple yet sophisticated, responsive and sexy!
Thanks to UXPin we used flat design, micro interactions and minimalism to create our website. We decided to give up on a graphic designer because we wanted to save time and avoid misunderstandings. Of course, a designer would give us high-quality graphics, but in this case we wanted to try something different that will not take us whole weeks, and as a result we got the almost perfect product consistent with what we would get from a graphic designer.
We also resigned from using Photoshop, because UXPin is sufficient and it’s a complete tool kit of useful design elements and patterns. We didn’t need the Photoshop to create beautiful graphics for our website.There is a big UXPin library. You can choose from hundreds UI elements in the catalog, over 900 in 23 different libraries. You can find elements that fit general purposes, like text inputs, shapes, loaders, cursors, social widgets, icons as well as more advanced ones.
The backbone – Let’s create frame for our website!
After collecting necessary information and insights we had to decide on what we want and have to show.
First, we wanted to show general info, so that the visitor knows what we do (Software House, Mobile and Web Apps, etc.). We decided to use headlines on the homepage and add some detailed tags to each of them – Laravel, iOS, Android.
We also decided to prepare one site for the team (many people visited this part), one for our projects (it’s hard to show experience better than on successful living projects!) and one for our process (Agile Software Development). There also had to be a contact form and a blog.We gathered it all in one minimalistic menu in the top-right corner. We changed the names so that they all work good together and voila! We got ourselves a nice piece of navigation 🙂
With the UXPin image editor you can prepare a great background. We had a small problem because we needed a sizeable contrast between letters and the background. We needed to see if there won’t be a problem with the visibility of the text on different images. UXPin photo editor helped us. It allows to decrease the contrast / saturation / brightness in the UXPin. Without the use of external tools and continuous import / export of the photos – quickly and painlessly. We checked this using the “Live preview” in UXPin on different devices at the same time to choose the right brightness / contrast of the image.
We wondered for a long time if the website isn’t too simple, because we threw out a lot of content and gave up on the pages that were previously part of our website. However, we decided that our customers mainly want to see our projects, our team and read a few words about how we work. Simple, without unnecessary marketing bullshit.
Why You Need an UI
As mentioned earlier, we decided to make this website from scratch. But instead of building greyish mockups with squares and rectangles we started with pictures, texts and fonts. We added the content we already had and looked for non-stock photos which matched. For example, the magic kettle photo was taken at one of our company’s trips and reflects our feels-like-home atmosphere.
We also used the interaction and micro interactions on mockup from UXPin. There are only a few interactions on our new website and they are prototype, but they are there. This way we could see how it will look on the target page. These are only the details, but details make the design.
We Value Your Feedback!
Before implementing the website we prepared an interactive prototype with all the little details, so that it would be as close to an actual website as possible. Our goal was to check people’s reactions and ask how they felt about it. We got many WOWs and AWESOMEs but also they asked us a few WHEREs and WHYs. With these opinions we could change a few items that actually required amendments. Add and change the missing elements.
Our biggest problem was to accept the kettle on the main page, because we were afraid that people would not understand, or say “WTF is that?”. It turned out we got very positive reactions. Thanks to UXPin’s Live sharing and commenting options, it was easy for us to ask different people for their opinions. It saved us both money and time 🙂
Designing On The TV? Why Not!
Interestingly enough, we designed Desmart’s website using a TV. Yes, THE TV. We used our UX designer’s laptop and the TV as external screen. This way, we could discuss the changes while lifestreaming and patch things up sitting in the same room. We didn’t have to exchange thousands of emails about the fixes or to wait for a patch. We had a lot of fun with designing a website on the TV. Can you imagine? Everyone in our team had the opportunity to share their opinion and suggest changes. The process of creation was easier, faster and more enjoyable and communication was immediate. Of course, only one person had the power to change – the rest, unfortunately, had to compromise.
From a Prototype To a Website
Unfortunately, even the best prototype can’t be used as a website. So, at the end we had to give our prototype to the Webmaster to cut & style. In UXPin you can also create mobile versions and versions for tablets. It is a very good support, because it doesn’t mean you have to do several separate projects, but you need a little more determination to create really cool Responsive Breakpoints.
So our webmaster also added responsive versions and some micro animations which couldn’t be done without a line of code.
Final Effect
We chose UXPin because it is easier to design, faster and more efficient. It can look quite nice, if you have a UX Designer in your team and people who have a sense of aesthetics and know a little bit about design. We are very proud of our website, because we have worked well together and we believe that we have done an excellent job.
