Recent Projects
School Printer App Redesign
UI & UX Design, Wireframing, Prototyping, Web Development
After years of putting up with our university's difficult-to-use, confusing printing program, I led a small UI design team through the process of sketching wireframes, building prototypes, testing and gathering feedback, and improving our product with successive iterations. We finished with a detailed mobile mockup and a working demo version for desktop.
The Problem
My university's printing dashboard feels clunky and confusing to use, and these feelings are amplified for mobile device users. This interface sprawls across several pages, featuring unintuitive button placement, redundant data displays, and a disconcerting lack of visual continuity and symmetry. Furthermore, the "mobile version" of this interface is a single, outdated-looking page that prompts the user to log out or View in Desktop Mode-- and let me tell you, that is a challenge to use at all!
The Process
So, to tackle these issues, I created a team in my UI Design class and got to work. Throughout our next semester, we collaborated to design a more streamlined and user-friendly printing dashboard, with a special focus on mobile users.
At the beginning of this project, we sketched interface ideas and wrote down necessary features on paper. After that, we started learning about Figma and its powerful mockup capabilities. Once we felt comfortable with Figma, we began to iterate through the following process:
- Double-check that we aren't forgetting any important features
- If needed, sketch any new design ideas
- Create a wireframe mockup in Figma (or copy the previous iteration)
- Add new features (and streamline the new iteration)
- Add details and visual polish
- Add (or tweak) animations and navigation
- Test our design, noting any issues or mistakes
- Receive feedback from other students and our professor
With each iteration, our design became more streamlined and easy to navigate. We learned from our mistakes in earlier versions--by combining two of our app's pages, we greatly reduced the friction and cognitive load of using our interface. We also positioned items to guide users' eyes to the next steps, and we used our color palette to strategically provide feedback and show users the next step. It's quite evident that as we learned more and more UI Design concepts in class, we took even bigger steps in our improvements. After we wrapped up our second-to-last mobile iteration, we designed a desktop version of the app as well, taking many cues from our mobile mockup. At this point, we were approaching the end of the semester, and it was time to go full steam and put a wrap on this project before exam week.
Throughout our last few weeks, we simultaneously worked on the finishing our final mobile mockup in Figma and on building a desktop demo version, which incorporated HTML, Bootstrap styling, and jQuery scripting. Since our group had varying levels of familiarity with Wev Development, I worked closely with another experienced teammate to create the desktop demo. Around this time, we were now putting the finishing touches on our Figma mockup, preparing for our final presentation and feedback session.
The Results
After weeks of iterating changes and endlessly tweaking things, our hard work paid off-- we finished the semester with the completion of an appealing and streamlined interface redesign, with a Figma mockup for mobile devices and a (mostly) working demo for desktop computers. As with most of our college projects, this was a massive learning experience for my entire team. For my first foray into UI/UX Design, I couldn't be happier with how well my team's project turned out. Unfortunately, we'll still have to use the old interface for printing our papers and stuff-- for now, at least.
Want to see our work for yourself? Check out our Figma project and desktop demo!
Move! Music City Website
UI & UX Design, Web Development, Visual Design, Content Writing
For this volunteer project, I worked with a Nashville public school teacher to turn her vision into reality-- to bring exercise and its numerous benefits to as many young students as possible. schools. After solidifying the site's navigation and design styles, I followed our site map to craft a clear, organized site that informs visitors of the Move! Music City program and encourages them to take their next step (no pun intended).
The Problem
For small nonprofit organizations like Move! Music City, a website can often be the difference between success and failure. As MNPS teacher Stephanie was turning her ideas for Move! Nashville into reality, a clear, effective website was part of her vision. Simultaneously, I was searching for opportunities to gain real-world experience with web design. After learning more about Stephanie's ambitious project, I agreed to help her continue bringing her ideas to life.
The Process
First and foremost, we scheduled a planning meeting to lay out all of the requirements for the website. I worked closely with Stephanie to map out the site's navigation structure, create calls to action, and convey the nonprofit's benefits as strongly as possible.
Throughout the next few months, I periodically added more sections to the site, all the while refining details and making small improvements. All along, I paid special attention to ensuring that the site was clear and easy to navigate, keeping our users in mind. I carefully choose different layout options to ensure that users were logically guided to the next section of the page without getting bored or bombarded with too much information. This actually proved to be a bit of a challenge, as I was finding a balance with adding more content and features while striving to keep things simple, concise, and to-the-point. Since my client was (a) a co-editor on the site and (b) ultimately in charge of the project, I definitely learned the value of occasionally reaching a compromise to keep the development moving smoothly forward. All in all, I'd say that learning was a major theme of this project (for Stephanie and me both)!
As far as the gritty details of the project go, I worked with an online site builder service. After my initial meeting with Stephanie (and a lot of research), I choose Site123 as our service-- the best balance of price, features, and ease of use for the project's needs. Throughout the site's development, I learned more about Site123 and what it's good and not not-so-good at doing. Fortunately, their site builder provided almost everything we needed, although some things took a bit of work to set up, like the donation service integration or domain name configuration. Perhaps the most important part of the project, however, needed to be coded from scratch-- the page where teachers track their class's physical activity with the nonprofit's mascot. Thanks to the decent amount of HTML and JS experience under my belt, I was able to bring Timmy the Turtle to life and make exercise logging fun and exciting-- which is exactly what Stephanie needed for Move! Music City.
The Results
The core reason I agreed to help Stephanie with this undertaking was simple: her message and vision resonated with me. I couldn't have been happier to help get the Move! Music City project off the ground and into the air! Thanks to the website, this nonprofit was able to start building a social media presence, receive donations, and grow to other schools. As my first real-world web dev project with a client, I'm extremely happy with the results we reached after a lot of hard work, learning, and troubleshooting.
I no longer contribute to the site, but Stephanie remains active with keeping the site updated and fresh! Click below to check it out.
Move! Music City