Archives

BRIEF 1: DESIGN: Final Submission Boards

BRIEF 1: DESIGN - YCN Submission Boards


BRIEF 1: DESIGN: App in Context





BRIEF 1: DESIGN - Final App Screens

Welcome to Morrisons
When users enter the store using their smart device they are greeted with a welcome screen which welcome’s them into store and highlights key content signifcant to the user. Showing them personalised offers in store today, offering meals suggestions and informing the user if any of their friends are currently shopping in store. The design makes use of large imagery and large touch areas for ease of use while shopping and clear and large typography for glance viewing. 





List
List brings together the best of the online and offline shopping experience. Users of the morrisons Shoppr app have on shopping list per household which allows anyone in the family to add to the list from any device and the list is stored in the cloud for access when shopping. List also offers a visually rich and easy use shopping experience in which the list is ordered by the users locations as well displaying products in a large, pictoral format and making use of brand colours for easy product recognition. The list can be organised by product or contributor. 


Meal Planner
Now more than ever our health and what we ate are a big part of how we live, especially young family who want to keep their children eating a healthy well balanced diet however it can be hard to keep track of this with the busy scedule of family life. Meal Planner easier allows users to plan an entire weeks worth of meals and automatically adds the required ingredients to the shopping list. Meal Planner also allows members of the family to vote on meals they would prefer over others. The meal planner is also linked the families calendar so quick meals are saved for days when the family is extremely busy.


Healthy Living
In addition to planning meals for the week, the meal planner also creates visual representation of the family meals and detailing how healthy the meals are for the weeks. Making it easier for user to see where they can improve there healthy diet. This feature also enables parents to ensure that family members are getting all of the key food groups, vitamins and minerals within their diets.




Recipes [Above]
It can often be difficult to get inspiration for food ideas, espcially if users are on a budget or they don’t have large ammounts of time to cook, based on these criteria the Shoppr apps suggests tasty reciepes based on the users wants and needs. All of the recipes are linked with the meal planner and syncronized with the healhty living overview. 


Friends [Right]
We are connected to our closest friends and family where ever we are, we rely on our friends and trust there opinion, in this socially connected our friends provide us with recommendations that we trust. Morrisons Shoppr’s friend feed aggregates users friends activities such as offers they’ve purchased, products they recommend as well reciepes that they’ve tried and enjoying allowing users to make smart decision about the recipes they try and the food they buy. Friend feed also informs user if there friends are currently in store, so they can meet for a chat. 


Nav State Open

BRIEF 1: DEFINE: Animation Experimentation



To show how the navigation would function and how it will be there whenever it's needed and never there when it's not needed I've created this animation to demonstrate how this would work, essentially wherever users are within the App they can swipe down from anywhere on the screen to reveal the menu.

BRIEF 1: DEFINE - Iconography Development




BRIEF 1: DEFINE: Visual Concept Development 2





 
Moving forward from my first concept I felt that the navigation needed to be simplified as I think the use of different colour within the navigation over completed the functionality and didn't enhance the user experience. Furthermore have the navigation all present and that size was also dysfunctional as it took up too much space. I have have here experimented with different locations for the navigation, on the screen for it to tuck away and appear when needed which is much more effective and leave the screen available to be filled with content. I've decided to have the 'Nav' white so the selected item with stand out dramatically and even more so at a glance which I needed when using the app during a busy shopping experience.





BRIEF 1: DEFINE - Visual Concept Development 1

Within in initial design I explored an always present 'Nav' with large buttons and a mixed colours. The colours however felt distracting from the main content however the large size when them extremely easy to use when navigating the super market. additionally I think with the 'na'v being so large it will need to be hidden as it is taking up a lot of screen space. Within the second screen it is evident that the colours are too bold, when developing the app I moved to a more pastel colour palette that was less vivid and more in keeping with the Morrison's brand. I felt the bold, large imagery worked well so I continued to use this throughout the rest of the application design. It make the app feel more like a magazine which I think will engage the audience more then a traditional application UI. Strong use of iconography which are simple and easy to understand also worked well, so I kept a consistent icon style throughout the app to help users learn the app quickly. Throughout the app design I made the all tappable elements larger than normal as the user need large hit area when walking around the supermarket as they are not stationary like when using a app at home.








BRIEF 1: DEFINE: Final Wireframes & Workflow


After conceptualisation all of the features that needed to be in the app and planning a basis workflow for where in the app these features will sit. I created a detailed wireframe of exactly what functionality needs to be on each screen on the app. I also worked this into a workflow which demonstrates how users will move between each feature of screen and which parts of the app are linked with each other.

Workflow


Wireframes - App screens












BRIEF 1: DEFINE - Rough Wireframes

Using the strategy I planned out all of the features with the Application and how the app will work. From there I began to figure how these features might look within the app and under what screens these features would be present.




BRIEF 1: DEFINE: User Persona's


Based upon the information provided to within the brief as well research and my own experience working in a supermarket I have put together some overarching persona’s to characterise what user problems need to be solved by the application. These persona’s will influence how the app functions and it’s features.


Jill
Jill, is a wife and mother to four children, 4, 8, 12 and 17. She has an active family who engage with many extra curricular activities, feeding everyone and making sure everyone has a balanced diet as they are growing - it can be a struggled to stay organised.

Goal: Keep chaotic family life organised and keep the entire family healthy. 



Kevin
For some cooking can be a chore and purely a necessity. Sometimes a little inspiration and simplifying meal time can bring great tasting food, that’s simple and easy to cook and affordable on the average income.

Goal: Inspire users to cook new foods at home that are easy and affordable. 



Rebecca
Rebecca has just moved away from home for the first time to study at University. She is currently sharing a house with five other people. Being a student can be tough and making the most of the money avaliable is important, with a house this size keeping everyone happy on a budget can be difficult.

Goal: Give groups of users control over what they buy, keep them on a budget and keep them all happy.


BRIEF 1: DEFINE: Strategy



Using the research I had collected as well as working closely with the user persona’s I mapped out a plan of all the different potential features that could be incorporated into the application and how each of these features solves the users problem or makes traditional tasks easier for them. I then used all these idea to plan out exactly how these features will sit and work together to this I began to categorize the features into different screen based on what the user needs to do. I created a rough IA structure for the app for features to sit within. The principles I defined which under pinned these decision were that the app must be Easy, Simple, Inspiring and Affordable.

BRIEF 1: DISCOVER: Visual Research


Morrison's already publish a monthly magazine which is free for customers of their stores. The magazine is popular and well liked by the customer base. Within my visual research I have looked at how the digital aesthetic of the magazine can be brought into a digital application. This would be beneficial to user as they would be familiar with the design and content as well as giving shopper and more natural interface to interact with rather than creating a native smart phone experience.

Clear and simple typography
Strong expansive imagery
Pastel colours
Familiar feel, homely

Use of cards to distinguish between different types of content

Appropriate to all audience, simple and fun

Simple yet unique icons

Colour being used to separate features and functionality from each other

Large typography and images, large hit areas for easy use 


Dynamic colour palette that changes with content or feature 


Use of imagery instead of text or UI elements creates an immersive feel around the content


Colourful imagery of food with overlaid UI element, let's the application content speak before it's interactions.



 

Copyright 2011 All rights reserved