Web & UI/UX Design

Nice to meet you!

I'm Riley, a creative interested in working in the fields of web design and development. While I currently reside in Orlando, I was born and raised on the east coast of Florida. Growing up, I had a dual fascination with both the arts and various scientific disciplines. Cultivating a diverse range of knowledge, I've studied technology, biological sciences, business, and the fine arts throughout my academic career. I have a passion for both the design and technical aspects of web and mobile apps, with a focus on creating fun and interesting visuals. I'm excited to share these passions with others in my future work and career.

Details

Academics

I recently graduated from the University of Central Florida with a Bachelor of Arts in Digital Media - Web and Social Platforms. I have studied front-end and back-end development, as well as the design of mobile applications and web interfaces. My work here has also included a strong focus on UI/UX principles and web design.

Soft Skills

My strong suites are being creative, organized, and empathetic. I am detail-driven, logical, and reliable in my work. I always make sure to keep an open-mind in order to see and understand all possibilities.

Experience

I've worked and volunteered in a variety of environments involving collaboration, organization, and communication skills. These experiences include working as a Web Development Intern for a marketing agency and as a freelance web designer for two different businesses.

My intern work included many different responsibilities, from designing wireframes and visual mockups to using WordPress to code and build websites. A major project I contributed to was the Made by Me workshop campaign, where I created the landing page for the event. Check out my case study on it and the landing page itself.

In my university coursework, I participated in many large-scale group projects. One major project was creating a mobile app concept, which culminated in a hi-fi prototype. Check out my case study on it and the prototype itself.

I'm currently fixing up the websites of two different businesses using WordPress. During these journeys, I've participated in recurring consultations with the owners about design direction and UX best practices. I look forward to sharing this work on here very soon!

Hard Skills

Languages and Frameworks

Front-end language basics
HTML
CSS, SCSS, SASS
Bootstrap

UI and Design Tools

Figma, Figjam
Miro
Canva
Balsamiq
Adobe Creative Cloud tools

CMS, Database, and Version Control

WordPress
Airtable
Git, GitHub, Git Pages

UX, User Flows, and Surveys

Lucidchart
Microsoft Visio
SurveyMonkey

Other

Microsoft Office Suite tools
AI-guided ideation and development

My Projects

3 screens of the Recue-Trac mobile app prototype

Rescue-Trac: Hi-Fi App Prototype

Case Study

Made by Me: Workshop Landing Page

Case Study

Home page of the Florida Capital Development website

Florida Capital Development: Website Refresh

Spot On: Event-Finder App

I was one of six total participants in this two-semester group project. Web Design Workshop I and II, taught by Daniel Novatnak, allowed seniors to create large-scale web projects to showcase skills learned throughout their digital media courses. These skills included coding, design, UX research, content production, and branding.

This app was created to be an event-finder for UCF students. Users are able to create and find events on campus and in the nearby Orlando area. Important features include: an event calendar, event creator, interactive map, real-time notifications, user profiles, and messaging.

Though I contributed to each stage in the process, the highlights of my work lay in the early ideation, market research, and the investigation of accessibility features. Throughout the duration, my role was focused specifically on information architecture, a site map, and coding the calendar page. Microsoft Visio was used to create the following visuals.

Information Architecture

Laying the foundation for our app's and organization, this visual guided us in the early creation process. A legend is provided along with a shading system to denote page position. The lighter the shape color is, the deeper its represented page is. Blue denotes the pages before the main content of the app, such as the sign in and log in screens. Green denotes the app's main content.

View Full Image

Site Map

Similar to the architecture visual, the site map represents the app's organization, with more of a focus on the flow between pages and pieces of content. The change in color scheme reflects our decision to go with a cooler color palette later on after the previous visual was made. Red and black flow lines between shapes denote whether pages connect to an event page or not.

View Full Image

3 screens of the DesignSocial mobile app prototype

DesignSocial: Mid-Fi App Prototype

View Interactive Prototype

I completed this piece for a User-Centered Design course. It was an individual assignment created to demonstrate my wireframing and prototyping skills ahead of a bigger project to come (go check out Rescue-Trac if you haven't already!). Though I began the project with InVision as my tool of choice, I migrated to Figma to ensure the preservation of my work after the app's shutdown.

This illustrates a concept for an art-based social platform. Here, artists of all types can form themed communities and interact with each other online, discussing all things art. Non-artists are welcome as well, and it's a great place to commisssion artists or to find their shops that are hosted on other platforms like Etsy.

8 screens of the DesignSocial app prototype

View Wireframe PDF

Screens Include:

a Home page displaying the communities a user is a member of. Users can join and contribute to many different themed communities on the platform
A Discover page with a search bar and an image grid of user posts. The posts gathered here are based on the user's interests
a Notifications page
a Profile page that includes a grid of the user's posts
a Messages page
a splash screen
a Settings page

Purple is chosen as the primary color because of its symbolism of creativity. Since yellow is its complementary color, I chose to use this as a secondary to contrast the cooler primary.

This layout is reminiscent of other social media interfaces to create a familiar user experience. The buttons have large touch targets for better usability and accessibility. Different font weights are used for visual interest and better visual clarity.

section of the Audiophile marketing website that explains its major features

Audiophile: Social Platform Concept

Marketing Website

This was from an assignment I did in a Social Platforms course. I was tasked with making a concept for a social media app, designing core pages, and then creating a site that advertised it and highlighted its key features.

Concept

This endeavor helped me learn more about how social media sites are put together. The mobile app is called "Audiophile", which would take inspiration from other platforms such as Reddit and Twitter. It would be a place for music-lovers to discuss different genres, share playlists, recommend new artists, and discuss new releases. Some of the app's features would include live-streaming, event-organizing, and Sub-Hubs, which are similar to Reddit's concept of subreddits.

View PDF

Imagery

An audiophile is someone who is enthusiastic about recording and listening to high-fidelity music. The logo I illustrated in Ibis Paint X is a stylized version of a vinyl record. This is not only a common symbol of music but also a popular listening medium among audiophiles, making it a good pick for the app's logo. The color scheme includes red because of it's symbolism of passion and excitement. These are common feelings people have when listening to and talking about their favorite music, making this color scheme really resonate with the app's users.

Interface

These screens were designed in Picsart. The top app bar includes a profile button, the app logo, and a side drawer. The bottom tab bar includes buttons for the home feed, discovery page, post creation, livestreaming, and messages. The design is high contrast, which is beneficial for accessibility.