Problem

The client wanted a faster and more modern-looking version of the web app they had built and, at the same time, to break into a larger segment of their market by serving the employees of the customer rather than just the executive level. BrieBug Software Solutions brought me as UX Designer.

Solution

Produce a prototype to show to current customers to pre-sell the expanded version of the existing web app. The prototype was very successful with many customers calling the enhanced version “Fast and Easy.”

User Research

On a limited budget, user research was limited to the client’s view of the customer. Luckily, the client worked in the field before leaving to create this solution and continued to meet with actual customers on a weekly basis. Also, as a designer, sometimes we have to work in less than ideal situations and in this case, my objective was to deliver enough for the client to get sales commitments from his customers and simultaneously show the power of the UX process for the next phase of development.

Personas

Persona creation was critical on this project and led to insights that guided us to significant changes:

 •     The amount of training was a pivotal difference between the personas led us to create three customer types who would be shown different options; the difference is controlled by login information which was already a requirement of the existing system.

 •     Personas guided the mobile view of the web app, showing only the most common tasks for each of the three customer types.

 •     Discussions between development, design, and the client were streamlined by using the names -- Nicole, Jen, Lisa -- of the personas. For example, creating a whiteboard version User flows was accomplished in a 1-hour group meeting.

User Flows

I stumbled upon a great technique for leading a User Flow session by borrowing a technique I use in my sketchbook. I used a blue ballpoint pen on big paper (I use the the back of blueprints because I happen to have an unlimited supply) to sketch out what I’d learned so far about the user flow. The participants couldn’t see the faint blue lines but it was enough to remind me what to ask, such as  “And then Lisa  chooses which report to edit?” If yes, then I’d darken the box and text with a marker. If not, I could add whatever text, boxes or arrows would make it correct.

Synthesize, Analyze, Strategize  

A great strategy turns a weakness into a strength. 

For example...at this point in the process, it was obvious that we couldn’t account for all the different scenarios that could result from the customization options provided. But another goal was to strengthen the relationship between the executive and the frontline employee and the first suggestion was a blog-style channel but that seemed time intensive and possibly ineffective. So instead, we added methods such as  “I don’t know how to answer. Call me at xxx-xxx-xxxx”  directly within the form to create a dialog between the frontline employee to the executive.

Information Architecture  

The data of the app is complex not because of unnecessary steps, but because of the regulatory and privacy issues. But the terminology throughout the field is ambiguous and lacks shared definition so I strengthened the understanding of the relationships through visual cues, such as:

 •    Grouping on tabs

 •    Typographical techniques such as alignment and spacing

 •    Toolbars attached to the window to which they apply

Wireframes  

Using hand sketches with hot spots quickly applied in Adobe Xd, we were able to collaborate with the client efficiently to see where we on the same page and more importantly, where we needed refinement.

Visual Design  

Because we’d “done our homework” I had very specific guidance to build the visual design. A highlight was a report format which used text blocks instead of a lined grid with the following results:

 •    Cleaner and more modern look

 •    Easier to understand because the alignment and use of headings intentionally strengthened the hierarchy and relationships of the text

 •    Strategic use of whitespace obviated the need for rollover effect to display much-needed text

Prototypes  

Using Adobe Xd and Illustrator, I created another layer on top of the wireframes. Then using the prototype features, I was quickly able to create the following:

Usability Testing

With prototype in hand, the client was able to call on its customers with its enhanced version. The reaction from most was “Fast and Easy.”  The next phase will begin with more formal Usability Testing.

TOOLS USED