The Process: Research, content collection, wireframes, mockups, HTML/CSS, usability testing, analysis, and presentation. 

Tools Used: Adobe XD, Photoshop, Google Slides/ Docs/ Sheets, Zoom, Sublime Txt

Team Members: Research/ Content Team: Michelle Jiang, Matthew Welter, William Fehmi. Testing Partner: Logan Fralich

Research began with a website discovery questionnaire that was filled out by the content team. It included company details, website goals and objectives, target audience, design, competitor information, timeline, and constraints. The research questionnaire results can be found here.

Our next step was to collect the content for the site. We (the content team) received many images from the stakeholder, but also had to find some for products she didn't currently have. Kelsey is also a photographer, so we loved getting her images and loved getting to match her style in the images we found. Prices for some things were given to us, but not all products. We also had to come up with the descriptions. Kelsey did provide us with her story. I knew the images would play a bigger role in my design so it was good to have short descriptions for the products. 

Above are my wireframes I created with paper and pencil. I do enjoy getting in that first rough draft on paper, it has a different feel and process for me than digital. It seems to bring out more creativity for me. 

I knew with mobile, it would be best to display the product images in a single line to make sure they were more of the focal point. I also wanted to make sure everything stayed consistent so the user would get the same experience on all devices. Another thought was to create the products into cards and display more columns of the products on the bigger sized devices. Besides making sure the images were the highlights, I also wanted to keep the design simple and easy to navigate. I love the implementation of the phone icon on mobile to give users easy access to contact Kelsey (Bakehouse 405).  

Now came time for the mockups. I decided to use Adobe Xd because I am familiar with it, and I think it is an amazing tool. PLUS! I get to do a little extra to get it working into a prototype. Being able to interact with the site is way more fun, even as a designer. I created a mockup/ prototype for each device and became familiar with components and it is an AMAZING feature of Xd! It allows you to have a master component and if it is changed on the master, all of the rest used throughout the design get changed/ updated as well. Saves so much time. 

The different Xd device prototypes can be found below...

Mobile    Tablet     Desktop

Next step was to start coding the site with HTML and CSS. I used Sublime Txt editor and spent a lot of time in chrome inspect. I completed many LinkedIn leaning courses on responsive web design. I learned a lot about flexbox and grid, and ended up using grid for many of my pages. I love grid. Yay for no more floats! My biggest hardships with the code revolved around the header at first. It took me a while to get everything aligned and in the right spot. The product pages was also were I spent a lot of time. Took me a while to figure out how to add space on the bottom of the product cards so they all could be aligned with the right spacing as well as responsive throughout each device and transition. I also had to learn to code with less divs to become more semantic. 

The final responsive website can be found here.

For User testing, 

a grocery cart option was created for the site to test potential buying experiences for future development. We created a script with 1 scenario and 3 tasks for the users to complete. The scenario focused on getting insights on an entire experience from start to finish of ordering products and completing a checkout. We also created a pre-test and post test questionnaire to get more insights on the type of users we tested. We also gained information about what types of products the users expect to see on a bakery app and which items they currently purchase to enhance the current site. 

We performed remote moderated usability tests with 4 participants via Zoom. We utilized the chat feature in Zoom to help share the scenario and tasks to the user as well as recorded each session to be able to go back and review things we might have missed.  

Below is the prototype for the shopping cart feature, which was used in the testing. Only certain features were added around the tasks given for this testing. For future testing, we would recommend finishing the design of the app. 

Qualitative and quantitative data was collected and analyzed to create a deck for presentation to the stakeholders of the results and recommendations. Google sheets was used to create graphs and store the data. Google slides was used to create the deck, which is available here.