Creating an online presence for one of Seattle's hidden gems.
Worked with a three person team to design and build a website for Tacos Chukis, a small Mexican taqueria in Seattle, WA. This project included an Information Architecture, Content Analysis, Visual Design study and final Protosite.The site is live at Chukisseattle.com.
Motivation & Goal:
As part of our HCDE 437: Web Design and Web Publishing class we were required to contact a local Seattle Company and ask if we could work with them to create a website. We reached out to Tacos Chukis and the owner Roberto 'Beto' Salmeron about creating a website for his business. He agreed to work with us to design the online identity he wanted.
Motivation: As a small business owner Beto does not have the resources or time to dedicate to building a website. However he wants his business to be online so that he can continue to market and grow the Chukis brand.
Goal: To create a cohesive & responsive online presence that communicates Tacos Chukis identity.
Client & User Needs:
We conducted an interview with Beto to outline his needs as the client and figure out what content we would need from him. We used this information to determine what needs our users would have.
Client Needs:
• Clearly communicate information such as address, phone number, hours
• Must be responsive (work on mobile and tablet screens as well as desktops)
• Link to online social media accounts
• Give visitors a 'feel' for Tacos Chukis brand
• Include information about Chukis plan to go into catering
User Needs:
• Easily locate restaurent information
• Menu
• Find reviews
From these needs we derived functional requirements and a communication strategy that we would use for the website. These needs were later approved by Beto.
Information Architecture:
The next step was to develop an information architecture for the website, which required creating a hierarchical categorization scheme for site content. The requirements of the IA were:
• Content Audit: analyzed and evaluated every piece of content our client had and what he was missing, we had to conduct this audit from both a top-down (client) perspective and a bottom-up (audience) perspective
• Information Architecture diagram: visual representation of sites structure
Our simple IA
Partial screenshot of content audit.
Content Layout (Wireframes):
Our next step was to complete a set of wireframes for the various pages of our website. We used these wireframes not to show design but to show:
• Site navigation
• Copy Layout
• Header and footer documentation
• Graphic allocation
• Functionality
We started with sketches and then increased fidelity by creating our wireframes in Axure. We had to wireframe for desktop, tablet, and phone resolutions.
Initial sketch of 'About Us' page.
Wireframe of homepage for desktop.
Visual Design Studies:
Next we developed there possible visual designs we wanted for our website.The goal was to determine which combination of typography, color scheme, and imagery treatments would create the best visual aesthetic for our website.
We ultimately chose the visual design whose typography best matched the Chukis logo, and whose color scheme communicated the 'feel' of the Chukis brand. Our selection was approved by the client.
Different visual design options for the final site.
Final Protosite:
After determining our final visual design direction we began developing the website to HTML & CSS standards, ensuring that it was resposive and displayed well on desktops, tablets, and phones. Our client loved the final product and bought a domain name so he could host it.
Below are screenshots for two of the final pages:
Final homepage.
Final 'Our Story' page.
Takeaways:
This project was a great opportunity to work with a real world client and learn how the HCD process could be applied to a website. I learned how to:
• Communicate with clients in order to meet their needs
• Perform an IA and content audit
• Apply different visual designs to communicate brand personality
• Create high fidelity mockups in Axure
• Fully ideate, design, and develop a project from start to finish.
Complete Documentation:
To see complete documentation of this project, including PDF copies of all milestones please follow the link:
Client staging area: http://tinyurl.com/oxrfn58
