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.

Advertisements

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

 

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

 

Making Toast Mini Site

After creating a text description, flow chart and storyboard I continue to plan out my making toast interactive on paper through creating UI flow, a sitemap and sketching out an interface design.

UI flows

UI flows are useful in mapping out a user’s journey through an interactive and planning out how you will design the interactives navigation. Based on the storyboard I produced previously here is my making toast UI flow below, it features the buttons in the interface that the user clicks through to get through each step.

 

Making toast ui flow

UI flowchart for making toast

 

Extending content

After creating UI flows it is easier to see where you can extend the content of the interaction and therefore enhance the user’s experience. As shown below I have been able to extend the user’s experience by creating sections such as “What type of bread?”, “The toastiness scale”, “Topping ideas” and “Don’t like the result”. These sections can be accessed when the user reaches a corresponding step to the extended content.

 

extended ui flow

UI flowchart for making toast with extended content

 

Navigation and Sitemap

Once I completed the UI flow I was then able to create a list of primary and secondary navigational elements within the interface. The primary elements include the main elements that the user clicks through to find out how to make toast, whilst the secondary elements are the elements that users click through to reach extended content.

Primary Elements

  • Let’s Begin
  • Next
  • Back
  • Finish

Secondary Elements

  • What type of bread
  • The toastiness scale
  • Topping ideas
  • Don’t like the result

Listing the primary and secondary elements makes it easier to produce a sitemap as shown below.

 

Making toast sitemap

My sitemap for making toast

 

Interface Design

Once a sitemap is created an interface can be designed. As shown below I have created a sketch of my interface to map out where all my elements will be located and so I can have a clearer idea of what the interface will look like for the user.

 

Making toast interface design

My interface design for making toast

 

Whilst sketching out an interface design I was able to see areas of the interaction that could be improved e.g. I created a bar showing the user where they were up to in the process of making toast.

After planning out all these steps on paper I have gained a better understanding of what the interaction will look like and how it will work and therefore I am then ready to move on to create a digital mock up.

Storyboarding

Although storyboards are most commonly used for films and animations, they are quite useful in the process of designing interactions. The storyboard allows the designer to express ideas and display sequences in a visual manner, this is helpful to a designer as they can organise their design on paper before committing to a design on screen.

Shown below is an example of storyboarding for an interaction on making toast.

 

Making toast storyboard@2x

Storyboard I created on how to make toast

 

 

Flowcharts and Text Descriptions

When trying to understand or explain a process creating text descriptions and flowcharts are quite helpful as they make you think in detail about a process and make you think sequentially.

Text Descriptions

Text descriptions allow you to list the steps for a process in as much detail as you need

e.g. How to make toast

  1. Connect the toaster into a power point and turn it on
  2. Set the the toaster to your desired setting
  3. Take 1 or 2 slices of bread and insert into each of the slots on the toaster
  4. Pull down the lever underneath the slots in which you inserted the toast
  5. Wait for the toast to pop out of the slots
  6. Check the toast to see if it is to your likings and either discard the toast, toast again or continue to the next step
  7. Take the toast out of the toaster and add desired toppings

Flowcharts

Before making a flow chart it is best to write out a text description so that you have a reference of all necessary steps. A flow chart can help you communicate a process and it can also help you identify any issues or loops in your instructions.

How to make toast (2 slice toaster) 

 

 

flowchart-for-making-toast

My flowchart created for how to make toast