Flagship Website
ShopSpero
Creating a flagship website that can provide a glimpse into the culture and products of ShopSpero.
Apparel companies need a few things to operate. Merchandise to sell, a team to work, and a platform to sell.
As a small, local apparel company that sells both originally-designed products and hand-chosen thrifted clothing, ShopSpero found early success selling on UC Berkeley’s campus. As the company grew in popularity and social media engagement, we began receiving inquiries if we shipped products or had an online platform. This grew from a handful of requests to a genuine need.
How could we create a platform that authentically reflected the identity of ShopSpero & provide an online retail experience?
As the head of the web development team and a product designer, I wore many hats in the process of building this platform. I acted as Product Designer, Front End Web Developer, & Team Leader.
I collaborated with a small intimate team of cross-functional designers and developers to quickly develop this flagship website.
My Role
Competitive Analysis
Personas, Early Ideation
Interaction Design and Content Strategy
Roadmapping and Product/Project Management
End-to-End Design: Wireframing, Prototyping, Developing
What I Did
Ideation & Initial Concepts
Originally being the head of the web development team, I first worked on building a Notion system that would aid in project management and organization. In terms of work flow, I organized it into a 2 week-sprint system, and scheduled weekly meetings with the web team, as well as one for me and the design team lead. From there, I coordinated with the design lead to finalized the branding guide so that all assets, such as marketing, social media, and website, could all be cohesive. The branding guide can be found here.
As the web team, consisting of James Shin, Carly Feng, Christie Lum, and me, began work on the website, I, acting as the UX designer, created the basic wireframe on Figma, including the home, contact, about, and staff pages. I worried mainly about user flow and brand cohesive. The most important things were to keep the color scheme and general feel the same, so we could move elements around slightly to make it easier on us as we worked on the code structure. While our main color was a light brown/cream, we were given a collection of possible accent colors, as seen in this wireframe.
Considering Mobile
At the same time, I worked on creating a mobile wireframe to match the visual aesthetic of this design iteration, and so I focused on minimizing the copy, converting the design to a more mobile friendly layout to accommodate touchscreen. As such, everything is much more vertically oriented, and I also designed a collapsible navigation bar to make the mobile site easier to use.
Feedback & Iteration
After gathering feedback from James and the design team, I began work on the second iteration of the wireframe, focusing more on the layout, typography, images, and overall atmosphere. After gathering feedback from the Shop Spero team, they felt that the website should be minimalistic and plain, so that our products and pictures would stand out more. With that as my inspiration, the second wireframe refined the color palette to be the cream and olive green, kept the layout very plain, and relied on our images and text as the main accent/highlight. In addition, I began work on the original designs page, where I designed a drop down system to showcase each of Shop Spero’s original design products. With this iteration of the wireframe, I wanted to focus on the minimalism and letting the content itself drive the user’s eye, allowing for easy and intuitive navigation/user flow.
Final Designs
At this point, the team felt that it was time to start incorporating user interviews, a survey, and feedback into our design, and we found that the layout, while easy to use, felt plain and lazy to some. In addition, we found that because of the site’s poor reception from user testing, they were less willing to purchase our products. Because of this, we began a third, and final iteration of the site’s design, which focused on maintaining the brand’s chique identity, while adding some more flavor and visual stimulation to improve user reception. To do this, I was inspired by our grassroots, from-the-ground-up company founding, and decided to play with the paint stroke motif, to symbolize how even the simplest first steps can make impactful contributions. The design lead and I were able to design a background and footer with this paint stroke motif that doesn’t distract from the main content while adding more visual stimulation to the page to make it more exciting. The home page itself pulls direct inspiration from the brand guide, and the design page pulls inspiration from instagram to better display the products we sell.The site layout itself remains simplistic, but more interactive to engage better with the user.
Alongside this final iteration of the site design, I also design the wireframes of the mobile site to be responsive as well. It adopts the same paint stroke background and footer from the desktop site, but the content and layout is adjusted to better suit touch screen devices (swipe functionality). This mobile design relies more heavily on pop up banners to showcase more information so that the landing screens stay clean, concise, and easy to navigate.
Implementation & Development
Also being apart of the Web Development Team, I also contributed to the front end web development of the site. Using GitHub in order to work remotely while collaborating, we utilized HTML, CSS, and JavaScript, relying heavily on the React library to build the site.
We worked first on shared components that would be shared on every screen, such as the navigation bar, logo, and footer, as well as more complex components that we decided to put in their own file, such as our design carousel. After, we began work on each of the individual pages, where I was responsible for the about page. Since my work was more simple, I began helping Christie with implementing the designs page and James with researching the Stride API we wanted to use for the shop page. The shop page itself is still in development and we are using our Etsy as a substitute shop page. You view the current site here at shopspero.org.