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 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.

Instructional design

Lecture pod 4 explores instructional design and how this relates to and impacts interactive design. When using interactive design to instruct a user the interactive will be more effective if principles of instructional design are applied as this creates an easy experience for the user.

When designing instructions it is important to keep the instruction simplified and to not overload the user’s memory. Keeping instructions simplified is important as it allows for isolation of key elements and therefore does not confuse the user with unnecessary elements e.g. a photo of a step has a lot of information and is harder to interpret.  Another thing to keep in mind when designing instructions is to not overload the user’s memory e.g if legends are used or the user has to refer to a separate image they must remember multiple elements to gain a sense of understanding of the instruction. A way in which this memory overload can be avoided is simplifying and keeping relevant information together e.g. keep images close to the relevant text.

 

Screen Shot 2016-09-27 at 10.41.04 pm

Instructional design I have created illustrating how to make origami balloons 

 

Most important idea from this pod

Creating instructional design through interactive media does have its limitations such as screen size and screen resolution but the way in which it offers layers and time interaction creates endless opportunities.

UI Screen Designs

After having worked through descriptions, flowcharts, storyboarding and UI charts a design can be transferred from paper to screen.

Below is a mock up of my ‘Making Toast Interactive’, created using Adobe Illustrator.

First I created the grid and basic wire framing within the outlines of the media the interactive is designed for, in this case the iPad.

 

Screen Shot 2017-03-13 at 9.34.04 am

Basic wireframing for making toast interactive

 

Once the wire framing was in place I added in the main content.

How To Make Toast Ipad content

Making toast interface with main content

 

After the content had been added I created the interactive elements such as the buttons and the progress bar.

 

Screen Shot 2017-03-13 at 9.35.15 am

Making toast interactive with buttons and progress bar

 

 

The next layer in my illustrator file included the highlights, the highlights in this interaction occur when the user touches certain elements. This is illustrated bellow with a bold yellow.

 

Screen Shot 2017-03-13 at 12.10.41 pm

Making toast interactive with brighter yellow highlights

 

The last layer in my illustrated mock-up was a gestures layer, showing the gestures used to navigate through the content.

 

screen-shot-2017-03-13-at-9-35-59-am.png

Making toast interactive with gestures