Implement UI-design as discussed in the team meeting on Tuesday

[codingwithelijah]

User story

1. As a user
2. I want / need be able to have a intuitive UI
3. So that I am able to understand the App easily

Acceptance criteria

• [x] Include tab bar at the bottom of the screen with: "Home" | "Strength Search" | "Map Search" | "Settings"
• [x] Include two big buttons at the Home screen to navigate to the two main features, as proposed in the FIGMA design draft
• [x] Replace all icons for strength search and map search with two minimalistic icons of your choice
• [x] Replace "Home" icon in the tab bar with a minimialistic "Home" icon of your choice
• [x] Include a questionmark on the upper right screen of all views which navigates to an empty page (to be filled in the next sprint)
• [x] Include a "bar" on top of the tab bar that shows the currently selected device and allows user to click on it which opens the "device details" page (as discussed in Tuesday´s meeting)
• [x] Also include this bar on the "Home"-screen - unlike in the FIGMA draft
• [x] Use colors as suggested in FIGMA draft
• [x] Place button "Switch to Google Maps / Route" at the bottom of the map (left or right) when user is in the geolocation feature
• [x] Cut the loading circle
• [x] Ensure that updates on the acceptance criteria are provided via comment section

Definition of done (DoD)

• It builds without errors
• code has been reviewed
• Build has been made and deployed on a testing environment
• Code coverage >75%
• All acceptance criteria were met
• Documentation updated whenever needed within planning documents (Tabs: Bill of materials, Documentations)
• Branch/feature was merged into dev and then main

DoD general criteria

• Feature has been fully implemented
• Feature has been merged into the mainline
• All acceptance criteria were met
• Product owner approved features
• All tests are passing
• Developers agreed to release

[codingwithelijah]

@jannikbmc, @Interperle, @Wandinad and @Chippelius: As discussed in our team meeting, don´t spend too much capacity on details. We want quick wins: Design improvements that are easily recognizable and can be implemented quickly. If you are not sure what to prioritize or how to approach: Contact us! :)

[Chippelius]

The logo colors are:

• Center: #093A8A -> candidate for Primary / PrimaryDark
• Outer (very far away, only visible on satellite waves): #41c4c6 -> candidate for Accent (may try it out in the figma draft)
• Outer (closer, visible on the tip of the pin): #3397B3 -> candidate for Secondary

Please specify all the gradients! For example (currently implemented):

• DarkGradient: PrimaryDark (45°)-> Primary
• LightGradient: Secondary (45°)-> Primary
• AccentGradient: #7692AD (45°)-> Accent

And specify, which elements use which color / gradient, for example:

• TabBar background: Accent
• AboutPage background: DarkGradient
• AboutPage ImageButtons background: AccentGradient
• ... (if you don't specify something, I will assume, we can make the decision ourselves)

[codingwithelijah]

The logo colors are:

• Center: #093A8A -> candidate for Primary / PrimaryDark
• Outer (very far away, only visible on satellite waves): #41c4c6 -> candidate for Accent (may try it out in the figma draft)
• Outer (closer, visible on the tip of the pin): #3397B3 -> candidate for Secondary

Please specify all the gradients! For example (currently implemented):

• DarkGradient: PrimaryDark (45°)-> Primary
• LightGradient: Secondary (45°)-> Primary
• AccentGradient: #7692AD (45°)-> Accent

And specify, which elements use which color / gradient, for example:

• TabBar background: Accent
• AboutPage background: DarkGradient
• AboutPage ImageButtons background: AccentGradient
• ... (if you don't specify something, I will assume, we can make the decision ourselves)

@Chippelius: Thanks for your detailed comment! Since Markus´ clearly stated not to focus too much on the UI, Luis and I would approach it rather "pragmatically": Take your own experience into account and implement what fits best without too much effort. Since you also took "Visualization", we can trust you here completely! 😅😅😅 Regarding gradients: It is quite straight forward. Home equals dark gradient, everything else: light gradient. Everything else can be decided on your own.

[jannikbmc]

Currently looks like this. For iOS i haven't changed the icons yet.

[Meisterlu]

Hey @Chippelius @jannikbmc @Wandinad @Interperle Thank your posting your progress, looks good so far! Please find below our comments:

Home:

• please choose a pictogram with a higher resolution for the signal strength
• Please take the same pictogram for the map search from the tab bar to stay consistent
• Please use white as a colour for the pictos

Saved device:

• Headlines like saved devices or available devices should thus not be gradient. Please leave out the background here and just make them bold and white and underline them below throughout the entire width
• please adjust the setting pictogram next to the name, no background only white icon

StrengthSearch & Map Search:

• Where it states "MI Band 6 Click to select another device." Please make the button consistent, thus not on the entire width and same font size like the 'delete device' button on the device detail page

Overall Design Adjustments:

• Please also make the "?" white throughout the hole navigation of the app
• Adjust the top bar on all pages of our app to stay consistent (choose the height of the device selection)
• Please display where the user currently is within this top bar e.g "Map search", "Strength Search", "Settings", "Device Selection", "Device Detail" as a headline. Thus cut e.g. "Mi Band 6 "within this bar
• Please use the same colour for both bars (top and bottom to stay consistent) #7797B8 (also for the buttons in the home screen, these are different as well)
• For the button design please stay consistent, refer to "Save" or "Cancel" button (gradient is ok, but font colour should then always be white)

Please let us know if you have any further questions :)

[jannikbmc]

Ich hab nochmal weiter dran gearbeitet die relevanten Bilder sind weiß - bei den restlichen in der TabBar nicht notwendig, da die in Android auf weiß gesetzt werden Gibt aber noch was zu tun:

• insb. fehlt der Button auf der Map in der Ecke
• Bilder bei iOS einfügen
• wenn wir uns an FIGMA halten dann bei StrengthSearch noch die Farben ändern im Circle Saved device:
• please adjust the setting pictogram next to the name, no background only white icon Overall Design Adjustments:
• Adjust the top bar on all pages of our app to stay consistent (choose the height of the device selection)
• Please display where the user currently is within this top bar e.g "Map search", "Strength Search", "Settings", "Device Selection", "Device Detail" as a headline. Thus cut e.g. "Mi Band 6 "within this bar

Hierzu: Please use the same colour for both bars (top and bottom to stay consistent) #7797B8 (also for the buttons in the home screen, these are different as well)

• die benutzen alle schon die gleiche Farbe!

@Meisterlu Wie sieht es mit konsistenter Namensgebung aus: Wenn die Icons gleich sind würd ich mich auch auf entweder GeolocationSearch oder MapSearch festlegen? Zum reinschnuppern wie es aktuell aussieht:

[Chippelius]

Update:

[codingwithelijah]

Hi guys :) Looking good so far! Thanks for all the work you guys put in, @jannikbmc and @Chippelius! :)

Some minor things:

1. Having talked to @jannikbmc, we want to separate buttons visually from the rest of our app. Please adjust the button design as discussed, @jannikbmc.
2. Consistent naming: Please replace "Geolocation Search" with "Map Search", @jannikbmc.

Further improvements will be discussed tomorrow in the team meeting.

[jannikbmc]

Done.

[codingwithelijah]

Hi, @jannikbmc: Great! Looks good. One small thing: Could you add also a border radius to the button as it is implemented for the other buttons? Looks to me as if there is a small button border radius of something like 5px ... Makes it look a bit more modern! ;) Thanks in advance!