Primary Goal:
Herontwerp de Goodreads-app met een frisse, nieuwe uitstraling die aansluit bij de esthetiek van de website, verbetert de belangrijkste functionaliteiten en past het specifiek aan voor iOS- en Android-apparaten.
01 WAT IK GEDID
Scope en verantwoordelijkheden
Uit deze eerdere inzichten blijkt: ten eerste vinden gebruikers het moeilijk om vrienden in de app te vinden en toe te voegen, en ten tweede is er een merkbaar gebrek aan taalopties voor boeken en recensies. Ik heb de structuur van de app opnieuw ontworpen om deze kansen beter aan te pakken.
Onderzoek
Na het analyseren van de huidige informatiearchitectuur van de app, heb ik een nieuwe ontwikkeld die zich richt op het aanpakken en verbeteren van die belangrijke kansen.
UX design
Ik heb het kleurenpalet vernieuwd om de toegankelijkheid van de app te verbeteren. Dit nieuwe uiterlijk geldt ook voor de knoppen en pictogrammen, die opnieuw zijn ontworpen. Dit sluit aan bij de Human Interface Guidelines van Apple en de Material 3-richtlijnen van Google.
UI design
Design Process
02 look and feel; app & website
Huidig aspect
Een van mijn eerste stappen was om zowel de website als de app nauwkeurig te onderzoeken om de consistentie in hun ontwerpen te beoordelen. Ik lette speciaal op elementen zoals het kleurenpalet, het lettertype en verschillende componenten, waaronder knoppen, tekstvelden, navigatiebalken, kaarten, enz.
Information Architecture
Goodreads current architecture
Ik heb de huidige informatiearchitectuur van de Goodreads-app in kaart gebracht door erdoorheen te navigeren en de lay-out van elk element te schetsen. Opmerkelijk is dat een van de belangrijkste functies van Goodreads is dat je boeken kunt delen met vrienden en de gemeenschap, maar de lay-out van de app weerspiegelde dit aspect niet helemaal. Om dit aan te pakken, verzamelde ik alle informatie en organiseerde een kleine kaartsorteeroefening.
Card-sorting
Ik heb de app opnieuw gestructureerd in vier hoofdstromen: Home, Vrienden, Ontdekken en Profiel. Om de navigatie te vereenvoudigen. Om de nieuwe structuur te valideren, heb ik een kaartsorteringssessie gehouden met Goodreads-gebruikers.
Home
Vrienden
Verken
Profiel
Categorie toevoegen
Ik heb een hybride kaartsorteringssessie gehouden in UXtweak, waarbij ik voorgestelde categorieën aanbood maar gebruikers hun eigen categorieën kon laten maken. Dit bood flexibiliteit en onthulde meer natuurlijke manieren waarop mensen inhoud groeperen.
Inzichten
Gebaseerd op de resultaten van deze oefening, heb ik de nieuwe informatiearchitectuur voor de Goodreads-app ontworpen.
Profiel
Mijn Boeken
Lezen activiteit
Vriendenlijst
Instellingen
Mijn Boeken
Mijn planken
Scanboek
Vrienden
Vind een vriend
Activiteit van Vrienden
Aanbeveling van vrienden
Groepen
Verken
Zoeken op Categorie
Scan een boek
Top keuzes voor jou
Meest gelezen deze maand
Populaire lijsten
Persoonlijke Aanbeveling
Nieuwe releases deze maand
Aanbevolen aanbeveling
Home
Good reads
Kleuren en Componenten
03 Ontwerp systeem: ios & android
Design system
Kleurpalet
Gebaseerd op de initiële analyse heb ik een verfijnde kleurenpalet ontworpen om zowel de bruikbaarheid als de visuele consistentie te verbeteren. Door de hoofdkleuren uit de originele website te extraheren en deze te optimaliseren met de Contrast-plugin van Figma, zorgde ik ervoor dat we voldeden aan de toegankelijkheidseisen (WCAG-normen) terwijl de merkidentiteit behouden bleef. Het resultaat is een gebalanceerd, modern palet dat de interface verfrist en een duidelijk kleursysteem introduceert om de aandacht van de gebruiker effectief te leiden en de navigatie te verbeteren.
Primaire Kleuren
hex: F9F7F4
Basic Background
Basic background / Main
hex: 7D5749
Highlighted Elements
Highlighted Elements / Main
hex: 1F5B57
Call to Act 01
Call to Act / Main
Status
hex: F3CE65
Status Indicator
Surface
Stroke
Pressed
Main
Surface
Stroke
Pressed
Main
Surface
Stroke
Pressed
Main
Neutral Colors
100
80
60
40
30
20
10
Components
In overeenstemming met de Human Interface Guidelines van Apple en de Material 3-richtlijnen van Google, heb ik componenten ontworpen die specifiek zijn afgestemd op elk ecosysteem. Het was cruciaal om ervoor te zorgen dat de app goed was aangepast aan elk platform, met behoud van consistentie in zowel ontwerp als functie.
Material Desing 3
Buttons
Button
Button
Button
Button
Button
Navigation Bar
Profiel
iOS
Buttons
Button A
Button A
Button A
Button A
Button A
Navigation Bar
Profiel
Goodreads Ontwerp Voorstel
04 goedereads nieuw ontwerp
iOS
Android
