Star Wars App
Introduction
This project explores the design and the development of my new app SW: Media an app that is designed for Star Wars fans and designed with Star Wars fans in mind. The project aims to design a user-friendly platform where fans of the franchise can access new and updates of upcoming Films, TV Shows, Games, Merchendise and events. This app is being created due to th face that news about this franchise is very fragmanted and you have to rely on multiple sources to get the necessary information, with this app you won't have to rely on multiple different sources and can instead just rely on this app to get all the information that you need.
The development portfolio documents the design process that is being undertaken in order to create the application. It explores the planning, the wireframing, interface design and development decision that where made throughout the project. Tools such as Figma and Adobe XD where used to help prototype and design the interface, allowing for there to be experimentation with the layout, navigation and user-experientce before producing higher-fidelity designs.
The portfolio also reflects on the design decisions that where made during development, considering user experiences, accessibillity and usabillity. In addition, the project will demonstrate how tohe design alligns with the Sustainable Development Goal 10 (Reduced Inaquallities) by considering inclusive and accesible design principles.
This application is designed in Adobe XD as an informative mobile platform for fans of the Star Wars franchise. The sole purpose of the app is to provide users with a centralised location where theny can access any upcoming news in the Star Wars franchise, including upcoming Films, TV shows, Games, Merchandise and events.
Information surrounding the Star Wars franchise is often found through various websites, social media platforms and online communities. As a result it can make it hard for fans of the franchise to find reliable new that is accurate and up-to-date. This application aims to address this issue by bringin key information, news and updates of the franchise to the fans through an easy-to-use platform so they don't have to scour the internet for the right infromation.
This app focuses on providing users with an easy to navigate and accessible interface, that allows fans to quickly browse current announcements and explore different sections of the Star Wars franchise. By structuering information clearly through the interface, the design aims to improve the user experience for fans who want to stay informed about upcoming news and events.
The branding for this app was developed with a focus on clarity, recognisabillity and relavence to the targted audience. The name SW: Media was created by simply abbreviating the name Star Wars and adding media the reason as to why media was chosen was due to theis app being an app designed essencially for all forms of media and news in those media industries for example Film, TV and Video Games. Shortened naming conventions also helps with making the name more memorable for the audience. This tactic is used commonly within digital branding to make the name easier to remember and also help to make it fit all devices that it will be plastered on such as phone, table and computer.
The logo designs where heavily inspired by the existing icongrophy within the Star Wars universe. In three of the logo designs I used some logos that are prominantly used within the Star Wars franchise, those are the logo of the Jedi and the Sith logo. This was done to help establish immediate visual recognition and familiarity for users, which is an important aspect for effective brand identity design.
The third logo was developed by merging the Jedi and Sith logos together. The combined approach was made to help make the app the number 1 place for everything Star Wars the merging logo was to give a sense of getting the best of both world whether that is Jedi or Sith. However whilst the design is thematically strong, there is potential limitation to originality, as reliaing on existing franchise symbols can make the app itself seem less distinctive. Future iterations of logo design can explore more unique visual elements and help to make a stonger standalone identity.
Wireframing is an important part of the user interface design process as it prototypes layout ideas before further developing them into high-fidelity designs. The wireframes I created in Figma focus on the layout, navigation, and structure of the app I am designing, rather than just visual styling. This stage enabled me to experiment further with different screen layouts and to find my footing and understanding of how I wanted the app to look, whilst also prioritising that the user interface was easy to navigate and accessible to all users.
The layout shown in the wireframes follows a common mobile UX convention to ensure it is familiar and easy to use. A hamburger icon on the left of the screen was used to make it easy for people to navigate key sections of the app, such as Movies and TV, News, Gaming, and more. This decision was further influenced by modern mobile app design practices, where primary navigation is placed within easy reach of the user's thumb.
Information hierarchy also played a key role when designing these widgets, as key information, such as breaking news of upcoming films and TV shows, was put at the top, as that is commonly where people look first when opening the app. Secondary information, such as discussing what the film is about, would be further down the page, although it is important; announcing the film would be at the top to help grab people's attention and encourage them to continue reading.
Several Wireframe iterations were made before arriving at this final layout. The early iterations explored different navigation placements and content structures. Through the redesign process, I refined the user journey and removed unnecessary features to make this app easier to use for all consumers. This resulted in a clean and accessible design for all users.
The target audience for this application is Star Wars fans who actively follow news related to the franchise, such as upcoming films, TV shows, games and merchandise. Therefore, these frameworks help structure the app to prioritise quick access to updated information and media content, ensuring users can browse more quickly and navigate to the information they want with ease.
The wireframes were further developed with mobile usability in mind. Key interactive elements were positioned at the top of the screen to make them easier to see and reach for all app users. This approach follows modern mobile UX design principles, which emphasise ergonomic interaction patterns.
Figma was used to develop the app's wireframes because it is an app I am familiar with, has design features I like, and offers prototype capabilities. The software allowed me to experiment further with different layout ideas for my app and led me to develop these wireframes into higher-fidelity versions in Adobe XD.
Here is another design for the pages of my Star Wars media app. As you can see, this is based quite heavily on the wireframes that I had designed. I chose to use an iPhone 14 Pro Max format for these designs as I believed that to be a suitable format, as iPhone is in the lead of global market shares as of Q4 2025 according to the CounterpointSearch website, meaning that Apple phones are the most sold phone brand in the world, making it suitable to base my designs upon. iPhone is also a brand I currently use, so it helps me understand how the app's layout should look, as I use the same phone brand and have a clear sense of what it will look like.
When designing this app there will be an option for light and dark mode to make this app more accessible for the users need initally it will be made with dark mode on that is something that will be very easy to change in the settings of the app. The reason as to why it will be designed with dark mode on is due to dark mode being the more popular choice when it comes to either light mode or dark mode also dark mode is more in theme with Star Wars as it is a franchise primarily set in space and space is know for being pitch darks with stars so dark mode helps to set the theme of the franchise.
Secondary research has shown that a lot of people primarily use dark mode across various web sources it is known that dark mode is primarily used by people. When doing research on a website called Accio it claimed that over 70% of smartphone users integrate dark mode onto there phones not only just phones as it is also integrated into macOS and windows systems.
Light mode has been shown to also have some benefits for audience members such as helping with faster reading and higher comprehension which is why light mode will be added as a feature in the settings in the app but when opening the app for the first time they will see that it is in dark mode as that is used by more people. The reason as to why light mode has shown to help with faster reading and higher comprehension is due to the way humans visual system processes contrasts, with dark text on a light screen being easier for people to read for an extended period of time. In contrast, dark-mode can help to reduce eye strain in a low light condition and is often considered to be a more comfortable way of viewing your phone though this varies depending on the user.
Within the context of the Star Wars app, dark mode plays a key role in the allignment with the visual identity and tone of the Star Wars franchise. Helping to set the theme and tone of the franchise. This is due to the franchise being primarily set in space and with its high- contrast lighting and cinematic visuals, dark mode really helps to make that stand out more and overall more visually appealing for the whole audience.
Dark mode also helps to support the accent colours, such as the blue and red for the lightsabers that are used in the franchise, these can be used to help guide the audiences attention and help to reinforce the franchises brand identity. These colours help to stand out more effectively against the dark mode helping improve visual hierachy and clarity.
Here is a further example of what these designs would look like on an iPhone 14 Pro Max. This helps to give a clear representation of what exactly this app would look like on an iPhone and how it fits on screen. I chose mockup to help with giving an iphone 14 pro to use for these mockups, the reason that I used mockup was due to the fact that it was a website that I had used in previous mockups that helps to give a very clear understanding and a great example of what to expect designs such as my app to look on the desired screen that you are designing for.
Designing the interface for the iPhone 14 Pro Max format allowed me to consider the screen size and the resolution when developing the layout. Due to mobile screens being smaller then laptop screens for example I had to priortise the important content hence why I put what I thought it to be a good idea to put it at the top of the screen as that is what the eyes of users look at first as it is what comes on there screen first. It helps to make important announcements about upcoming games, movies and tv shows easy to see for the user but also make it not so crowded with other content that it gets lost with all the infromation. By designing within the dimensions of an iPhone screen I was able to make sure that the content spacing, typograpy and image placement remained clear and readable for all users.
Mobile usabillity was an important consideration during the design process. Unlike desktop interfaces, mobile interaction relies heavely on touch interaction. That means that key interactive elements such as buttons, navigating icons and menus must be made large enought that it is easy for people to interact with. When I was designing the layout in Adobe XD, I gave great attention to spacing between interactive elements so no elements could be considered to close and make it hard for people to interact with and help make it easier for people to interact with.
Although this design was created in the iPhone 14 Pro Max format, the overall layout structure was developed with responsive design princaples in mind. Responsive designs allows for the application to adapt to multiple screen sizes across a huge range of smartphones and devices. By using flexible layout structures and scalable elements within Adobe XD, the design that I have created can be adapted for other devices while maintainiing and focusing on the overall user experience.
This app that I have created takes accessibillity for all users into great consideration as per Sustainaible Development Goal 10, which focuses on helping individuals with certain disabillities and making this app easier to navigate for those certain individuals. In the context of my work, this can involve ensuring that certain aspects of my app are easy to access for all users no matter there backgrounds, abillities or technological experiences.
This app that I am developing aims to support SDG 10 by prioritising clear navigation, simple layouts and clear content spacing. An example of doing this is by having a hamburger icon at the top of the page that instantly grabs peoples attention and also makes it easy for people to simply navigate throughout the app. Using familiar design patterns such as the hamburger icon for clear navigation to help people with certain dissabillities to be able to navigate my app with ease is a clear example of trying to incorporate accessibillity into my app.
Accessibillity was also considered when doing the design of the app from the typogrophy, spacing and clear navigation system this helped to ensure that the information can be easily understood and navigated through. These design decisions help to create a platform that users can quickly access news and updates about the Star Wars franchise without unnecessary complications.
By focusing on clarity and accessibillity, the project helps to demonstrate how digital design is able to contribute to making apps and making it easy for individuals with certain dissabillities and makes the content easy to navigate for a diverse audience.
Application Overview
Logos
Wireframes
Pages
Light and Dark Mode
iPhone
SDG 10
