Design Journal Bronte Society app by sheroz khan

This design page is the thought process and journey which I embarked on to the create the concept of 'Bronte Society App'. The reason this app is being designed is due to a need for space as explained in the previous account and most importantly to meet the future vision of the Bronte Society which is to

"transition into the digitalised world we are becoming a part of"

Key objectives of this app:

  1. Provide a quicker access to a deeper understanding of the Bronte Society universal offerings i.e 'our history', 'shop' or the exhibitions.
  2. Deepen the interaction of the users/ visitors at the museum to the artefacts.
  3. Present a clear design language which could be incorporated/ translated to web and print forms for future development. This is not a re-branding, rather a platform from which one can develop other products from.

inspiration

In the mobile app world there have been two clear design movements; Skeuomorphism and Flat Design.

Skeuomorphism is to preserve, to keep design looking like its real self. Whether that's cracks in pottery or rivets in metal, its all part of the process and process is beautiful. Where translated into the digital world things get a little wierd, so notes are laid like their in a book and textured like recycled paper. It just looks a bit much and rather fake.

Apple iBooks store

Flat Design is, however, extremely trendy today. In simple terms it cuts out all the crap. One is left with the simple content. Below is a contextual example, an iPhone with the Skeuomorph interface next to which is the new flat interface. Flat Design consists of simple, bold colours and geometry.

It does come in many iterations and trends tend to widen the language.

The following few paragraphs will talk of apps from tech giants which are created by thousands of UI & UX designers research. These apps are chosen as these are trend setting, market leading apps.

Instagram

A clean-line, simple, monochromatic and sophisticated user interface style has been addressed to the Instagram app. On the left can be seen the traditional, widely recognisable Instagram interface with the typical of apps header and footer navigation. The updated UI uses white as its primary colour and black stream lined icons.

An official Instagram photograph with the old interface side by side of the new interface.

Uber

The Uber app uses a card system. The idea is to slot information in these rectangle that sit over the background and can be pushed off the main navigation to delete or hide it. The main page in this instance is the map in the back over which different information cards appear as seen in the video below. This is am emerging style which moves away from solid pages like the previous iteration of Uber which was in its skeuomorph state. One remains on the same page, its just a change of information. This was first seen by Google in its search engine now incorporated across its range of apps.

Old Uber App
Trainline

This app is interesting as it takes conventions and simply skins them. We understand the standard protocol of mobile interface designs are the header and footer permanent rows. It takes that, but just like Intsgram they have kept a simple flat design, but Trainline uses bold colours to stop it from being bland. UI design is extremely important as the previous iteration as seen in the first screenshot where less than a million users downloaded the app. Since updating it become the best app of 2015 in Apples App Store with now over 9.4 million downloads.

Little details like a train ticket like form as a border to the information just adds a level of depth which reflects quality and effort. Details like this where possible it will be incorporated In this update Trainline updated their branding and across all products they reflect the same identity. The app and advert seem well connected and associated.

Snapchat

Snapchat a globally established and the most popular messaging app ever to be created is probably one of the most simplistic apps I have experienced. Simple, colourful, flat design just like the rest. Where Snapchat stands out is from its user experience point. It breaks away from convention though it has the same four section layout like Instagram, Twitter and Trainline. Instead of four icons it uses a left and right swipe, below we can see its layout. Had it used the conventional approach it would look like the mock-up I created below this. The app Bronte will have will also a simple app, it will have rather a smaller segment of information of deal this. This means I could be more creative with its layout and how users would interact with the app.

Snapchat (2016) Navigation
mock-up

Kickstarter

I could write for hours about beautifully and simply formed experiences and interfaces. Airbnb for example has a extremely simple and understandable interface which is by far the most aesthetically pleasing in its sign up process, but sometimes apps take a step back in order to a step forward.

Kickstarter had this beautiful app where when one scrolls vertically he goes through different categories i.e fashion, design, comic and art. And, if one scrolls horizontally one is scrolling through different projects. It maximises the space and removes unnecessary icons, it looks unconventional and cool.

The new update which is are the first two screenshots take a conventional approach to design with icons and sections. It seems like they have gone a step back in terms of user experience design. After hours and hours of looking at this I find actually the problem is not how it can look. As designs can looks more complex, but subconsciously be easier to function. The Kickstarter app is all about crowd funding projects. Users should be able to get to projects quickly and efficiently. Therefore, more makes sense. I see less and less of design, but in this instance is makes perfect sense to add. Had I not experienced this process I would have ended up with a pleasant UI with a terrible UX.

AirBnb
Kickstarter Updated
Kickstarter old model
Game Centre + Watch App

I have an iPhone and I go through every single app because i'm wierd. That's besides the point, I find the Watch app really interesting. These little bubbles that can move around and zoom in and out are kind of cool. I've never seen an app that uses these little bubbles as icons and one being able to navigate through an app. It would be different, fun and well simple as each bubble could possibly be single pages where once one has finished they pinch out of the bubble and into another. The interface the two apps, the Watch app and Game Centre have, are really beautiful. It is something in further development I will play with.

Apple Watch app and Apple Game Centre app.

Material Design by Google

It is visual language used by Google to design the interfaces of their product line. Based upon Flat Design it uses bold, simple geometry. Motion and flat shadowing are the key principles that set it apart from other iterations of Flat Design.

Material Design illustrations

They call it Material Design because it plays with materials.Texture, shadowing and depth of colour are key to mastering the pristine quality of Material Design aesthetics.

IOS 10 by Apple

After the death of Steve Jobs the CEO of Apple and the 2012 Apple Maps issue Scott Forstall the Head of Software at Apple was fired the responsibility of user interface design came to Head of Design Jonathan Ive. He had it re-designed in Flat Design. The latest iteration, iOS 10, as pictured below is all about animation and a card system. Smooth animations and pop ups are all cool, but the key change is the rounded little rectangles which appear in every app of Apples'. The idea borrowed from Google is all about layering.

UI today is all about simple apps with a main homepage where information appears in these card like notification form.

Apple's approach to materialising design is to use blur, it's Apples' way of saying foreground and background.

Augmented reality

Augmented reality is viewing a live stream view of your physical environment intervened/ enhanced by computer-generated input i.e video overlay.

Augmented reality has been in mainstream university research for over a decade. The consumer hype rose over the summer of 2016 with the release of Pokemon Go. A free app by Pokemon where users walk around in real time it tracks ones gps points and uses computer-generated graphics i.e the pokemon and places it in real time on the phone screen where one can play/ interact with it.

Pokemon Go

The AR app market is limited at the moment. With huge potential and endless opportunities to an audience of millions it does come at quite a high cost which most app store vendors cannot afford.

The Bronte Parsonage Museum could use Augmented reality in so many different ways through an app:

  • Artefacts could be 3d scanned and placed into the virtual canvas as physical space inside the museum is limited
  • Virtual exhibition's could be held around the Haworth area surrounding the museum. Marquees could be used as exhibition halls with AR events.
  • Poems and characters could be contextually integrated i.e one could see scenes being acted around the Withering Heights house using characters from the book.

This app has always been about deepening the interaction of the users to the artefacts at the museum as there is limited space and potential of physical interactions. Therefore, some of these ideas do not befit the brief of this project.

intermission

At this point we understand an app is being ideated.

User interface & user experience have been researched.

Key design languages have been explored.

The next stage from here is to:

  • Understand the user group, their demographics and psychographics
  • User interaction- explore further options closely relating to the user group i.e AR has been explored.
  • Study Bronte aesthetics and form a generic design language which they potentially follow
  • Study design trends and details and work them into concepts

User Group

Museum Visitors are the audience for the app. The audience of the Bronte Society is different. They have a larger base operating in several countries with a wide range of nationalities. They are not an interest as this specific app model focuses on enhancing the spatial experience within the museum locality.

Fans of Bronte generally fall into families and institutions.

The primary audience make 36% of all visitors. If families were included as half of them being adults there could be a 7.5% increase creating a total audience of just short of 45% of all visitors. If a small portion of international and other visitors were to use the app then over half the visitors would be using the app.

Psychography

The primary (institution's) user group are likely to own a smartphone and are expected to be tech savvy.

They would have a huge interest and desire to use the app.

Secondary school through to university students would find it hugely beneficial to their studies to have a educational app rather than just an interactive app.

From the age of 12 through to early thirties', from students to novelists. This app needs to appeal to this audience. A level of sophistication, but also an easy to understand and navigation would be extremely important considering the age range.

All the research and data collated was through observation, informal interviews and discussions with the Bronte staff including members of the society.

Virtual Reality / Augmented Virtuality

Due to the wider audience gamut that are being catered for, further development in possible interaction forms is required. AR would be totally suitable for the age range, but VR i feel needs to be considered.

VR or virtual reality is being in a virtual world. A headset which would cover your eyes from the real world would take one into a virtual world. That would be a long-shot to be considered for this project. That does not mean we could not explore other possibilities in the mixed reality sector like augmented virtuality. It is a level between virtual reality and augmented reality. It is just like augmented reality with virtual aspects.

Considering the small interior of the museum and its cobbled surrounding as a designer i would feel extremely uncomfortable and rather neglecting of my responsibility of safety.

It's an old, stone village with no railings or other safety features and having people walking around over those slippery cobbled floors in virtual senses would be inappropriate, therefore, it is being ruled out.

Educational/ Museum Apps

The user group and their purpose of visit being considered it is important for this circumstance to create an educational platform to feed off. The Canadian Museum of Civilisation as seen in the first screenshot provide audio tours around the museum. It is highly popular and effective.

Canadian Museum of Civilisation

The Guggenheim app is not only known for its distinctive style, but its innovation. It allows users through the app to select specific rooms of different floors to read of specific exhibitions.

Guggenheim App

The MET app has a blog like style where the app updates hourly providing a fresh stream of news about art and offering on the day. They present short, informational texts every so often which is contextually relevant obviously.

Guggenheim App & MET App

Early Concepts

This model examines virtual reality integration within the museum would function. In this particular model circles are created on the images the camera produces. Each circled area is an information tab. Once clicked it opens into a contextual brief in a card like system. Aesthetically the first image looks fine, but the second image looks really out-dated in style and the three lined menu icon looks awkward.

Concept 1

In this model what we see is the phone again in a virtual environment, in this instance virtual enhancements are formed. On Charlotte Bronte's costume her head can appear. Many different objects can appear in different locations which otherwise could not be placed. There's a level of enjoyment in discovering and one can spin da whole day wandering their phone's around and finding artefacts or enhancements to artefacts.

Concept 2

Bronte Design Language

The Bronte design language consists of this green tone played with white. In Terms of font choice, that widely varies from print to web and pages of the site which differ in fonts. I feel the language is quite basic and requires a graphical rebranding. Therefore, the concept i would be presenting would differ from this slightly basic and out-dated avenue.

As there is no clear direction for the language which is to followed and it is too early of a stage to create details for the concept, items like the icon would be created after initial client meeting where aesthetic decisions would be made. I have designed a logo based upon the icons of previously discussed apps, hugely inspired by Instagram. I used the existing logo, turned it white and used the background from the cover of a version of Wuthering heights as it is one of the most popular of the Brointe books and it also is to some degree in keeping with the existing colour scheme as we do want to promote the prestigious feel of the current scheme.

Bronte Society Website

Final Concept

The left image represents the homepage.These small circles can be expanded by pinch to zoom. Opening these opens a fresh feed which would be regularly updated. Examples would be podcasts or local news.

The middle image shows a zoomed in example of the homepage where the background becomes blurred and it becomes the key feature.

The final icon of the footer represents settings and options. Here one would access the usual i.e user area, Bronte history and access to the shop.

The final image shows another iteration of the two concepts previously explained. The camera icon which takes one onto this screen activates both concepts previously explored.

The reason a monochromatic theme has not been applied is as this would attract the younger, larger audience group of secondary school students. the UI has not been fully explored in this concept. It is yet in its early days of development.

Note:

This is a summary, the journey shows a concentration of the process. This page is to some degree curated as at any given point one does not consider a single thought, but rather many different aspects of the product. There is so much i thought, but i have not down what i think, but expressed the glimpse of what i feel so you as the reader can fill in the blanks and really think like me. Some include train tickets and leaflets, but that is lame and i visited so much and so widely on the net i don't need location based evidence to show i've done research. Neither has any print material influenced my thought processs which is why i have not included any. Coming from an Industrial Design background UI, UX and 'journals' mean nothing to me, so this process has really opened my mind to new possibilities.

Reading list:

Please refer to the concept proposal document, the reading list is attached to the end of it.

Credits:

Created with images by FirmBee - "ux prototyping design" • baldiri - "wireframe, ipad, pencil & notebook" • fancycrave1 - "office home glasses" • baldiri - "ipad wireframe" • Tim Green aka atoach - "Signpost" • Man Alive! - "Bronte Parsonage Museum"

Made with Adobe Slate

Make your words and images move.

Get Slate

Report Abuse

If you feel that this video content violates the Adobe Terms of Use, you may report this content by filling out this quick form.

To report a Copyright Violation, please follow Section 17 in the Terms of Use.