At first I was struggling a great deal, not knowing where to begin. I have never designed an app interface before. I was unfamiliar with the principles and common feature.
Primarily I focused on the stationery, so I started on the app a few weeks later.
While I was focusing on the stationery I was looking on Instagram and Pinterest for inspiration.
On Pinterest I created and FMP folder / board where I saved all stationery and app inspiration. I mentioned this in a previous post.
I also created a folder on Instagram where I saved inspiration.
I began the whole process by going thorough these saved images and creating an overall moodboard. At this stage I was heavily focusing on the patter and overall colourful aesthetics and style to match the stationery. I took a while to realise this won’t work.
Initial Sketches
I made the mistake of not researching enough and not creating much sketches in advance. I created a few, however I was mainly experimenting with layout and patterns digitally. This resulted in some good (well more like okay) work and definitely a good starting point, considering I was new to this type of design. However it also created a bit of an overwhelming and messy/over the top app interface.
Initial thumbnails
These thumbnails show the initial ideas
and experiments for the home page and mission statement. Though I found the design to be bold and ‘catchy’ something about it just didn’t feel quite right. It seemed rather inconsistent and a little too busy and too much. The feedback I received matched this.
Based on the feedback I realised the colours are not only clashing they also don’t match the scheme of the stationery.
I conducted further (but not yet in depth or UI/UX app specific research – that realisation came later) experiments and research in order to make appropriate changes and make the user experience pleasant, happy and in a way calming and consistent in terms of pattern and usabilityin a way that it remains exciting / interesting and somewhat consistent and complimenting the stationery the the mission of my project.
In terms of the menu bar, well I didn’t like it. I was certain I needed to and wanted to change that. I mainly placed that there to give myself an idea and remind myself that part of the screen will be ‘cropped off’ due to the menu bar.
These pages received the best feedback. The colours I used matched the tone of voice. Calming and shooting yet bright and happy. However these colours didn’t match the
stationery or the other thumbnails. As I was designing these pages I didn’t even realise the difference in the tone of voice and the inconsistency. I just had one goal in front of me…produce something…anything…make it relevant to the statement and represent that…add a lot of pattern…add a lot of colour…need to produce something. While I had these thoughts at the back of my mind combined with my inexperience and not thorough enough research prior to me starting on the app resulted in something. But that something still needed a lot of work.
The tone of voice for the article was completely different compared to the ‘home page’ and other thumbnails. Once again I didn’t realise this as I was focusing on trying to create a variation in pattern. I had to reconsider and make a decision about the overall tone of voice and clarify the visual message I want to convey.
I was also told to focus on the user experience a bit more and show pages of what the user experience would be, not just colourful pages.
FEEDBACK
Other than the inconsistent colour scheme, the tone of voice and pattern Shernette pointed out that it would be good to see more user experience features.
Truthfully at first I didn’t really know what was meant by that. The only thing I could think of is for example how to work the menu bar, access profile and use the app. Stuff like that. So I tried to change a few slides, add some proper icons and menu bar and add a profile option as part of the user experience.
SECOND VERSION
Silly me silly me. I was procrastinating for the majority of the time I was making the app interface. I felt so incapable and unmotivated and lost. But I had to force myself and get on with it.
Signage / Icons / Menu bar
I wasn’t feeling too good about these icons and menu bar, however they are already better than the first menu bar I used. As I now looked at a few apps I also
realised that the menu at the top is quite and old format and mainly used in browser. The more modern mobile apps have the menu bar and icons at the bottom and profile access and details at the top. Based on this I made changes to my menu bar too and placed at the bottom of the screen.
After the initial thumbnails and experiments were created I looked at and researched icons that I would feature within the app. I haven’t done this previously, I wanted to create some sort of a layout first. I tried to keep the icons and menu bar simple. The first version of these icons were a little abstract and very minimal. I looked at a few apps (MyFitnessPal, Nike Training, Headspace) and the icons and home bar they used as part of the user experience. I intended to keep the icons simple but adjust them slightly and create a few more.
I was experimenting in Illustrator and I looked at a few examples of ‘generic’ app icons.
All in all it was definitely and improvement from the first version but ultimately still needed a lot of refining.
Thumbnails
In my opinion this updated version is much much better than the previous one. I didn’t like the colour of the menu bar. This was still work in progress, however I wanted to ask for feedback to be sure what to change and how to change.
The colours…the bloody colours!
Shernette pointed it out once again, and she was absolutely right. Inconsistency not only when you look at the stationery but just within the app as well. Two types of blue, too many colours, clashes and overall messy and too much. She also pointed out the colour of the menu bar, I was aware of that.
Shernette also mentioned it would be good to see images and not just boxes where the articles are. She said it’s okay for me to source images, as long as I credit and highlight this.
I was going to do this, however I wanted to focus on the overall app interface and user experience before getting to the articles.
I really made it sound like I only received negative feedback, that is not the case! It got pointed out that I started to get the hang of things and making progress. Just needed to push myself a little harder.
The pattern and the overall feel of the ‘article pages’ still communicated a different message and tone of voice. I haven’t changed anything about the patterns,I couldn’t make myself. These pages got the most positive feedback and I really liked the playful positioning of the patterns. I tried to match the home page and other pages to this, but that wasn’t working out at all and gave up on it very quickly.
For the second version I just enhanced the colours so at least in terms of vibrance it would match the other designs.
I began a more thorough research. I was reading into UX/UI design principles. Rules with regards to colour and font, positioning and overall experience.