This has been my largest project to-date. I lead project scope creation, researched competitors and compiled existing user data, created wireframes & prototypes, and assisted in coding the final store (almost ready for launch).
Skills used: Figma (Figjam boards, slides, wireframes & mockups), HTML, Tailwind CSS, Daisy UI
Project Scope
In this project, I had seen a history of falling through on large projects within my team. So I took lead on this project, and I implemented a detailed scope document outlining what project success looked like for this store redesign. This unified all three teams involved to know exactly what the outcome of this project would be and what each team was responsible for completing.
This 19 page document included a project summary, company mission, scope of work with details for each team, out of scope items, project phases and phase details, and finally a team lead listing with sign off from each department head.
User Research & Guide
To help fellow web designer and other team members make informed, data-based decisions, I created a detailed Store User Experience Audit presentation & guide. This guide consisted of data from Google Analytics, Microsoft Clarity, and any existing UX Audit information related to the shopping experience. With quick accessibility to store information, my teams could see data-driven reasoning for the design choices on updated store pages.
Wireframes
I took a mobile first approach since 87% of users are operating our store on mobile devices. I created wireframes on an 8px grid to most closely align with daisy UI and Tailwind css classes for mobile, desktop and tablet. This saved a lot of time at the mockup stage with implementing final designs.
Mockups
After developer team, content team, and stakeholder approval on the direction of the wireframes, I created high-fidelity mockups with real-world content for mobile and desktop devices. These mockups uses a newly implemented design system created in Figma. I set up the Daisy UI design system to integrate with company branding guidelines. I created a component library specific to the store that could be utilized in outside design documents.
Tech Stack Update
Our wonderful developer team worked hard to implement a brand new tech stack that we foresee using to update the rest of the site using HTMX, Alpine JS, Django Cotton, Tailwind CSS, Daisy UI and HTML. I am currently teaming up with the lead developer to bring my mockups to life writing the body content using HTML, Daisy UI & Tailwind. We plan to user-test internally after the deploy to the dev environment.