Client
Sanspareils Greenlands (SG)
About the Project

The project involves migrating the website "shop.teamsg.in" from WordPress WooCommerce to a custom Shopify. The website will incorporate categories such as Best Sellers, Just In, Top Picks, and Fresh Drops, alongside full e-commerce functionality and a dedicated store location section.

My Role
  • Research and Analysis
  • Wireframing & Prototyping
  • UI Style Guide Creation
  • UI Design Creation
  • Transition & asset transfer
Timeline
1. Requirements Gathering Session 4 Day
2. Research & Analysis 5 Days
3. Wireframe & Prototyping 07 days
4. UI Design Creation 10 Days
5. Web Development 20 Days
6. User Testing 04 Days
7. Client Training 03 Days
Launch Date Aug 2022
1. Requirements gathering session

The client's main requirement was to migrate the website "shop.teamsg.in" from WordPress WooCommerce to a custom Shopify. They emphasized the importance of having the logo prominently displayed in the header for both mobile and desktop views. Additionally, they requested exclusive hero banners to showcase offers and brand-related items. The website should include categories like Best Sellers, Just In, Top Picks, and Fresh Drops, along with full e-commerce features and a store location section.

2. Research & Analysis

The research and analysis involved identifying key competitors to benchmark their strategies and market position, evaluating their positioning for differentiation opportunities, and developing user personas based on surveys and behavior analysis. Additionally, it included mapping out current user journeys to identify obstacles and opportunities for improvement and assessing the technical requirements to ensure the feasibility of proposed features.

3. Wireframe & Prototyping

Wireframes and prototypes were created to visualize the new UI layout and elements. Usability testing was conducted on these prototypes to gather feedback and refine the design. Collaboration with developers ensured the design was implemented effectively and met technical requirements.

5. UI Design Creation

After thoroughly reviewing client feedback, the design was revised accordingly. The updated design was then finalized and prepared for the next phase. The final layout, along with graphical assets and other necessary items, was shared with the frontend developer via Figma. This ensured that all aspects of the design were accurately implemented into the website’s frontend.

6. Web Development

Approved Figma designs and creative assets were shared with the development team to guide the implementation of both front-end and back-end components. This ensured that the design vision was accurately translated into a fully functional website, with close coordination between the design and development teams to maintain consistency and meet all project requirements.

7. User Testing

Website testing was performed to ensure the highest level of security and a thorough assessment for vulnerabilities. The extensive testing process involved evaluating user flows to ensure smooth navigation and an optimal user experience, with a strong emphasis on delivering a secure website that prioritizes the protection of user data and privacy.

8. Client Training

After completing the testing process, we conducted comprehensive client training and handover sessions to ensure a smooth transition to website management. These sessions addressed all aspects of managing the website, including content updates, user engagement strategies, analytics interpretation, and basic troubleshooting. We also provided detailed documentation and support materials to empower the client to effectively manage and optimize the website's performance post-launch.

Screens