One of my units in university was called mobile application. And in this unit, we had a project to create a mobile app for an ice-cream parlour. So in this article, I am going to discuss my design process and in part 2 I am going to discuss the implementation of the design which you can find here – click here.
To complete this entire project, I used a number of different applications and tools.
Applications and tools used
Here is a list of the different application used to create this project
- Pen and paper
- popapp.in
- Photoshop
- Visual Studio Blend
- Visual Studio 2015
- C#
As this was a piece of coursework we were given a list of requirement the app needs to have. So before I started to design or code the app I sat down and made a list of all the requirements.
- The first is to display all the ice-creams available.
- The second is a calculation on any ice creams bought, based on the type of ice cream and the quantities. The price is calculated per item and includes a 10% discount for customers who have a membership card.
- And lastly, the app should display a summary at the end of each day. The summary should also be written to some form of data storage. The summary must contain –
- The total of all takings for the day
- The average price per sale for the day
- The number of customers that were served that day
- The type of and a total number of ice creams sold for the day
- The number of customers who have a membership card for the day
After creating the list of requirements I then went on and thought about the design process. I needed a way to ensure the final app would be user-friendly. Here is the process I followed.
- Paper Prototyping
- User Testing
- High fidelity
- User Testing
I went through two iterations of this process. I did this because after the user testing of the first high fidelity a few issues arose. I will go into more detail later on.
Paper prototype
To start the design process I created a bunch of paper prototypes.
Why create a paper prototype? Paper prototyping allows you to create a lot of different designs very quickly and easily. This means you’re not spending hours in Photoshop or actually coding up a design you will later throw away.
Here are the paper prototypes I created.
After creating these designs, it was time to move onto step 2 which is user testing.
User Testing
Usability testing is a very important stage. At this stage, I am able to test the design on potential user of the app. During the user testing, I was able to give the user specific tasks to complete such as “add an item to the order”. Throughout the process, I was observing, listening and taking notes about how the user was using the app.
Here are a few things you can learn from conducting user testing –
- Learn if participants are able to complete specified tasks successfully and
- Identify how long it takes to complete specified tasks
- Identify the changes required to improve user performance and satisfaction
To do my user testing I used a web app called Pop app. This app allowed me to upload different images of the app and link different part of the images to other images creating a simple navigation. What I really liked app the web app is that there are android and ios apps for it allowing you to test the app on a mobile device.
Here is a short video of my user testing
High fidelity
After the successful user testing, I started to design the app in Photoshop. The only reason I decided to use photoshop is that I have prior experience of using it and it was already installed on my computer, but you can use whatever software you want to create a detailed design of your app. Here are the designs I created in photoshop.
And here is the user testing for the high fidelity designs.
After completing the user testing a few issues came up these where –
- Issues with the navigation menu and the actual button for it.
- I also wasn’t too happy with the images that I chose for the app.
- I also started to do some for research into the different feature that you can use in windows phone and found an interesting feature that I wanted in my design. But unfortunately, the feature wouldn’t work with the current design.
So I decided to create a new design for the app. So I followed the same pattern as before by creating a paper prototype, high fidelity, and the user testing.
The Re-design
Here are the paper prototypes and the high fidelity.
And here is the user testing for version 2.
So one of the reasons I redesigned the app was because of the issues with the menu button. The issues were that the menu button was in an awkward position to use. The button itself was in the top middle of the screen. Also, the button wasn’t obvious and it didn’t stick out as a navigation button. So in the re-design, I moved the button into the top left of the screen which makes it feel a lot more natural to press. I also changed the button icon. I ended up using the hamburger icon that is becoming popular on mobile devices to represent a menu. I changed this to improve the usability of the app.
The second reason I redesigned the app was that I wasn’t too keen on the images I used. I was using a clip art style images in my first design, but I decided to change these and use actual images. The reason for the change is because I believe it makes the app look more professional.
And finally the main reason I decided to do the re-design is because after I done some research into windows app development I discovered that you could use the users phone theme option in the app meaning if the user wanted a dark or a light theme the design of the app would change also it would use the user’s secondary colour whether it’s pink or yellow.
As you can see from the two image the design is completely adaptable to the user’s choice. I also demonstrate this in the app demonstration video in part 2 of this article.
So the main reason I wanted to add this feature is so the user had control of the colors used in the app and it would, in turn, make them more comfortable using the app.
The completed app looks almost identical to the final designs I created in photoshop. The only difference going from the high fidelity to the actual app is the home page which displays the ice-creams. In the design, the ice-creams are displayed in a grid-like layout, but in the completed app it’s displayed in a list. The main reason for the change was because of the way the Ice-cream data is stored. All the ice-cream information is stored in a single JSON file, and on the main page, I pull the data I need from it, because of this I couldn’t find a way to display it in a grid.
Conclusion
So to conclude from completing the app design I have learned a number of different things which I will continue to use in the future. For example, I always make sure user testing is part of my design process because if I didn’t do any user testing I would have never noticed the error in the design until it was too late. I will also remember to do some research before I start to design the app. This research will be things like, what is the target audience and what features does the desired system have that I could use.