Precedent Design Mimo

To understand and to learn interactive design it is important to look at precedent designs, as a designer this allows me to see what works and what is effective. Precedents are also a source of inspiration for my own interaction and interface design, I can gain inspiration from both look and feel and the navigational and functional elements of the design.

Mimo

The precedent I chose to look at in depth was Mimo, this app is designed to teach people coding on the go, in bite size pieces. It covers a range of topics ranging from programming for beginners, HTML, CSS, Java, making website, apps and more. You can download Mimo here https://getmimo.com

 

Screen Shot 2017-05-08 at 11.27.30 pm

Mimo’s logo/app icon

 

Target audience

The target audience that I identified when looking at this precedent includes coding beginners and intermediate coders who want to learn more. The app not only targets users who want to learn about coding in general, it also caters to users who want to learn a specific task e.g how to create a website. The short courses that the users complete are ideal to target users who are on the go and have limited time to spare. Due to factors above the primary target audiences for Mimo include young adults/students (18-25) as they have a deeper knowledge and experience with technology however a secondary audience could include older adults who want to broaden their skill set.

Assumed knowledge

This app assumes that the target audience has basic literacy and technology skills. If the user chooses to do a more advanced course it assumes that they have basic prior knowledge of that topic.

User interactions and interface

The user interface is simple with 4 categories displayed across a bar at the bottom of the app with the current category highlighted in green. It uses a simple hierarchy that allows users to choose their topics and level and get started. The main navigation includes back arrows and drop down menus. When actually learning the code the interface uses a simple continue button and a progress bar is used to indicate where the user is in the course. 

 

Screen Shot 2017-05-08 at 11.30.26 pm

Screenshots from Mimo, 19th of April 2017

 

Visual design

The overall design has a semi-minimalistic feel and is fairly clean. The icons are simplistic and use the Mimo’s signature colour green with purple accents. The illustrations have a flat style to them and add colour to the interface. The type used is a clean, fairly rounded sans serif font, the hierarchy used includes bold variations for title, medium variations in a lighter colour for subtitles and medium-light variation for the main content.

 

Screen Shot 2017-05-08 at 11.31.46 pm

Screenshots from Mimo, 19th of April 2017

 

Improvements I would suggest

Overall the app is easy to use, informative, enjoyable and very much suited to its target audience. A suggestion could be to have a web based app so that the user can learn about coding and then put their learning into practice as they are using Mimo on their computer. Another suggestion could be to use actual examples of final results in the teaching of the coding so that users know where they are heading.

UI Visual Design Patterns

User Interface design is not all about graphic design but is about presenting the user with the right tools to accomplish their goals. Therefore it is important to balance aesthetics with usability and ensure that UI is used to heighten UX. This is where design patterns come in, design patterns provide design solutions for effective layout design and can increase usability within a design.

What are design patterns?

Design patterns are common design solutions that are used throughout a variety of interfaces, they are quite common to users and due to this they intuitively know how to navigate an interface.

Examples of design patterns

Tabs

Tabs are an example of skeuomorphism (The design of something that represents something in the real world e.g tabs represent physical tabs used in physical filing systems). Through the use of skeuomorphism and the mass use of tabs across most interfaces this design pattern allows users to navigate with ease and without confusion therefore aiding to a successful interface design.

 

timthumb.php

[Launchmind tabs example]. (n.d.). Retrieved May 8, 2017, from http://inspirationti.me/websites/tabs

Menus

Menus are another example of visual design patterns, they are used to organise information and present information clearly to the user. Dropdown menus can be used to create hierarchal organisation whilst drawer menus save space and can be used to create clean and simple designs. Hamburger menus are most commonly used in app design or responsive design for tablets and phones, they save space and declutter the interface for the user.

Search bars

Search bars are a nice feature to include in a header or a nav bar as they allow users to search what they are looking for without navigating their way all through the interface. Search bars with dropdown options are useful shortcuts, they shorten the users path and saves the user time therefore creating a better user experience.

Big Footer

Another design pattern that creates shortcuts for the user are big footers, this pattern is used quite commonly throughout interfaces and is used to hold links to important pages, therefore can shorten the users path to their destination.

Carousel

Carousels are quite common when a user needs to browse through lots of options. Carousels can be seen on portfolio websites and are also quite common on online stores to create look books or advertise multiple products at once.

 

disney

Disney Carousel [Digital image]. (2014, September 12). Retrieved May 8, 2017, from https://www.imarc.com/blog/content-carousels-2014

Most important idea from this pod

User design patterns are good solutions for design problems due to the fact that they are proven to work and the users can intuitively navigate the interface when patterns are used.

 

User Scenarios

Lecture pod 6 explores user scenarios and their contribution to the overall success of a project. User scenarios are used in conjunction with personas as explored in lecture pod 5 to completely understand the user’s therefore the design can be tailored to an audience and purpose specifically.

What is a user scenario?

User scenarios are simply scenarios that a designer places their user in, a scenario is a narrative or situation. User scenarios are stories created to achieve a goal, e.g. Dave wants to know why his toaster is working properly so he navigates to the troubleshooting page on ‘how to make toast.com’. User scenarios can include goals, expectations, motivations actions and reactions essentially they need to be a story around use.

Why are user scenarios important?

User scenarios are important as they drive the design of a project e.g If Dave is looking for the troubleshooting page on ‘how to make toast.com’ it should be easy to navigate to on the website and therefore the designer should come up with a design solution to help Dave achieve his goal with ease. With the use of multiple user scenarios a design can be created to include UX for the masses, this will ensure that everyone who reaches a website or an app that has been designed with many users in mind will successfully complete their goals and have a seamless and enjoyable experience.

Most important idea from this pod

It is very important to create user scenarios as they drive the design of the interface and the use of these scenarios is critical to the success of an interface design.

Be Productive User Personas

For my interactive design projective I am designing a website for students to learn about productivity and utilise the website as a productivity tool. Before jumping into designing and wire framing it is important to create user personas (as explored in lecture pod 5). Through creating these personas I can orientate my design to my core and fringe audience. Featured bellow are my user personas for ‘Be Productive’.

Core user

 

 

Screen Shot 2017-03-27 at 12.14.34 pm

Beck Sanders user persona

 

 

Fringe User

 

Screen Shot 2017-03-27 at 12.14.01 pm

Mike Smith user persona

 

User Persona example – Dave Smith

As explored in lecture pod 5, user personas are used to ensure that designs meet their target audience. For the interactive design ‘Making Toast’ a user persona was created to orientate the final design.

Dave Smith

Dave Smith is the user persona for ‘Making Toast’, his persona profile is featured bellow.

 

Dave_Smith_toast_novice

Dave Smith’s user persona created with xstensio

 

Using all the information provided a mood board could be created, this mood board is used to influence design choices and as a visual reference for Dave Smith’s personality.

 

thumbnail_User Persona Mood Board - Dave

Dave Smith’s mood board

 

User and Artefact Personas

Lecture pod 5 explores user personas and how they aid in creating a successful design along with exploring how artefact personas can aid the design process and impact the overall feel of the design.

User Personas

A user persona is a fictional user that represents a real user and their aims. There can be more than just a primary persona, a designer should create a core user and a fringe user, by doing so they can mainly cater to the core user but also include the fringe user in their design decisions.  Through creating user personas a designer can design with specific goals and ensure that their target audience is engaged with the content and explore the content with ease. They can create a mental model to put themselves in the persona’s position and consider what the persona wants to do when they interact with the design. This allows the designer to determine whether the flow of the interaction is suited to the core user.

Below is an example of a user persona:

 

ExPersona_Jill

[Jill Anderson user persona]. (n.d.). Retrieved May 7, 2017, from http://www.keepitusable.com/blog/?tag=persona

Creating a user persona

When creating a user persona it is important to consider the following:

  • Persona’s goals
  • Persona’s behaviour
  • Persona’s environment
  • Persona’s lifestyle
  • Persona’s past experiences

Artefact Personas

An artefact persona is the personality of the interaction, through creating an artefact persona a design will have a more cohesive and effective look and feel. To create an artefact persona list key words to determine the design strategy and then narrow these words to a select few that represent the interaction. From here a mood board can be made and there is a base in which design decisions can be derived from purposefully.

Most important idea from this pod

The most important idea to take away from this lecture pod is to use both user and artefact personas to orientate a design, as in doing so a design will be more effective, cohesive and successful.