Professional Documents
Culture Documents
2
1 shop.minijim.com................................................................................................................3
1.1 Remove miniMiniJimBox + Copy of MiniJimBox.......................................................... 3
1.2 Shopping Cart Indicator................................................................................................4
1.3 Button adjustment & Logic control................................................................................5
1.4 shop.minijim.com/shop/................................................................................................6
1.5 shop.minijim.com/shop/sets/minijimbox....................................................................... 7
1.6 shop.minijim.com/cart/..................................................................................................8
1.7 shop.minijim.com/checkout/....................................................................................... 10
1.8 Header Design-Bugs.................................................................................................. 12
2 app.minijim.com................................................................................................................ 13
2.1 red “i” warning............................................................................................................ 13
3 minijim.com....................................................................................................................... 14
3.1 font............................................................................................................................. 14
3.2 Security Certificates................................................................................................... 15
4 Update contact form an add spam protection................................................................16
5 Multi Language.................................................................................................................. 17
6 Order-Performance........................................................................................................... 18
7 Website-Speed...................................................................................................................19
8 SEO.....................................................................................................................................20
1
General:
I sketched everything roughly. Feel free to adjust the design. Meaning that please don’t try to
make everything pixel-perfect, but use available building blocks instead that look similar to
the design. Efficiency over Perfectionism
1 shop.minijim.com
1.4 shop.minijim.com/shop/
1.5 shop.minijim.com/shop/sets/minijimbox
1.6 shop.minijim.com/cart/
1.7 shop.minijim.com/checkout/
2 app.minijim.com
3 minijim.com
3.1 font
5 Multi Language
6 Order-Performance
7 Website Speed
8 SEO
2
1 shop.minijim.com
3
1.2 Shopping Cart Indicator
As you can see in the picture below: Here are two different MiniJimBox configurations and a
spare part. 5 of the first were put into the shopping basket, 1 of the second and then the
spare part. The linked sub-products result in an indicator of 51. However, this should simply
show 7, as there are 7 main products in the shopping basket.
A MiniJimBox always needs to have the standard basement configuration, since i pack them
like that. And if a user wants additional parts then he can select additional ones. What's
annoying (cause super confusing for the customer) is that it's several parts in the cart. Can
we create a logic like "If a a part is part of a minijimbox than it shouldn't be displayed as a
number in the cart indicator"?
4
1.3 Button adjustment & Logic control
The G-Pay button should have the same width as the "Add to cart" button (same for apple
pay). In addition the appearance is strange, since I see the G-Pay button on a macbook -
should be apple pay on a macbook.
5
1.4 shop.minijim.com/shop/
- IF user is logged in && user already bought 1 minijimbox
- THEN displayed results should be:
- MiniJimBox
- and all spare parts
- ELSE (User not logged in OR not already bought 1 minijimbox already) displayed
results should be:
- MiniJimBox
- and all spare parts ← BUT. They should be greyed-out (opacity maybe 50 %)
plus when hovering / clicking display text “Du kannst Ersatzteile nur bestellen,
wenn du bereits mindestens eine MiniJimBox erworben hast und mit deinem
Kundenkonto eingeloggt bist.” (english: "You can only order spare parts if you
have already purchased at least one MiniJimBox and are logged in with your
customer account.")
6
1.5 shop.minijim.com/shop/sets/minijimbox
- Adobe XD links:
- Desktop View:
https://xd.adobe.com/view/9f92f20c-05a8-4e4c-865f-bb9e5f62349d-cac1/
- Mobile View:
https://xd.adobe.com/view/2dcb59bf-94a7-428a-874a-b16c957d86f9-7898/
- To-Dos:
- 1. The customizable products are currently just listed up below each other in
expandable views. I want to change it to displaying them all side by side as
cards in a grid:
- Add this text in between the main part of the product at the top and the
grid: “Set-Konfiguration: Wähle die Teile aus, die in deiner MiniJimBox
sein sollen.”
- 2. There should be a new bottombar, which is fixed when scrolling that
includes the current box of the price (changes, when user adjusts the
configuration) and the “In den Warenkorb” (= Add to cart) button.
7
1.6 shop.minijim.com/cart/
- Adobe XD:
- Default View:
https://xd.adobe.com/view/baec224d-e85e-4e56-93a0-7d24b809349f-efbf/
- When user clicks on “Konfiguration”:
https://xd.adobe.com/view/9809a2e8-6006-4890-a394-51ac3a0b59f7-cd5a/
Don’t change anything about the “Weiter zur Kasse” card, the header, footer, …:
To-Dos:
1. Translation at the top:
-
- Change “Shopping Cart” to “Warenkorb”
2. Default view for any MiniJimBox in the Shopping Cart should look like this:
8
- So we’re adding a “Konfiguration”-Expandable-Element that contains the
individual parts
- If user added another product to the shopping cart (spare part), just list it
below, as it is currently done:
3. Arrangement:
Arrange the parts at the bottom like this, so we save some space:
9
1.7 shop.minijim.com/checkout/
- Adobe XD:
- Default View:
https://xd.adobe.com/view/a291ac22-a094-4cbd-9e1d-7c5961e05b9d-f7c2/
b. To:
i.
ii. Text should be “Wenn du einen Gutscheincode hast, gib ihn bitte hier
ein.”
10
11
1.8 Header Design-Bugs
The text is overlapping on some headers in some display-sizes:
12
2 app.minijim.com
13
3 minijim.com
3.1 font
The header font of this page is wrong. Also in general: check the fonts on all pages
(minijim.com, app.minijim.com, invest.minijim.com, card.minijim.com. It should everywhere
be the font that is being used on shop.minijim.com (should be proxima nova):
14
3.2 Security Certificates
Update the security certificates, cause right now am receiving from customers that “homage
is not validated”
15
4 Update contact form an add spam protection
- https://shop.minijim.com/kontakt/
- Add Spam protection
- Since this is a german website, the contact formular needs to be DSGVO
(German term for the General Data Protection Regulation) conform. So we
can’t use anything like Captcha, since this sends data to the US. Use
Calculated Fields Form (already activated)
- Contact form needs to be updated in general (error right now when trying to use)
- Also: When submitting something via the contact formular, display “Nachricht
gesendet - wir melden uns in Kürze” (=Message send, we contact in the near future).
16
5 Multi Language
- Button, where user can switch between german and english (later on other
languages like turkish, french, …)
- Set everything up so that Jonas just needs to insert the translation texts.
17
6 Order-Performance
- When clicking on “Jetzt kaufen” it takes around 1 minute until something happens.
Most customers probably don’t wait so long…
- The user sees for 1 minute a white overlay… (which is the loading “animation”):
18
7 Website-Speed
The websites are currently loading quite slow. Figure out what can be adjusted (e.g. different
image sizes for different screens sizes?!) and then let’s create a plan on how we can all
sides high-speed-performing ;)
19
8 SEO
I want to optimise the websites regarding SEO.
20