Front-end Development - A Case Study

This case study is intended to showcase my ability to take a project from concept to completion, to show my thinking. My maths teacher would be so proud.

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:

Screenshot of old app

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.

Agile vs Waterfall diagram

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.

Planning User Flow

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.

Quick sketched wireframe mockup

3. Wireframes

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.

Digital Wireframe of Login page Digital Wireframe of Overview page Digital Wireframe of Resource page

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.

Prototyping mockups into static HTML

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 development 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.

Results

The result was a faster a more usable product. Here are some before-and-after screenshots comparing the old with the new.

Comparison of old and new login screens Comparison of old and new welcome screens Comparison of old and new resource screens

Animated gif of opening the budget component Animated gif of opening the budget component

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.

Ok, just a few quick questions.

After you introduce yourself and your project, I'll get it touch with you to schedule a time to chat. You should expect to hear from me in a day or so.

Splendid.

Your message just arrived in my inbox. Talk to you soon.