5 steps for mobile design

We all know that mobile has taken over the entire technology industry. With more users moving on to a smaller screen, we need to figure out how to design effectively for a pleasant user experience from the get-go. Design should be clean, delightful and usable. Whilst working for an app development software company, it is important to remember these steps to achieve this:

1. Create your process and stick to it.

Good design doesn’t just happen from your mind to the computer screen. It’s also about collaborating with mobile app developers to see if your designs can be executed. You might be able to design a beautiful interface but without the green light from the developers, your idea will not be conceivable. Communicate your ideas early with your team so that there are no obstructions later on. It is also important to let the developers know to code for iOS app development or Android app development.

Every designer has a favourite part in the design process. Create your process from start to finish, highlighting all the necessary steps. If it helps you can create a playbook or a PowerPoint of each step of your design process. You would be able to share this with clients or your colleagues to help them understand your working style. It could be a chance for them to learn a few things!

This is also the part where we would have a kick off meeting. It’s an opportunity to ask your client about their business and understand their vision and goals. Always be prepared for what you’re going to ask, and ask the right questions! You should understand what you are designing, who are the users and what are the business goals. Bonus points if you can align the user and business goals.

1. Style guides, site maps and user profiles

Deciding the style of your designs is important as it’s something users will pick up on first. Using all your resources such as Behance, Dribbble and Pinterest, it’s important to maximise your platforms to give you the most inspiration. These platforms will help you gather ideas and build up your aesthetics. Create mood boards, colour swatches and include imagery that you think would relate. You can even draw up designs on paper if it helps. Even if you don’t use what you created, it’s good to keep for any future projects. When you’ve gathered all your ideas, start creating a mind map of different styles. You can share these with your client, so you can have feedback on what to include for later.

Another great way to showcase your style guides is to create a style scape. A style scape is a design deliverable that shows all of the stylistic elements of your product. It’s a rectangular board that shows an idea from start to finish. You would want to show the basis of your idea on the left-hand side and how it progresses to the mock-up you have designed on the right side. Some elements to include on this scape are colour schemes, typography, icons, imagery, wire-frames and mock-ups. Style scapes require deep research and understanding of your current target audience. This is an interactive way and a different approach to present your ideas to clients. It’s also good to give a few options. Make 3 concepts that are mild, moderate and extreme. This is so that your client can understand their own vision better, or pick out ideas.

Sitemaps will help you organise your screens into a chronological process. The advantage of this is that errors can be spotted early on. You can see where screens are missing or aren’t even needed. In other words, a visualised user flow makes it easier to identify which steps should be improved or redesigned when a user interacts with your product.

It’s important to always include a minimum of 3 profiles to work around. Having a few user types helps you design for the user needs and solve daily problems that users face.  Create a story for the user types. How does your product fit around their lives? We want to keep this theory in mind: As a < type of user >, I want < some goal > so that < some reason >. This theory reinforces your goals and how they match with the user goals. We want the user to have a reason to use our service and to keep coming back. This is what delightful means in terms of design.

Don’t forget that the technical ability of the user should be noted as we should pay attention to how simple or complex we should make our designs. If users are familiar with using technology, we can make our designs feature full. (In moderation) Likewise, if our user has limited technical ability the simpler we design the better. The goal here is to make our product or service user-friendly and human centred.

1. Sketching and Wireframes

These are the most crucial steps to designing. If you don’t have a starting point, how can you build something with no guidelines? With sketching, we can alter our drawings as we go. Low fidelity wire-frames will help draft your ideas so you can visualise your product in the long run. Share these sketches with those who work alongside you.

With wire-framing, we can decide if we want to design for iOS or Android. The interface for these can be decided by creating high fidelity wire-frames so we can follow the house styles. Adobe XD, Balsamiq or Axure are the best programs to use for high fidelity wire-frames. Remember to make a copy of your design if you’re making a change or can’t decide on an element. You can make side by side comparisons and decide which one makes more sense. Ultimately we want to avoid going backwards as this extends the initial time estimation for your product. It is better to create wire-frames at the earliest as possible because this saves time and money further down the line.

1. Design

It’s time to do what you do best. Using a program like Adobe XD, Firework or Sketch, we can build from our wire-frames. At this point, it’s important to follow your guidelines and not try anything new. Never forget that there are screens that most designers would forget to make! These screens include error messages, loading and success messages. These are often overlooked. To be a successful designer, make sure to include these screens as they provide small value to your product.

This process can take a while depending on how big your project is. By balancing out your workload into measurable sections, your process will be efficient and not put to waste. Ideally, you want to work with the agile scrum development in motion as this helps your whole team rapidly deliver a successful project.

1. Prototyping and testing

Here your designs are put into motion! Using Adobe XDs prototyping tool, it allows you to see how each screen links. You can alter the transition type and time for the movement between screens. Alternatively, InVision also provides these features. It is also possible to share these prototypes with your client as it’s better to get them involved with their product. Note down the changes you need to make to ameliorate your process. Align and refer to your sitemap. Make sure that your prototype matches your sitemap.

When testing your app, it’s important at this stage not to finalise any changes just yet we might need to make changes if testing doesn’t turn out. We need to test on a group of selected users that match our user base. When testing with the users, assess those who are using your app. Ask yourself questions like how are they feeling when interacting with your product or service? How are they interacting with it? What are they struggling with? What do they love about it? A way to help you put these questions to use is to set basic tasks to follow. Make sure to keep a note of what these users are facing for reference later as this will help you make the necessary changes.

After the users have finished testing, hold an interview to discuss what went well and what they found difficult. Keep a record of the answers. You can interview as a focus group, do a voice recording, make a video. It doesn’t matter how you record the responses, it will be a useful aid when it comes to implementing changes. After making the changes, go back to test until your designs are the best they can be.

Let’s be honest, you won’t ever finish a design. There will always be updates to make or implementations to make here and there. The design is seen as an easy task but there is more effort that goes into it that you do not see. Every designer has their own style, but by using these core steps, your approach to designing for mobile will be human centred. That’s what we want to achieve.

Sponsor Ads

• Ad Space Available - Rent it Now!

Report this Page

Created on Jul 18th 2018 06:57. Viewed 431 times.

Share on APSense

Comments