Allcast
As my first ever UX/UI design project, the ultimate goal was to produce a functional, visually attractive, and usable application for podcasts. This included building a wireframe, fleshed out site with functional links and transitions, and a full UX study to complete the semester long process.
Pre-visualization
Customer Journey Map
Customer Persona
Persona Sketch 1
Persona Sketch 2
Personas
The very first step was to immediately start with the research of the application by creating a customer journey map and two personas based around the gathered demographics, interviews, and questionnaires.
Workflow 1
Workflow 2
Workflow 3
Customer Workflows
The next step was to begin thinking of how the costumer would navigate the application which allowed me to define the pages, choices, and actions they would need to take to get to where they wanted to go. Thus, I sketched out three workflows of different customer interactions and began wireframing the pages.
Wireframe sketches
Wireframes
Within the wireframes, I was able to put together a solid, UX functional workflow which also allowed me to plan out the UI elements I would need to consider to make a complete and successful application. From there, it was on to the designing portion of a desktop and mobile application done inside of Adobe XD.
Browse page
Landing page
Purchase page
Wireframe demos desktop
I started the building and designing process by first creating three essential pages for the podcast application including a landing page, a search page, and a transactional page. I created the desktop version of the app first as I had a very clear idea of what I wanted to include and created icons to go with it.
Landing page
Browse page
Purchase page
Wireframe demo mobile
I did the same three pages as a mobile version (this version was based off of an iPhone 14 design format) so the application could be cross platform, adding to the various capabilities and highlights that application would have upon its development.
Prototypes
Landing page
Profile/ Account page
Browse page
Purchase page
Library page
Prototype desktop
After conducting more UX research in the form of a case study on potential users, I was able to begin branding the application, titling it "Allcast" with its primary featuring being its cross platform capabilities and wide variety of content for its users.
Account page
Landing page
Browse page
Purchase page
Library page
Prototype mobile
I continued the branding to the mobile app keeping the same colors of purple, white, and black with the same standard level of UI and UX functions that would not only work, but also was visually attractive.
Explanation page
I then detailed a small systems display to showcase the brand elements of Allcast. This display included the typography combination of Lucida Sands Unicode and Rubik, the main brand colors, hand created icons, and a brand logo.
Final Product and Prototype
Full account
Full browse
Full landing
Full library
Full purchase
Full demo desktop
Full account
Full browse
Full landing
Full library
Full purchase
Full demo mobile
After a lot of peer review, usability heuristic tests, and usability studies, All cast was a completely functional application with a positively received brand as well as praise for its mobile and desktop versions. The additions included a library page, added help buttons, and functional UX and UI elements such as hover states, page transitions, toggles, buttons, and more.
