This app is a for running corporation-like project simulations for students. The project, as it came to me, was to redesign the front-end. A back-end developer would be handling that heavy lifting and needed someone with design chops to plan out the UI for the components on the front. The plan was to rebuild it in React (with the old version having been built for MS Silverlight). This is the old version:
Archaic, difficult to use, slow and unresponsive. It was so complicated that the user needed to wade through a lot of documentation and walkthrough videos just to be able to use it. That’s where I came in. I figured that the user’s time should be spent on the tasks the software facilitates, not on using the software itself.
So I learnt how to use the software, noted where the user was likely to get confused or had to take unnecessary steps, and starting putting together an idea for a better version.
I decided to use an Agile approach, breaking the project up into phases, each of which we’d take from start to finish before starting the next one so that I could get frequent feedback on progress to ensure we were solving the problems. I won’t go into detail about using Agile, but this diagram illustrates the approach I took.
Then with each phase, I did the following:
1. User Flow
To ensure the user was taking the least steps needed, I mapped out the actions and routes (pages) the user would navigate through.
2. Sketched wireframes
After a round of client feedback, I drew mockups up on paper. This pen stage allows me to take risks while designing. Even if I think an idea won’t work, I can still sketch it out quickly to know for sure. Often this pushes my designs further and lets me create ideas I wouldn’t have otherwise, all because the risk of wasting time is so low.
After some review, I mock up those sketches into more detailed designs in a wireframing app. Again, not too much detail, but enough to show how components will look and where they will go. At this stage, the client can decide what works for them and what doesn’t. Making changes is easy.
4. Static Prototypes
I’m a firm supporter of designing in the browser instead of making high-fidelity Photoshop designs. Rapid prototyping allows me to make iterations quickly and work with a real version of how the app might look and behave. Since HTML, CSS and JS are my strongest suits, I put together a theme (typography treatment, colours, etc.) based on the existing brand identity, and then got to work building static elements of the components wire-framed out in the previous stage.
5. App Integration
The last step was to integrate these prototypes into the React app the back-end developer had set up. Working closely with them, I was able to continuously integrate my components into the app once the framework had been set up, using a git repo to keep our versions in sync. Eventually, the components had become so reusable that I started prototyping them straight into the app, leaving the other developer with the task of hooking them up to the back-end.
The result was a faster a more usable product. Here are some before-and-after screenshots comparing the old with the new.
The user feedback we received was positive, and the client was jubilant with the result.
In closing, I believe in good UX and simplified UI, and I think this redesign speaks to that.