Site Manager

UX & UI
Brief & Project Context

SITE MANAGER was created in response to an increasing demand for our Business to Business services while working on Spacebarmedia LTD.

As its name implies, what SITE MANAGER does is to create websites following and using few templates already designed and built in-house.

The project requests were to deliver the best usability and using the most relevant and appropriate UI design patterns and to conduct research of each screen to find best methods of achieving the functionality.

The UX and UI of this project were conceived in 6 weeks approximately as the urgency of the business required a quick action.

 

Under the strict time constraints, I was able to:

 

  • Stakeholder’s interviews
  • Research
  • User flow map
  • Quick sketches of the flow
  • Design low-fidelity mockups and synced with the developer to begin implementing the basic colour palettes and visual design
  • Iterate based on feedback from first round user-testing. As the users of this app will be my colleagues in-house, this was quick and easy to arrange
  • Create high-fidelity UI mockups in Sketch that served as pixel-perfect reference images
  • Iterated on final user-test feedback based on prototypes created on Invisionapp

 

Research

I did my research by doing stakeholders interviews and, as the users of the SITE MANAGER will be my colleagues I also interview few of them as I wanted to know exactly what systems they were using at the moment, their pain points with the existing program and the features they would like to have in the new one.

Then I looked for existing web managers like WordPress & Webflow, looking for design patterns that could accommodate our user’s needs.

After the interviews, I made a user flow map in order to visualize the complete path that users had to follow and as a good exercise to know all the possible pain points and variables that needed to be considered.

 

 

Design Process

Quick sketches were made in order to visualise all the screens I needed and also to be able to run it by the engineer for knowing any possible tech constraints. Right after,  and after some changes, I designed low-fidelity wireframes and created a prototype using Invisioapp in so to be able to do quick user test.

 

 

After first round user-testing and making some modifications based on them I started working with high-fidelity UI mockups in Sketch app.

 

 

As part of the high-fidelity UI mockups, I designed feedback & notifications for some of the actions of the app.