OVERVIEW
Making use of a site analysis process, I had to conduct a feasibility study and a detailed needs analysis that culminated in a site design proposal.
-
Study the use of web design patterns and personas to help determine use cases that will help guide site design
-
Create storyboard mockups of scenarios based on those use cases to illustrate their intended navigational elements and interactions
-
Learn to design with an understanding of web analytics to improve the user experience of their designs
-
Identify areas for further improvement and make those updates
RESEARCH
This is a new client who is opening up a bakery in Burlington, VT and they need a website designed.
I created a general screening form that was given to the client to help me understand what they are looking for in their website.
Next step included researching patterns that I wanted to add in my design. A few patterns I planned on using and felt were important to my design was navigation, account icon, cart icon, grid layout, gallery and a footer.
PERSONAS
Thinking about who would be interested to visit a new bakery's website, I put together four personas. Each having a distinct goal for visiting my client's website.
USE CASE
I created a use case for three of the four personas. I took each use case and broke it down to what the use case was, who the persona was and the basic flow to achieve their goal. I chose to focus on "The Health Conscious", "The 'Little Bit of Everything'" and "The Social Media Foodie".
The common use case, for these three personas, was that the users want to see information, nutritional facts and images of the products.
Wireframes / Storyboards
I created a storyboard that walked through each use case with each frame of the storyboard as a task towards each users goal.
Each wireframe showed a different step to help accomplish each goal.
SITE MOCKUPS
Once I had the wireframes created, I chose one specific use case to focus on and designed a site mockup. Below are four screens showing how this user wanted to view organic only products. I also chose to design the mobile version of each screen.
FINAL MOCKUPS
Based on feedback I updated my storyboards and created my final website design that will be shared with my clients.
