The Zorzal team is finally wrapping up all the work we’ve done. Over the past week, Simi and Kai have been hard at work finishing up the prototypes. They have just finished the initial sketch of the customer interface and have discussed it briefly with Chuck. From our conversations, we found out what information he would like to integrate into the interface. By creating an initial prototype/design sketch, we hope that future teams will have a direction for progress when the next iteration of Zorzal starts (even without direct communication with Chuck).
Alice and Kristy have finally fixed all of the bugs they’ve been working on! Now, the web app is fully condensable and mobile-friendly. The “Create Box” glitch has been successfully addressed; the FCCI form under Warehouse no longer shifts to the side; and our checkpoint and action selectors are fully squishable thanks to newly implemented breakpoints! These new breakpoints change the selectors’ width depending on the given screen size, finally allowing for the mobile-friendly web app we have been working towards all quarter. Throughout this process, Alice also began translating some of the coded buttons and labels to Spanish! In order to complete the translation process, we will have to go into the Firebase and translate all of the actions, checkpoints, and forms.
Finally, the entire team got together and chose a new color theme for our web app. We ultimately settled on a chocolate-themed web app, which fits in with the cacao theme as well as Zorzal’s own website much better. Check out the pictures below to see a before-and-after comparison of our web-app!
We had our midterm presentation—it went great! Even though Kai was under the weather, he was still able to Zoom in and join the presentation. The class loved the prototype we made available for them to use in QR code format. Unfortunately, Simi decided to project Kai’s Zoom thumbnail on the big screen without telling Kai. Kai had just woken up from a nap and did not look his best. He was deeply disappointed that no one in the group thought to tell him he was on display in front of the entire class.
Thanks to Alawab, the 3/4 of the Zorzal team was exposed for their very weird behavior
Despite this little mishap, everything went well. At our midterm review, Darcy let the Zorzal group know that she thought our midterm presentation was stellar. She said was thoroughly impressed with our progress, but thought we could do a little better at explaining our team’s background: even though our history makes sense to us, it may need more elucidation for audiences that are new to exactly who Zorzal is and what they do.
We had a meeting on Tuesday in EVGR, hosted by our fluffy team mascot, Rupert, who spent the majority of the meeting inspecting our feet and attempting to get a bite of Simi’s pancakes.
Alice places Rupert on the tabletop, giving him a friendly squeeze after he was reprimanded for sniffing everyone’s feet below the table
Kristy and Alice have identified a bug that they think may be the root cause of the website's peculiar reaction to differing screen dimensions. They're hoping to solve this bug soon, as it may very well be the key to automatically adjusting the Zorzal website layout to any device that accesses it. Simi was able to have a short and brief exchange with Chuck over text which helped refine the prototypes that Simi and Kai will be making for the data analytics/customer interface.
As we move forward through week 7 of 10, the Zorzal team is beginning to make plans to organize all information that may be of use to future Zorzal teams so that there will be a clean hand-off. We found difficulty figuring out where to pick up the previous team’s progress when we first began, so we definitely don’t want the incoming team to go through the same problem.
The Zorzal team, once again, hard at work.
Blog Post 4
This past week, our team focused on preparing for our midterm presentation and re-assessing our plans for the rest of the quarter. Despite that, we were able to make some progress with resizing the app in general. We noticed that the app was relatively responsive and fits well on the screen when we zoom out to approximately 75% of the viewing size. As such, we tried to set the default zoom ratio of the app to about 75%. This has worked really well for us and we’re happy with the results.
However, we did notice that the FCCI forms are mis-aligned to the right-side of the screen. We are currently investigating the root cause of the issue and hoping to resolve this bug soon. We are also trying to restructure the Create-Box page as well to make the fermentation section more responsive.
On Tuesday night, we will also be having a crash course with Austin, who was the previous team lead for the project. We are hoping to learn more about the Firebase database, as well as the overall workflow of the app.
Our team has been preparing for the midterm presentation on Thursday. We have been aggregating and streamlining all of the notes and changes we have made to showcase our work thus far. Kai also made a new prototype that more accurately reflects our goal to modify the web-app, rather than create a new mobile app.
This past week was filled with coding progress for the Zorzal team! After some initial progress last week with the conversion to a vertical layout, Kristy and Alice have become more comfortable with making larger changes to the web app.
As a team, we have also become more comfortable with creating local emulators for Google Firebase and a helpful tool called ngrok, an application that allows us to send our localhost to other devices. Firebase emulators allow us to make initial changes to the database, such as changing checkpoint names to Spanish, and ngrok enables us to share locally hosted web apps during development to different devices. These tools allow us to ensure that 1) our changes to the web app are truly mobile compatible on Android and Apple devices, and 2) our changes to the database do not interfere with the way different pages of our web app are linked together.
As for changing the layout of the app, we have converted most of the other pages to follow a similar vertical structure as the Quick Scan pages.
First, all of our Forms pages have been converted to better fit a phone screen. Previously, some of the labels over-flowed the text entry box. To solve this issue and to prevent a cramped look, we implemented changes that would move each text entry to be below their labels.
For the aggregate page, we implemented similar changes and also rearranged elements to make the page easier to use. We reworded and moved the “Create Lot” button to be below the table. This is because each additional box that is added to the lot is listed in the table below the UID. Moving the “Complete Lot” button below the table 1) prevents misclicking the “Complete Lot” button instead of the “Add to Lot”, and 2) makes more intuitive sense.
Finally, our team moved the Checkpoint Selector sidebar to the top of the page. This was for two reasons. One, Kristy and Alice had hypothesized that the main reason our web app did not fit on a mobile screen was because of this non-collapsible sidebar – most of the pages fit perfectly within phone screens if you scrolled to the right and hid the sidebar. Two, none of our team members knew how to navigate the web app at first glance – we thought that having one vertical Checkpoint Selector, and one horizontal “sub”-action selector was confusing. Ultimately, we turned the Checkpoint Selector into a scrollable tab, made the font larger, and changed the colors of the selected page to better differentiate the two scrollable tabs.
We had our first call with Chuck, our project partner this past week. During the call, we showed him our fireframe for a new application from last quarter, as well as the wireframe of adapting the layout of the existing web app to be more vertical. His priority is to have the best product possible, so he’s very excited about the idea of a mobile application/significantly enhanced user experience for his employees. Unfortunately, coding a mobile application from scratch does not work well with his priority of wanting a working product by the end of this quarter. We decided to allocate some time in our coming meetings to evaluate the possibility of using low-code or no-code solutions again, since an optimal user experience, and is a high priority for him. We also looked at trying to change the code base for the existing web app, to create a benchmark to compare alternative solutions to.
Chuck will also be adding us to a groupchat with some of his employees so that we can communicate directly with them as we work through making changes to the web app.
Coding: Some Progress!
We started playing around with changing the layout of the web app to being more vertical:
We’re going from the images on the left to the images on the right.
We had some success in changing the layout of a small number of buttons and text, although we ran into problems with the Create Box page in the fermentation. We’ve since reached out to the head TA from CS 147, the React coding course on campus, for some help. For this coming week, we’re hoping to figure out how to make this layout change without experiencing the errors we’re seeing, so that we can work to implement these on more of the web app.
Spring Quarter Goals:
This quarter, we’re planning to make changes to the existing code base to change the layout of the website when it’s opened on a mobile phone. We decided to do this last quarter because it provides an adequate level of usability, and it's the easiest to code. You can read more about why these were our top priorities here, in our design proposal from last quarter.
We want to accomplish a working web app that’s sized appropriately for mobile. We also noticed that the website has not been in use since early 2021, and we’d like to restore it to a point where Zorzal employees are excited and incentivized to start using it again.
At the start of the Spring quarter, we got access to the current codebase and firebase account. Kristy found out, upon exploring the codebase, that altering the menus by separating them into different pages might be complex. It would be great from a UI perspective, but might be difficult for us to code as the navigational menu is hard coded. Alice and Kristy have been working out how to navigate how the codebase interacts with the database in Google Firebase. Once they have clarified this step, they aim to restructure the navigation bar to interact with the checkpoints stored in Google Firebase. This way, the checkpoint selector menu will be collapsible and more mobile-friendly. This reflects on discussions from a previous partner meeting with Taylor, a TA in the CS department, who mentioned how the current Search, Record navigation was unnecessary.
Simi and Kai are getting set up for user interviews and interactions. We’ve connected with one of our classmates who speaks Spanish, who will help us translate all our synchronous interviews. We’ll also be adding her to the group chat with Zorzal employees once we get access to it. Simi and Kai have begun working on a new Figma prototype for our new technical direction, which is to readjust and reallocate instead of revamp. As Simi and Kai think of new ideas, Alice and Kristy delve into the code and scope out the feasibility of the proposed design adjustments. We look forward to meeting with Chuck for the first time!
The Zorzal team hard at work!