Go back
E-COMMERCE WEBSITE
SP tech
Go back
Brief
Design an e-commerce concept for the company SP tech who specialize in the sale of camera bags and accessories.
The target audience comprises young professionals and content creators in the field of photography and filmmaking.
Role
UX/UI
Motion graphics
Motion graphics
Year
2023
Tools
Figma
Photoshop
After Effects
Photoshop
After Effects
Team
Amanda Larsson
Brief
Design an e-commerce concept for the company SP tech who specialize in the sale of camera bags and accessories.
The target audience comprises young professionals and content creators in the field of photography and filmmaking.
E-COMMERCE WEBSITE
SP tech
Background
Scandinavian Photo is a nordic leading company in photography, video and sound. In 2023 they were in the process of developing a new product series designed to enhance the experience for smartphone users, professionals and content creators.
The new brand SP tech aimed to focus on premium products with a personality. Additionally, they wanted to retain a tech-inspired feel while incorporating a modern appearance. "Defining tech with fashion and defining fashion with tech"
Goal
Design a landing- and product page for the new e-commerce website SP tech.
The interface should align with the brand providing it with a trendy look while maintaining the technical features.
Process
I started the project by setting up a MoSCoW defining what elements the pages must-have, should-have and could-have. During this phase I realized the considerable number of elements that should be incorporated into the design. Accommodating everything within the mobile version posed a significant challenge.
SEO
To optimize the site for search engines breadcrumbs were implemented, improving visitor navigation and aiding Google in discovering the site. This enhances the overall user experience and helps improve the site's ranking on search engines. Additionally I incorporated CTA links on every page to encourage customers to explore the site further and discover new products.
Visual identity
SP tech had already chosen a color palette and a font for the site. The original font intended for use was "Söhne", but due to its paid nature the similar "Helvetica Neue" was used for this project instead.
For the layout I drew inspiration from the gridded style. I thought this style would suit the brand, evoking a subtle techy vibe while also keeping it modern and fashionable.
As an added feature I developed a visual representation for an AI chatbot. In this design I incorporated the SP tech logo and transformed it into a playful and approachable persona.
Solution
SP tech's e-commerce design caters to both desktop and mobile platforms. By incorporating breadcrumbs, recommended products and clear calls-to-action, dead ends are eliminated leading to increased sales potential and improved conversion rates.
Learnings
Through this project I discovered my appreciation for the challenge of working within constraints. In particular when it comes to arranging numerous elements in a limited space. I also gained a deeper knowledge in creating design systems with Figma — building from atoms to modules. I explored component properties like variants and booleans, expanding my knowledge and skills in the process.