07. User experience design (Redo)
Brief Summary
This project uses the brand of project 400.2 as a starting point and consists of creating and executing a user journey in the
form of a mobile app or desktop website. UI elements, layout and user-friendliness are considered. Through different rounds
of prototyping and user testing the design of the app or website is refined to reach the best outcome.
Project Deliverables
An UX solution consisting of the following:
1 | Overall system functionality, but with a focus on a specific journey.
2 | A well considered and appropriate concept that compliments your CI project.
3 | Wireframes and structure layout of the site/app/etc.
4 | Final (digital) execution.
5 | Vertical narrative.
2 | A well considered and appropriate concept that compliments your CI project.
3 | Wireframes and structure layout of the site/app/etc.
4 | Final (digital) execution.
5 | Vertical narrative.
What I did different:
Typography: For my project redo i got rid of the serif font, Lora and change my sans serif font from Nunito to Gotham rounded. This made the overall design much sleeker and balanced. Gotham rounded still have that rounded edges to fit the style and illustrations. I payed special attention to hierarchy by using Gotham rounded in different weights and colours rather than using different typefaces. I also adjusted my leading by doubling up the the size of the font size.
Increments and sizing: I redid all the sizing and spacing of the elements and made sure all the elements are aligned to well structured grid. After doing some research I found that a good practice for spacing and sizing is that all distances and measurements should be dividable by 8. For example the icons would be 24px by 24px and the distance between them would be 16px.
Effects and colour: I got rid of all the harsh drop shadows and applied a faint drop shadow on all the cards and buttons to make them stand out from the background. I also lightened the background to brighten the app and get rid of dullness. In the "Order tracking" screen I change progress bar and highlighted the difference between completed steps and uncompleted steps.
Buttons and icons: For the buttons and icons i adjusted the sizing and made sure the measurements were dividable by 8px. Many icons were to big and got scaled down to 24px or 16px. I also change all the rounded corners from 16px to 8px to give the buttons and layout a more structured feeling.
Colour Palette
UI Elements
Low fidelity wireframes
Final user journeys
