Tech as a Force for Good

Welcome to our website!

Our App competition invites you to create an app that can bring value to people and those in your community.

Some of the themes we invite you to consider building an app for are:

  • Conservation

  • Mindfulness

  • Nature

  • Homelessness

  • Hunger

  • Poverty

  • Climate Change

  • Racial Discrimination

  • Poverty

Below you will find instructions showing you how to create a prototype for an App in Miro.

It is actually quite simple!!

What is UX Design?

UX Design stands for User Experience Design.

It is something that is done with every good product and each great service, unrelated to the IT. However, today UX courses put a heavy focus on software design & development.

In a nutshell, UX is all about solving problems for the end user, but it is not just about usability or functionality, it is also about how your users feel when they’re using your product.

Great products both solve user problems, and generate positive emotions - this about companies like Samsung and Apple and the brand loyalty they manage to create!

Three types of design:

There are 3 main types of product design, which all work together, and it is important to give them all equal attention from the start of your UX process.

  1. Aesthetic design - determines what a product looks like, what it’s look say about the brand, and it gives the product its personality.

  2. Functional design - tells us what is the product built to do, defines the engineering of the product, and gives it its capabilities.

  3. Experience design - less familiar to people and easier to overlook, this type of design determines what it feels like to use a product..

The UX process:

The UX process starts with research. You use research to determine there is a market need for your product, are there any competitors in the market, and if there are what can you improve upon based on what is already available.

There are many different research techniques such as surveys, focus groups, interviews, competitor benchmarking, card sorting, observational studies… Whichever ones you choose to go with, it is important to remember you will learn much more about your users from observing them while they use your product, then you will from asking them about it!

After the research you go into defining your exact scope and requirements, and then you get into the design loop!

Once you are fully happy with your design phase, you give your prototype to the developers to build and test the final product, before shipping it to customers.

Prototypes:

Prototypes simulate a working product & the interactive experience. They allow you to test your idea with users, improve your design, and identify any issues, without having to invest a lot of time and money into actually building the product first.

Prototypes come in 3 different fidelities:

  1. Low fidelity - usually done with a pen & paper, quick and easy to product, but far removed from the actual user experience.

  2. Medium fidelity - done using software, provide a more detailed image, but still don’t have full functionality or the level of detail the real product would contain.

  3. High fidelity - look and feel like the real product, allow for proper user testing, and provide the most insights.

Wireframes:

Wireframes are building blocks for medium fidelity prototypes. They represent the layout and functionality of the screens, and quickly convey the hierarchy of the elements.

Wireframes are typically done in greyscale (black and white), and they need to include text labels and annotations which describe each screen so that there is a clear communication on what each element is, as well as what it does.

Wireframes are important milestones in the UX design process, and can be used towards getting the stakeholder sign-off.

Working with Miro:

Miro is an online collaborative whiteboard platform which can be used for a wide variety of purposes. You can sign up for free and avail of a number of pre-made templates which will make creating your wireframes and sharing them with people around you easy & simple.

Signing up:

  • Step 1:

    Open your browser and go to www.miro.com. On the login screen, click on a button “Sign up free ->“. Despite the fact the login box is suggesting you use your work email, you can use your personal email, or sign in with Google or Facebook if you wish.

  • Step 2:

    After you enter your email, you will be prompted to fill in a few personal details. Once you have set-up your password & verified your email, you can then set up your team - if you already have a name for your app, that would be a great team name to use.

  • Step 3:

    If you are working as a part of the team, in the next step you can invite your teammates to collaborate. Otherwise, skip for now. On the next screen select “I want to start from scratch“. This will open a board for you and you can search for the App Wireframe template shown below:

Using an app template in Miro: