INSTRUCTIONS
PROJECT 2
For this assignment, we were to build upon our LoFi Wireframes done in project one and actually create a fully fledged, interactive prototype in Figma!
The aim of creating the prototype is to demonstrate exactly how it would look like once in code—in a proper team setting, this would be what you would show the website developer so they can develop the website!
As a quick recap, the website I chose the redesign is Goodreads and here are the redesign goals I've set to show and implement in this prototype:
- Elevate and modernise the website's appearance
- Improve the content layout
- Improve the navigation
- Increase interactivity
- Clearer Call To Action (CTA) buttons
With that in mind, here are the key design concepts, moodboards and the brand kit I referred to when making this prototype (from my design proposal!)
https://drive.google.com/file/d/1vagET-UPpm3XUvllSeb1tFPiLbrM9tLn/view?usp=sharing
Prototype Overview
https://drive.google.com/file/d/1Z5zIQZVap9U_t9VYLgKnJXNif13zWrzl/view?usp=sharing
The above is a basic overview of the flow when going through my prototype, including all the interactions I've included!
P.S Don't worry, I fixed the janky navigation on the About page as you can see in the live file and prototypes below and the specific about page videos😅 This overview is to mainly highlight the interactions that may be missed when viewing my prototype!
Elevate and Modernise
The first step in my prototyping journey was deciding exactly how to fulfill this goal since this would decide the whole mood for the website. While looking through my moodboard and other external visual references, I realised a lot of the designs actually lack a border/shadow and prioritised implementing their colour palette mindfully throughout their whole website (ensuring not to include TOO many colours as well). But to keep in line with my concept—minimalism + illustrative—I needed to find a way to incorporate that whimsical, cozy aspect a lot of illustrative designs have without removing from the simplicity and modernity I'm trying to execute with the design.
Therefore, I landed on making my hero section backgrounds all illustrative images! This would ensure the whimsical, illustrative look in all pages (plus keeping consistency among all the page designs!!) while letting the rest of my design be simple, straightforward and easy to understand!
The below are the images chosen for my hero sections:
Home Page:
For the homepage, I had gotten the original photo from Freepik! When downloaded, I was actually able to access some features of the Illustrator file—specifically, the features that allowed me to simply change the colours of the design which I did in order for it to match my colour palette and background!
About Page:
Rather than Freepik and other free photo websites, I actually made and tweaked this on Canva—using a presentation template as the base and building it up from there! I purposefully made sure it wasn't as vibrant and dynamic as the homepage photo in order for said photo to stand out more. Alongside this, I felt as though this photo (compared to other illustrations) felt the most aligned with Goodreads' brand and therefore their about page!
Contact Page:
Likewise to the above, this was also created on Canva by editing another presentation page! However, as this visual had less things going on for it, I decided to add more elements to make it more aligned with a contact page!
Improved Content Layout
Home Page:
Original Page
Redesigned Page
https://drive.google.com/file/d/11qH8Z58H3bq3T2RmtldoBKbM7hEGwkQA/view?usp=sharing
The original Goodreads website feels cluttered and not very user friendly due to the sheer amount of things going on when you first enter the page. It's almost a feeling of 'What... Where do I go??'. There's too many features yet too little are highlighted in a clear, concise way, making users potentially overlook them all together.
Therefore, with my design, I wanted to make sure the content layout was clear and straightforward while highlighting the key features Goodreads markets itself to offer—highlighting books, community interactions and curated articles and lists. To do this I implemented these elements:
- A clear CTA button which leads new users on where to go
- Clear, highlighted sections separating key features
- Proper spacing between visual elements so that it's not overwhelming
About Page:
.png)
Original Page
Redesigned Page
https://drive.google.com/file/d/1Um-gxt3plab0TirCaNZXYewXwKxiX_tV/view?usp=sharing
While the current About Page isn't exactly the worst, it's also not very clear and lacks in visual hierarchy. One of my biggest qualms with it is actually the fact that it doesn't really showcase what Goodreads is all about, which defeats the whole point of an about page.
Therefore, to remedy these issues, I decided to:
- Bring more warmth and personality to the About Page, to help more people actually connect with Goodreads and the reading experience
- Break up the sections better by creating clear sections
- Spicing up certain sections by adding visual elements like imagery so that it's not very word heavy while keeping the original intentions of the About Page
Contact Page:
Original Page
Redesigned Page
https://drive.google.com/file/d/1oRirNcXNds4dhbFC_9EeQPoSxwt36sA1/view?usp=sharing
While Goodreads' original contact page is functional, it's not exactly the most welcoming to readers, authors and publishers looking to work with and ask any questions to the company. It's super drop-down heavy and even the guidelines they want you to follow is listed at the bottom of the page, meaning users can completely overlook it or feel frustrated when they have to redo everything if it doesn't comply with the guidelines!
To improve user experience and enhance the visuals I decided to make these changes:
- Added a contact information section and the actual messaging inbox parallel to each other, splitting up the page and making it more visually appealing
- Enhanced the visual hierarchy and increased flexibility in messaging
Improved Navigation
Original Navigation
This is the original navigation system for Goodreads. As seen, it's not exactly the most consistent throughout all the pages and some of the pages (such as the contact page) is hidden within the 'About Us' page and inaccessible if you don't click on it.
Not only that, the about of options featured in the main navigation can overwhelm new users as they may not know what to do or where to go.
Redesigned Navigation
My goal when making the new navigation system were simple:
- Simplify the options featured
- Consistent navigation across all pages
Therefore, I created the navigation systems seen above!
I wanted to ensure I stayed consisted with my brand kit and proposed colour scheme, thus I made sure to include various pops of colours within the system that aligned with it. The dark green for the navigation menu was chosen to make it stand out from the rest of the page, making users easily identify where to go. Additionally, I added hints of the light green in my brand kit to ensure consistency and add more visual interest to the design, while the icons are all brown to keep the aesthetic of the pages. I reduced the amount of immediate navigation options, particularly the ones next to the user icon in the original design, as I felt a lot of them could just go under the user icon and didn't need to be highlighted with separate icons. This helped declutter the navigation system and made it simpler and more minimalistic, hence aligning with my design concept.
For the footer, I wanted to ensure everything was readily accessible immediately from there, including the contact page which is not seen in the original. The section headings are in Playfair Display to create distinction between the headings and the options. Likewise to the navigation above, I wanted to include hints of my secondary colours thus I included them in the icon colours and design features within the footer.
Increase Interactivity
Overall
Though all the pages had different content, I wanted the baseline interactivity within the pages to remain the same to ensure consistency in my design. The elements I kept mainly the same were:
- Navigation system option hover effects—from off white to light green and underlined when hovering
- Hero section fade in, fade out. Images were faded out by a certain percentage to make the text more visible and the text were faded in to ensure a smooth transition when loading
- Buttons throughout all the pages and their hover effects
- Ability to click on the navigation systems to change the pages
- Wording on the footer section options changes colour (brown to dark green) when hovering to show users what they are selecting
Home Page
The added interactivity I specifically added for my homepage were:
- Call To Action Button in top section leading the user to the subsequent sections, guiding user flow
- Specific carousel for the discover section, with fade in, fade out between books, more prominent shadow for the chosen book (to further emphasise that it's been chosen), a scrolling bar that changed depending on how much the user scrolls—this interaction is solely for the discover carousel as I wanted to highlight the book discovery feature in Goodreads, aligning with the app's mission.
- Community reviews interactions—the arrow buttons change colour on hover from green to white, the comment section user profile pictures change when the user clicks on the buttons.
- Horizontal scroll carousels to show other Goodreads features that may be overlooked. Split and difference in designs to communicate the difference between Goodreads created content (posts and blogs) and community created content (lists)
About Page
The interactivity I added for my redesigned About page are:
- Images that change on hover to another image (right below the top section, above who we are). I wanted to do this to further show the company environment and values of Goodreads without cluttering the page with too many images
Contact Page
The interactivity I added for my contact page were:
- Filled out boxes in the message section when clicked—to demonstrate how it would look like when a user fills out the section
- Moveable map—when hovering, the map will show you instructions on how to move it which will disappear when hovering/moving stops.
- New Call To Action button design to show the differences between the two options and also to show button visual hierarchy. Button colour changes upon hover from white to dark brown (and vice versa with the text)
Clearer Call To Action (CTA) Buttons
Button 1
Button 2
One thing I realised the original Goodreads website lacked was definitely Call To Action (CTA) buttons in their overall design. Thus, I made sure I added them to help guide the users through the pages and also to keep consistency in the designs. When displayed next to each other (in the contact page), I made sure to choose varying designs so that there would be a clear visual button hierarchy to display the most important action for the users.
Feedback
As I couldn't attend the Week 9 class (due to food poisoning...), I asked Mr Shamsul about his opinions through Microsoft Teams to which he said 'It looks great'.
Additionally, since we are redesigning these sites for the users, I decided to ask some of my friends (design and non-design students, Goodreads users) about their opinions on my design to which they commented:
Therefore, I took their opinions into mind and actually applied all these suggestions into my design. After looking at the before and after, I decided to apply the shadow comment into my design as I felt it helped emphasise what book was selected which would improve user experience. However, after applying the border (in various colours and widths) between the blogs and lists (under the latest buzz section), I decided against applying it in my final design as I felt it broke the visual flow and didn't really fit in well due to being sandwiched between the elements with horizontal scroll.
Figma Board
Figma Prototype
Please Press 'R' To Restart The Animations & Scroll To See The Rest Of The Page :3
Figma File Download
https://drive.google.com/file/d/1147h1Hh7klTyXfai0VvRbdO0dXQiXWeh/view?usp=sharing
Reflection
I actually really enjoyed this assignment! I felt like after viewing a few videos on how to improve my UI designs and looking at various visual references (in and out of my design proposal moodboard), my UI design skills really DID improve, especially when compared to last semester with App Design 2. I was able to apply UIUX principles like user-centricity, consistency and hierarchy, contrast, proximity and alignment in my design without adding TOO much which was possible based on my concept. Following these principles really helped me keep my design in line with the brand kit I designed which would help in future contexts when designing other elements and pages of the website.
I'm honestly really glad I was able to go through all the basics of UIUX designs again after App Design 1 and I think I can definitely see the improvements and difference in overall quality between my UIUX projects in App Design 1, App Design 2 and Interactive Design. I hope with my newfound deeper understanding in UIUX principles, I can continue applying these concepts and principles as I go on through my next semesters with different modules all the way to when I start my 1 year long work-based learning experience next year and beyond!
Comments
Post a Comment