This project was a redesign of a website for selling cakes. The exclusive purpose of this design was to sell hand-baked, delicious and tempting cakes and help the home-based business to grow and make the profit. The above image is the introduction of Ele.
As a part of a three designer team, we spent most of the time creating wireframes and mockups. For wireframes, the design team decided to use Balsamic. Balsamic is a graphical tool to sketch out user interfaces for web-design for different UI platforms. We did not have to spend much time on gathering the information because the client gave all the relevant information. Since it is a redesign of a website, my team's major focus was on wireframes and mockups. We wanted to have prepared at least three rough designs so that the client would be able to choose. In the starting, the time was a challenge to complete this task, but once the team got into the rhythm, everything worked out smoothly, and we were successful to present three drafts to the client. The next challenge was to choose a platform to work with for this design. My team had a couple of options, like Dreamweaver, Text Wrangler, Emacs, Text mate, Firebug and so on, available to choose. After considering all the options, my team decided to work with Dreamweaver and Text Wrangler. On the home page of the website, the client requested to place this picture because this was her first ever created professional cake for her bakery.
The relevant information, which was provided by the client, included the required details like content, pictures, videos, color-scheme, text-type, font-size, font-color and links. For the web design, designers have the option to work with digital wireframes or make sketches to illustrate the design to the client. For this redesign, we decided to go with the digital wireframes because it would save us a lot of our valuable time, which in fact it did. In the digital wireframes, a computer will help to create a digital layout of the design that a designer is working on by providing a graphical tool to sketch. All the cakes created by the client have distributed into different categories. These groups placed on the home page. When the customers put the cursor on one of these categories, the HTML tag hovers the name of that group just like in the above image.
Once we had all the required and approved wireframes, we started working on the coding part of the website. The team decided to gather all the required pictures from client's social-networking sites and work on with HTML and CSS for the images page. The other members of the team worked on the other pages for content placement, Jquery, Font selection. The Cakes page had all the cakes created by the client and placed according to their purposes. For example, the birthday cakes are put in the birthday category, and wedding cakes placed under weddings category.
We made an e-commerce website so that the client can launch it and use it for selling her variety of hand-baked cakes. Team's primary focus was to pay close attention to the design elements like scalability, readability, whitespaces, and content placement. For beta testing, we presented this project in class. We did not have time for customer personas, where a designer introduces the design to a targeted audience. The About page also has a column about pricing. If customers want to know about pricing or have other questions, they can fill a form exactly like the one in the image below. This form connected to client's email through HTML code. Once a customer fills out the required areas in the form, they can press the send button, and it is going forward to Ele's email.
Since it was a low-cost redesign of a website for family business, the client did not want to spend money on domain name or web hosting. It was client's decision that she wanted to have an e-commerce website for near-future use. Get in Touch page has marked Ele's location with her trademark logo. This page can zoom in or zoom out with the functions available on the bottom right side of the maps.
