Design and Research
Figjam Board Below.
For my Companion App Design, I decided to base it on the music artist Billie Eilish.
The app’s main content will be Billie’s albums/singles, merchandise and tours. The Albums/singles section will include an in-depth look into the ideas behind each song, giving the user a look into the musician’s mind and finding out the meaning of the music. Here you will be able to play each album and track with lyrics included to follow along. Each Album page will involve a behind-the-scenes video and a secret button to reveal never-before-seen content to the user. Including this is vital to make the app worthwhile for the user. The merchandise section will include her vinyl, clothing and more. The user will not be able to shop and buy on the app, however, they will be notified straight away when new drops are released. The Tour page will involve upcoming tours, dates and locations.
My competitor research helped me recognise what is needed in an artist’s companion app and what puts the fans off the apps. Artists apps appear for promotion for a new album or single, I will include this but not completely focus on it in my app.
Billie Eilish fans are 69.7% women and 30.3% men. Most of her fans are aged 18-24, then 13-17, and lastly 25-30. This helped me create the needed personas who I will cater my design decisions to. Most of her fans are under 30 and will have lots of experience with the use of apps. This lets me know that I need to use well-known icons for my app, that are universally known.
I plan for a minimalist and modern look with a purple and black colour combination. The background will be dark with black to make the gold stand out. I will include different shades and hues of that gold shade within my design.
User Flow and Wireframe
Firstly, to achieve a good user experience, I have included an onboarding section for the Billie app. This is the explain to the user the purpose of the app and let them know why we want to enable notifications and location. This is then followed by a signup page for the recipient to create an account. If they already have an account they have the option to log in. I’ve been involved in logging in with Facebook or Apple (as the app is based on IOS), making this process much easier.
Secondly, we have the home page which will include all the new content Billie has out, and a quick paragraph about what you can do on the app. I chose to do a hamburger menu for this app and it’s one of the first icons the user will see and makes navigation of the app easier. Including a drop-down menu within this menu to make navigation simpler for the visitor. I will use lots of negative space with minimal clutter to not overwhelm the user when viewing our app.
Thirdly, the layout of each screen will be the same. This is so it flows nicely for the user when they view all the content. Helping them not get confused. The screen will have its heading bold and clear at the top. Keep the menu, logo, and account icons all at the top of the screen, even when the visitor scrolls down so they can always access them.
Finally, I will use call-to-action buttons to guide the participant to the exclusive content, including new drops of merchandise and music through notifications. The detailed content will be on the album and singles portion where the user will be able to listen to the music, view lyrics and get bonus content just for downloading the app. I plan to use horizontal scrolls for the user to view singles and eps.
UI Prototyping for Mobile Application
https://www.figma.com/design/ODnbstip4ZjLnD4ttK2uhm/Billie-App?node-id=0%3A1&t=UrA6vE5ESyOO8QEH-1
For the design of my app I stuck with two main colours black and purple, this is to make the app stand out more. I created a logo for the Billie app including vinyl, the primary colours, and the artist’s name. This is displayed on every screen.
First off, I created the onboarding which the user will view first when opening the app. I made it simple with a tap of the button to skip through if the visitor wishes. Each Onboarding screen has a short explanation of the app’s functions and how the app will use the permission it asks for of the user. Then we go onto the register/log-in pages. I made a simple design with these including a login option for Facebook and Apple to make the whole process easier for the visitor. The login screen also will use face ID, creating a seamless login procedure.
The home screen includes a call to action button for the tour and new albums. Promoting new merchandise that’s out as well. I placed the hamburger menu to the top left as the user will read left to right first making finding it even easier. The App’s logo and Account icon follow.
Using the hamburger menu you can view the merchanidse page, tour page, albums and singles.
For the Singles page, I made it simple by creating a vertical scroll to view all the singles. When the user taps on one you will be brought to the songs page where you can listen to the song, view the lyrics, and find out about all the behind-the-scenes and any exclusive content. The same concept goes to the Album screen as well.
the Merch page simply showcases all the clothing, music, and accessories the artist has to offer with prices. The Tour page includes the tour dates, poster and locations which is where permission of location comes in as these tour locations will be catered.
Adapting Design for Web Development
Tablet Version
https://www.figma.com/design/jBgEohaf5Bc1HtRizW4TPm/Billie-Tablet?node-id=0%3A1&t=wuKOM7YAG3EP8D6D-1
Here I have converted the app design to a tablet. The tablet has a lot more space on the first view screen without scrolling, giving vital content more of an advantage to be viewed. This is shown well on the home screen as I have fit in a lot more content and even added a horizontal scroll to the new merch section.
I used the same layout, menu and colour scheme to bring seamlessness from the app to other media, making it easier for the user to digest.
The wider screen means I could fit more content in the merch section as well, changing the layout slightly but keeping it in the same style.
Website Version
For the website adaptation, I originally planned on having a top menu with all the screen selections like merch, tour, etc, at the top but after previous research, the hamburger menu is more user-friendly. I placed the menu the the top left, with the logo in the middle and the account icon to the right. Again I could size up the content here and take advantage of a bigger screen.
The layout of pretty similar on the website as it is everywhere else. I have altered the layout on the album and songs screen, however. I moved the music cover art to the left of the screen so I could fit in other content for the user to view. This eliminates much scrolling making interaction much easier. The user will have to scroll to view the exclusive content.
The Singles section is changed to a horizontal scroll instead of a vertical one as I could size up the content better this way making it easy to see for the user. Each screen includes a clear heading to make it obvious to the user which section they are on.
Refrences
Charlotte Smith (2024) Billie Eilish’s UK 2025 tour tickets on sale today – expert shares most affordable dates. Bristol Post, Internet edition. May 3. Available online: https://www.bristolpost.co.uk/whats-on/whats-on-news/billie-eilishs-uk-2025-tour-9263064 [10/5/24].
Tom Breiham (2024) Billie Eilish Announces New Album Hit Me Hard And Soft, Out Next Month [Blog post]. Stereogum. April 8. Available online: https://www.stereogum.com/2258506/billie-eilish-announces-new-album-hit-me-hard-and-soft-out-next-month/news/ [10/5/24].
Quinn Moreland (2021) Happier Than Ever [Blog post]. Pitchfork. July 26. Available online: https://pitchfork.com/reviews/albums/billie-eilish-happier-than-ever/ [10/5/24].
Billie Eilish Shop UK (n.d) LEAVE ME ALONE SWEATPANTS*. Available online: https://shopuk.billieeilish.com/collections/archival-merch/products/leave-me-alone-sweatpants [10/5/24].
Billie Eilish Shop UK (n.d) HIT ME HARD AND SOFT STANDARD CD*. Available online: https://shopuk.billieeilish.com/collections/hit-me-hard/products/hit-me-hard-and-soft-standard-cd [10/5/24].
Billie Eilish Shop UK (n.d) HIT ME HARD AND SOFT STANDARD VINYL*. Available online: https://shopuk.billieeilish.com/collections/hit-me-hard/products/hit-me-hard-and-soft-standard-vinyl [10/5/24].
Billie Eilish Shop UK (n.d) HIT ME HARD AND SOFT GREEN POSTER*. Available online: https://shopuk.billieeilish.com/collections/hit-me-hard/products/hit-me-hard-and-soft-green-poster [10/5/24].
Billie Eilish Shop UK (n.d) HIT ME HARD AND SOFT REPEAT BLACK TEE*. Available online: https://shopuk.billieeilish.com/collections/hit-me-hard/products/hit-me-hard-and-soft-repeat-black-tee [10/5/24].
Billie Eilish Shop UK (n.d) HIT ME HARD AND SOFT GREEN CROP TANK*. Available online: https://shopuk.billieeilish.com/collections/hit-me-hard/products/hit-me-hard-and-soft-green-crop-tank [10/5/24].
Billie Eilish Shop UK (n.d) HIT ME HARD AND SOFT BLACK COVER PULLOVER HOODIE*. Available online: https://shopuk.billieeilish.com/collections/hit-me-hard/products/hit-me-hard-and-soft-black-cover-pullover-hoodie [10/5/24].
Billie Eilish Shop UK (n.d) CHECK T-SHIRT*. Available online: https://shopuk.billieeilish.com/collections/basics/products/check-t-shirt [10/5/24].
Billie Eilish Shop UK (n.d) SILLY ME T-SHIRT*. Available online: https://shopuk.billieeilish.com/collections/happier-than-ever/products/silly-me-t-shirt [10/5/24].
Billie Eilish Shop UK (n.d) BELOVED PINK SOCKS*. Available online: https://shopuk.billieeilish.com/collections/summer/products/beloved-pink-socks [10/5/24].
MEHERA BONNER (2023) Billie Eilish *Is* Barbie (Complete With Blonde Hair) in a Teaser for Her New Music Video [Blog post]. Cosmopolitan. July 12. Available online: https://www.cosmopolitan.com/entertainment/celebs/a44515381/billie-eilish-barbie-transformation/ [10/5/24].
Sheldon Pearce (2020) No Time To Die [Blog post]. Pitchfork. February 14. Available online: https://pitchfork.com/reviews/tracks/billie-eilish-no-time-to-die/[10/5/24].
Brian Cantor (2021) Billie Eilish’s “Therefore I Am” Erupts As Pop Radio’s Most Added Song; Also Rules Hot AC & Alternative Add Boards. Headline Planet, Internet edition. n.d. Available online: https://headlineplanet.com/home/2020/11/17/billie-eilishs-therefore-i-am-erupts-as-pop-radios-most-added-song-also-rules-hot-ac-alternative-add-boards/[10/5/24].