The Book Cafe

RSA Project.





Project Overview

During my first semester of my second year, I undertook an individual project from the Royal Society of Arts. They gave us nine briefs to choose from and we then design a solution for the chosen brief. I chose brief five, 'amplifying connections' which asks, 'how might we amplify the potential of entertainment technology to connect people to one another from the comfort and safety of home?' I decided to choose this brief because I had the most confidence in creating ideas for the solution and brief five sparked the most interest in me. I struggled to find any interest when looking at the other briefs available.







Project Ideas and Finalising my Idea:

mindmap

After I had decided on my brief, I started to brainstorm ideas by creating mindmaps to help me visualise my thought process. I came up with three initial ideas, my first idea was to create an app with a variety of recipes that users can cook online with friends or family in multiple households. They could do this through video chat and would be able to follow along the same recipe. The users could also share recipes online and post images of their meals. My second idea was to create an app for mobile, desktop and tv that allows users to watch shows or films with each other and can also speak to one another. This idea is similar to Disney+ groupwatch feature, however, this does not include the ability to speak to one another. My third idea was to create another app where users can read along books with other users such as family members or friends through the microphone of their phone or tablet. The users would be able to see what other friends are reading with their loved ones, and can also post reviews on the app. The app would include a video call feature so that you can see the other user you are reading with and can communicate further.

mindmap2

After some further research on what is currently available on the market, I decided to go with my reading application idea. This idea made me the most excited to carry on with as I am a big fan of reading and it seemed like an enjoyable prototype to make. I made a second mindmap that included the overall idea, target audience, app features and a list of app name ideas that I came up with. Creating a mindmap allowed me to visualise my idea and keep all of the key information in one place. Once I had my idea finalised, I started my research into other book apps that are available on app stores at the moment and to clarify that my concept idea was not already created. I then did further research into UX/UI design inspiration for my wireframes.

After brainstorming app name ideas, I decided on calling the app, 'The Book Cafe.' This is because my concept is focused on reading, and I decided on the word cafe as these are popular places for individuals to go and read books or meet up with friends/family, which I think reflects the main feature of my app.




Reading/Book App Research

GoodReads App:

GoodReads is a mobile application and website for book readers to mainly post reviews of books and create bookshelves of books to read or of books that they have read. When looking at the GoodReads app and website, I noticed that they have a minimalistic neutral colour scheme of beiges, white and black. This is shown throughout their logo and app/website with the colour of the background being beige and white too. They have pops of colour throughout their platforms of book covers as this helps the books stand out against a plain background and are easily noticeable.For font choices, they use all San serif fonts which makes all text very easy to read and makes it suitable for all ages. On their logo, they have made the second word of their brand name slightly bold, this helps it stands out and can show the user that this brand is based on reading and books.




goodreadslogo

unwind2

(Engl, 2020)

goodreadsapp



Throughout their app and website, they have a variety of features that the user can use. The platforms allow you to create your own bookshelves such as creating a favourites bookshelf, books to read bookshelf and bookshelf of books the user has already read. Goodreads allows you to post reviews and opinions of books that the user has read as well as setting a reading goal for the current year. Once the user starts to add books to their bookshelves, they will be able to receive book recommendations. GoodReads also has a ‘browse’ section. This gives the user the chance to see new book releases, access tons of lists that have been created by GoodReads. These lists range from ‘best books ever’, ‘best books of 2022’ and ‘new horror books’. The platform allows users to follow their friends/family who also have accounts and they can even follow fellow authors and content creators who are known for book content online. Furthermore, when looking at this app/website, I saw that they have a discussions page, where users can discuss current book topics and authors. Users are even able to send direct messages to other individuals. Lastly, GoodReads has a community page, where users can join a large range of groups that may cater to their book habits and favourite genres or authors. At this current time, GoodReads is the largest site and app for readers and for book recommendations, with over 90 million users.



Libby by Overdrive App:

This reading app lets you sign in with your local library and access their huge variety of books, magazines, eBooks from your device for free. The app allows you to create shelves for different books and you are able to see which books the user has on loan or hold from their library. The app also has different sections for genres and other sections such as bestsellers or ‘hidden gems’. They even offer book recommendations that are recommended by the app’s librarians. Libby by overdrive also allows users to have access to the app offline so users don’t need a Wi-Fi connection or data. When reading a book on the app, it gives the options to change the books font size, layout, and lighting to cater to everyone’s reading needs. Users can also add bookmarks to pages, as well as creating notes and highlighting words. As the app also allows users to play audio books, it gives the options to change the pace of the audio, users can skip forward to back and even set a sleep timer until the end of a chapter or a certain number of minutes before. This app is the third most popular reading app on the apple app store.




goodreadslogo

libbyapp

libbyapp







UX & UI Research

Before starting my own UI designs, I wanted to research what other designers have come up with when designing a reading or book app. For this, I decided to go onto dribbble.com to find inspiration and ideas from the UI designs I found on the website.



ux1

(Mohammadi Nia, 2021)I first found this design that I liked. It is very minimal which makes it seem neat and tidy for the user. The design makes it straightforward to navigate and there are no harsh colours clashing. The simple colour scheme makes it feel as if you are reading an actual book, with the off-white/beige background and black text. I like how the word the user is listening to is highlighted which will make it easier to the user to follow along and see where they are in the book.

ux2

(Ruslandi, 2021)I found a second design on Dribble with a use of a lot of illustrations. This stuck out to me as the illustrations add colour and flow to the prototype. It engages the user through their journey. When researching, I found that illustrations are important to use when it comes to user interface design. According to SecretStashe(Staats, 2018), illustrations help to get the main point across faster than text. Adding illustrations makes the process more engaging and easier to understand, as they help to explain the concept. They can also improve the user experience that the app or site delivers even when they’re not used to fulfil a specific action. For example, the use of illustrations can delight users as they create a specific that the user feels upon initial interaction.

goodreadsapp

(Nikitin, 2021) While researching designs, I discovered this concept for an audio book app. The widget design caught my eye as it seperates the content from each other visibally without being too bold. The use of the serif font also replicates the font found in books, which fits the app perfectly and contrasts with the san serif font. The designer also designed a shelf so that the books look as if they are standing on a shelf, which makes the app feel more personal. This is because book readers usually keep their physical book copies on shelves, and this concept allows book readers to also have a shelf for their books on their device.

Branding

Colour Scheme and Fonts



Once I decided on my app name I then went on to choosing my branding colours. To help me decide on a colour scheme, I researched 'cosy colour palettes' on Google. I wanted a cosy colour scheme to fit my theme of reading, as it is a relaxing and chill hobby to do. I found many pinterest boards(Alexandra, 2020) which gave me inspiration into what choice of colours to include and I then went onto a website called colorhunt.co to find more inspiration as this website had specific colour schemes to look through such as autumn themed or pastel. This website is where I narrowed down my choices that I found and put them together to see which one I preferred.




Final Branding Guidelines



This is my final colour palette that I decided on. I went with a green and neutral theme as it's calming and minimalistic. When looking at reading apps, I noticed that they did not include too much colour and were kept very neutral. I wanted to stay with this theme so that the prototype is not too overpowerful with the colours which is why I chose the pastel shades of green. I also wanted to use the three shades of cream and brown as this reflects the cafe aspect of the app name.

For fonts, I decided on a serif font called 'Yeseva One' and a san serif font called 'Quicksand Light'. I chose Yeseva One because it looks elegant and it stands out against the san serif font. It clearly seperates the different bodies of text used in my prototype and also mimics fonts used in books. I chose Quicksand Light because it is minimal and easy to read. When researching which fonts to use, I found that san serif fonts are common to use when it comes to user interface design, because they give a feeling of friendliness, according to UI/UX DesignGuide.(Singh, 2020)

Wireframes & Sitemaps







Logo Design

...
...




I started off with sketching out some simple logo ideas so that I could physically see my ideas that I had thought of. The left image shows the main logos that I had thought of. I wanted to keep it minimal as I found this was a common design choice when researching other reading apps, such as GoodReads. The right image shows my ideas for the favicon that will be used as the app icon. I thought it would be important to include a book and a coffee cup/hot drink, as this reflects the name of the app with graphics.



mindmap





I came up with four designs that I could choose from for the final logo. I wanted each design to have a fairly different design to it so there is a variety to choose from. When presenting these designs, I recieved positive feedback from peers and lecturers, saying that they clearly fit to the chosen aesthetic, and that my chosen font reflects the font used in books.




Final Branding Guidelines



This is the chosen logo design. I decided on this logo because I liked the layout and simplicity of it, with no graphics, just text. It fit well within my wireframes and it allows me to use a lot of white space with it. I also recieved the most positive feedback with this logo from my peers.

Final Favicon Design



For the favicon, I decided on the book drawing with a coffee mug on top. I thought that this reflected the brand identity in the most effective way, and looks aesthetically pleasing to the users. I designed this with Procreate on my Ipad, as I find this the easiest to draw digitally with.

Prototype

Design Changes

goodreadslogo

libbyapp

libbyapp

goodreadslogo

libbyapp

libbyapp

When recieving feedback from my lecturer, it was mentioned that the text used within the bookshelf feature was quite small. After evaluating this, I decided to make the text slightly bigger and only have two books shown at a time, so that it will be easier to the user to be able to read what is on their bookshelf. I moved the 'favourite book' feature so that the user will only need to press the heart next to the book's title to be able to favourite the book. I thought that this made the layout look neater and less busy. The hamburger menu has also been removed because I realised once I finished my designs, that I did not have a need for the hamburger menu. I then decided to remove the coloured nav bar. I thought that it did not fit within the screen design well, and often looked random on the screen. When I decided to remove it, I thought that the page looked much more organised and the nav bar blended well into the design without the coloured bar. The last change I made was to the recommendations feature. Before, I designed a screen for when the user chooses which genre they want recommendations for, and then they are taken to another screen with those recommendations on. I thought it would be easier for the user to have everything on one screen instead of having to press through multiple screens to find their recommendations. I also could not find any illustrations to fit within the different recommendations tabs well.

Tablet Wireframes

ux1

ux1

goodreadsapp




I also decided to design wireframes for the tablet size too, so that I could visualise what it would look like on a larger screen size. Once I designed these wireframes, I noticed that it would be best to include the face call feature only on tablets because the screen is much bigger, and the phone screen size would be too small to include this as it would cover the words from the book the user is reading.







RSA Boards




Project Reflection

I thouroughly enjoyed this project because it allowed me to strengthen my Figma and design skills through the prototyping aspect of this project. At first, I was skeptical about the project as I struggled with gaining any ideas or deciding on which brief to choose. Once I finalised my idea, I really enjoyed being able to finally design a userface for an app as this is something i've always wanted to do, and maybe as a future career too. I also have a big interest in reading myself, with made the project even more enjoyable. Luckily, there were no major setbacks during the completion of this project, as I made sure that I took my time. Regarding time management, I stayed on track because I made sure that I started my work early, to ensure that there was time for any unexpected setbacks. I created a to-do list each day so I could keep track of my work, as well as using an organisational app called Notion. This allowed me to see all my work that needed to be completed for the semeseter, and I was able to write my lists digitally as well as manually. Next time, I would try to make wireframes function properly with the prototyping tool in Figma, as I did not want to add any extra stres by trying to do this during this semester. I would also try to remember to not to delete any old wireframes, so that I can show every step that I make in the design process.