Mockup from mockplus.com
07 USER EXPERIENCE DESIGN (REDO)
IOW 400.3 User experience design (redo)
Brief summary
The feedback from the first time I handed in this project was that my final interface design did not feel complete, and it still communicated as a wireframe. The other comment stated that my initial concepts did not translate into my final designs. I used this feedback as a brief and explored the project again.
Technical specifications and deliverables
01 Vertical narrative
02 Wireframes
03 Final digital execution
Rationale
I did not redo the entire project because I was still content with my logo, concept, colour palette and typography. I redid the visual language and the final UI screens. I wanted a visual style that better complements the movie posters. I changed the final UI screens user journey to make it more coherent and aesthetically pleasing.
Visual language part 1
01 Vertical narrative
Plot recap
Initially, I had different sections in my PWA, like browsing, searching, answering questions and a profile. I decided to shorten the user journey, so there are three journeys, that start and end the same. In other words, there are three different ways that the PWA can help the user pick a movie. I also decided to change the visual language from flat vector illustration posters to line illustrations in the form of icons, patterns and backgrounds.
Visual language part 2
Animation
The visual language is simple to balance out the movie posters. My previous illustrations were too busy and clashed with the film posters, making it difficult to place them on the screens. With the new illustrations, I used them in some places as a background, where I decreased the saturation to 10%, and I used icons instead of words.
Visual language part 3
Technicolour
I did not change the colour palette because I still felt it suited my concept and worked well with my new illustration style. What I did change about the colour palette is how I applied it throughout my user journey. I did not shy away from using different colours for buttons and backgrounds. Since my palette is so simple, I could play around with it.
Colour palette
UI pixels part 1
I used some of the buttons from the previous attempt but added drop shadows and inner shadows. I also created some new icons, for example, the trend and confirm button. Overall, I tried to make the buttons friendlier and more fun by adding rounded corners and using negative space. The other two new elements are a loading bar and the breadcrumbs.
Iconography
Subtitles
I slightly changed the typography specifications to fit the grid and other changes. The typography guide is elementary because I moved away from copy heavy screens and embraced more visual screens. I also feel that the fewer typefaces and weights there are, the screens will look more consistent.
Typography
UI pixels part 2
There are less buttons with the redo PWA, because I decided to use the UI freedom illustrations and visuals, rather than type and different button styles. The large icons are buttons and they have descriptions underneath them in the PWA. The small icons do not have descriptions underneath them, because they are more self-explanatory. The standard buttons are only used on the Home Screen and the slide buttons are used as an answering method in the question section. When the answers are selected they are answered in read, as seen in the video on the Botton of this narrative.
Buttons
02 Wireframes
Wireframes part 1
The image shows the wireframes for the Home Screen, loading screen and random movie selection. I used the wireframes to plot the overall journey and indicate what I imagine on each screen. The screens of course changed a lot between the wireframes and finals. For example, the Home Screen is not a scroll screen in the final design.
Wireframes part 1
Wireframes part 2
These wireframes show the other two methods of picking a movie. First is the swipe left and right technique and second, is the questionnaire option. I used this opportunity to approach copywriting and think of different types of questions and answers. With the questions, I took inspiration from the previous iteration (the initial project).
Wireframes part 2
Wireframes part 3
These wireframes represent the results. These screens changed in the final PWA, because I added my own illustrations and infographics. In the end, I decided not to include a profile, and rather showcase a watch list, because I felt it made more sense inside the context. The movie trends and picks were not in my first iteration (the initial project).
Wireframes part 3
03 Final digital execution
Home base
These final screens indicate how I introduced the illustrations and how I experimented with the colours. With the new iteration (the redo), I utilised the inner shadow, because it suits my retro cinematic visual style. The watch list button and trends buttons will take the user straight to the results screens, where the user will be able to see their results and picks from a previous time.
Introduction screens
Swipe left and right screens
All these screens are the same, but I wanted to see how different movie posters interact with my colour palette, illustrations and icons. With the redo, I experimented with different ways of displaying the movie poster, instead of using it as is. The sentence underneath 'the perfect match' is a very short description of the film.
Swipe left and right screens
Loading and random screen
The first screen represents a loading screen, which comes before a random movie is revealed. The second screen shows how it looks when the random movie is revealed. For most of the headings I tried to keep the copy under two lines, to use up less screen real estate. Every time there is a movie on the screen, the user can either watch it immediately, dislike it, like it or add it to their watch list.
Random movie screens
Questionnaire screens
These screens picture how the question and answer screens look. The screens also explain how it looks when different buttons are selected and where the navigation systems are place. The forward and backward arrows navigate between different questions and the breadcrumbs move between the different answer options.
Questionnaire screens
Result screens
There are three different types of results. Firstly is the five PWA movie picks, as explained before, the user can either watch it, watch it later or like it. Secondly, is the infographic results, where the user can discover what they like and do not like. Finally, is the user's watch list, where all the movies are that the user has indicated that they want to watch later.
Result screens
PWA video
I have included this video to get an idea of the user journey. It shows all the interactions and prototyping. The video is a way to propose how a user would navigate between the different screens and explain the PWA concept.
User journey video
