Redesign of Spread Groups's
Shop System "Spreadshop"
Intro
I am a digital product designer working with Spreadshirt who is happy to present to you the redesign of the SpreadShop (the Shop System of the Spread Group).
Together with a small team of developers and our product manager, I created a big redesign of our free online shop system. Focus of this project was to optimize current pages, add new ones and rework the elements to complete the Shop and create new settings for the admin area to manage all the shop elements.
The former version
The former version consisted of a list page as a start page and detail pages with product descriptions.
It included a mobile product detail page with a sticky share function at the bottom, which overlapped the main CTA at the first view. Furthermore, there was no standard mobile navigation with a burger menu existing, which made it hard to navigate through the shop. On the desktop version, the top navigation was positioned below the general main teaser, which gives the teaser a more important position than the navigation and leads to the fact that the content of the page was far down and the user first had to scroll to see the most important content.
At this time, model pictures were not included, the color and size where hidden behind dropdown menue's and the product picture was positioned in the middle and overlapped by a hint about changing the product.
here you can see the former version of the product detail page march 2018 of the SpreadShop
Research, Concept & Prototypes
Our aim was to optimize the existing pages and improve their user-friendliness. I researched competitors, analyzed the current state with Hotjar and Adobe Analytics insights, made user interviews at Starbucks, spoke with Stakeholders and Colleagues to get the business perspective, reviewed even more user tests provided by our UR team, created concepts and mockups, prototyped and reshaped the complete pages from a UX and UI perspective in order to fulfill the Shop Owners needs and make it smooth in use for end customers.
The optimized version
For the Redesign we established a full functional and new startpage. We moved the navigation together with social media channels to the top, created the functionality to add the own logo and optimized the navigation by deleting "SHOPPEN" & "GESTALTEN" to simplify the menu even more. Furthermore we added a new teaser with a main CTA and below some new sections, which can be rearranged and personalized with own text to present products, categories, the design tool, about us, social sharing and much more.
******************
******************
For the product detail page we introduced a new layout with a prominent model product picture on the lefts side and a more user-encourage part on the right side. We pushed the main CTA and the price to the top, added a review part next to the product name and introduced more obvious click elements.
With the section below, we show the same design with alternative products to make our users even more happier. This was a user idea which we got while asking users in Starbucks, what a great idea!
We optimized the product detail description, added the function to see even more product views, and the trust giver section with reviews and some more details about the designs, tags, design share function and further designs.
I thank my Product Owner Bea, Developers Yves & Fabian, Hanna for the help of interviewing users at Starbucks, and the User Research Colleagues Thomas and Jenny for helping us to test the pages. Furthermore, I like to mentioned the Spread Group as a great company to do user tests and user centered product creation, which is very close to the users and customers, where it was very fulfilling to work for.
Find here my Testshop: https://shop.spreadshirt.de/sumadesign/ and feel free to give Feedback or Tipps how to improve this project even more.
Thank you for your for your attention. If you want to support me,
like the project or comment. ❤❤❤
