The creation of a responsive interface and explicit information architecture for a company website was the main goal of this project. Building on my first individual project in this course - Web Design and Development, my teammate Jin Lin Li and I completed a fully functional responsive version of the Starbucks Reserve site. We attempted to comply with the atomic design principle and create consistency throughout our site to effectively communicate to the young customers. My contribution to this project included defining brand identity and target users, prototyping, building interactive elements and responsiveness for the pages.
The planning included a responsive style guide that aligned with the brand identity and the spectrum of the physical stores of Starbucks Reserve.
This website was optimized to give a sense of modernness, simplicity and pleasure. The use of dark background was intended to grab young customers’ attention and stand out the colourful products. To evoke and connect users’ physical in-store experience towards their digital experience, I used the same colours of those in the physical stores and products. The ultimate goal was to convey a strong brand identity and provide unified customer services to most of the Starbucks Reserve’s online users.
In order to translate this goal into the website, I adopted colours on the Starbucks Reward Card in my first project and modified them in this project. Concerning the readability, I increased the colour contrast for users with achromatopsia (a colour blindness condition characterized by a partial or total absence of colour vision). Since people with complete achromatopsia cannot perceive any colours that they can see only black, white, and shades of gray, the contrast of black and white was important in this website. Thus, I used an online colorblind web page filter to generate and compare the results, this could minimize the visual error and misinformation that due to the colour performance of the website.
The most challenging part in this project was the advanced communication on GitKraken and Github. Since it was our first time using Git, our team had put a lot of effort to figure out what it is. We also spent the time to tackle the duplication problem when staging the files. Role division and time management were essential when using Git, we worked on different parts and on different days to avoid jamming and confusion. This also reduced the conflicts of design decisions that we may potentially make.
The learning and usage of Git was the most significant part for me in this project. Though it was confusing and hard to master at the beginning, Git provided many conveniences for our team project that we could work individually and effectively. Without any time constraint, Git was a great platform for the success of our website. Furthermore, this project had overcome my fear of coding and had raised my interest and confidence in web development. I thought that coding was terrifically difficult, yet this project had brought me a new insight in coding for web development. I will further develop my coding skills to fit myself into the digital design industry.