Application Redesign and Development

My Roles: UI / UX Designer, Front-End Developer
Software: Visual Studio Code, Adobe XD / Figma, Adobe Photoshop

Revamping an existing app involved assessing usability and user feedback, then redesigning the interface to enhance navigation, improve user experience, and meet modern design standards. Collaborating closely with stakeholders and iterating based on user testing, the updated design aimed to exceed expectations with a refreshed, intuitive interface.

Languages: HTML, CSS, JS, React, Material UI

Challenges

The software is extensive and considerably complicated, so the biggest obstacle was not only to develop visually appealing layouts but also to ensure every aspect was user-friendly while adhering to the new branding standards. Balancing aesthetic design, usability, and brand consistency presented significant challenges, requiring careful attention to user experience (UX) and user interface (UI) principles..

Solution

To accomplish this, I used a more limited color palette and created a responsive layout with a mobile-first design approach. This strategy focused on maintaining clear and concise pages. Wireframing and prototyping were key in refining the layout, ensuring accessibility, and enhancing the overall visual hierarchy. This method allowed for seamless navigation and a cohesive user experience across all devices.

Responsive, Mobile Friendly Design

The App Development Process from Start to Finish

From sketches to wireframes to mockups, these are all important steps in the design process. This systematic approach ensures a well-thought-out, cohesive final product and demonstrates a designer's professionalism and meticulous process to potential clients and stakeholders.

Mockups Make in Adobe Xd

Page Design

Preliminary Sitemap Design

Alerts and Notification Design

Menu Design

Sketches, Wireframes, and Mockups: The Steps of App Deisgn