This website for a fictional donut store has been created by me as a final project for one of my UX/webdesign classes at University of Nebraska Lincoln. The brief was very simple – to create a full static website, starting with the structure, continuing with design and finishing with code. Above that, I have decided to take the site further by adding responsivity and a customizing component for creating own donuts, using jQuery.
The concept of the site has been created in three steps. After deciding to go with a donut shop site, I designed the basic site structure. Based on that, I drew first wireframes, which I turned into a simple prototype (using InVision). In the last phase, I modified the wireframes based on a feedback from potential users.
The Structure
The main structure has been intentionally designed to be as simple as possible. I have experimented with not including main navigation in the header – and instead using the whole homepage as a set of links to the subsections – the product overview, the “About Us” page and the customisation engine. The only link that was kept in the header is the “Cart” link, as users have told me they expect it in there.
The Wireframes and User Feedback
Based on the structure, I used Sketch to create basic wireframes. After that, I used InVision to come up with a basic prototype, which I asked around ten people to try out. Based on their feedback, a few of the parts were changed.
A website for a donut store calls for being positive and colourful. After a few hours on Dribbble (definitely not procrastinating), I have selected a handful of bright colours that evoke donut glazes. Combined with a sans-serif rounded font, the UI is designed to stand out and to be memorable. For the logo, a slightly different font has been used, combined with wide outlines that evoke donuts.
Similarly to all my websites, thedonut.store is optimised for mobile devices. The whole design has actually been done with mobile in mind, making sure the transition to mobile is as easy as possible. Another important factor was usability – the colours are accessibility checked, all links and buttons in the mobile layout provide enough space around them, and all the images’ sizes were optimised to be as small as possible.
Once the final prototype was done, it was coding time. The site was only supposed to be a static one, meaning that the development didn’t take as much time. The most time consuming was the customisation engine which utilises jQuery to enable the functionality. This section is still only in beta phase though, as it misses more information about in which section of the process the user is, and as it still misses a “startover” button. Once I was done, the whole site has been checked against the W3C HTML and CSS standards, passing the test.
Once the site was coded, it was time to test it and to find all the bugs. It took me roughly three weeks to come up with the whole concept and code.
The biggest takeaway was definitely the jQuery use for the customisation. Even though the final version didn’t take that long to develop, there were several concepts before that didn’t work, making the whole thing a bit more challenging.
