Skip to content

Frontend UI Redesign

Lilly edited this page Apr 5, 2022 · 7 revisions

Overview

After inheriting the original Updog, through manual testing and otherwise, several different changes were identified that could be actioned. One was working on redesigning the UI for Updog. From this, the team looked at the original designs that were implemented and sought to improve the user experience, user journey, and to bring forward a consistent UI suited to modern-day peers.

Original Designs

image image

Original Implementation

image

UI Redesign

image image image image image image image

Intent

Our intent with the redesign was to refine the current designs and create a stronger coherency with the user journey. As can be currently seen, with the original designs, there were several component designs not included. Furthermore, in the implementation, we recognised a need for more functionality, and our designs achieve this by showing the potential user flows.

Core Additions

We have added the choices around which interest tags to follow, implemented after also investigating similar applications to further develop the user experience. This allows them to get information aligned with their interests in an organic method.

We also noticed that the application was built purely for a mobile design. As we believe that the design being reactive would be the best for allowing for long-term support, we have added a desktop view for implementation. This will allow for more users, as well as more methods of access for current users.

Finally, we've added a button for logging out.

Core Differences & Improvements

Differences that we implemented with the UI would first be the update to the general designs. We have streamlined the design for graphical consistency, especially working with the preset designs that are built into the application, but ensuring that the standard (i.e. clean edges) are carried through the user flow.

Our user flows are also expanded, especially with settings and allowing user customisation. We've added the ability for users to change their profile background, and with that, the components needed to initiate this. Furthermore, we've also added searching functionality and notifications, as well as the commenting on user posts that was previously designed.