Reaper
Business Software Interaction & UI
OVERVIEW
Project Background
Reaper is a startup developing software for businesses to manage rentals contracts and billing. The startup had no previous designer input, and the software's interface needed attention before the launch. The team primarily wanted the page interface "cleaned up and happy" but were open to any other suggestions for the product.
PROJECT GOAL
Update the screen layout and interactions so employees can quickly and accurately perform frequent daily tasks.
MY ROLE
UI Designer
Interaction design, UI
TEAM MEMBERS
Austin - Software Engineer
CLIENT
Reaper
Information Architecture
Too much!
The main workflow had too many pages, and modals and labels were too long. The first step was combining pages in the check out/check in process, turning the lengthy modals into pages, and shortening or renaming menu labels.
Now users do not have to choose between "checkout data" and "checkout payment" but can unhesitatingly start checking out items by clicking checkout.
The original workflow was spread over five tabs, now only three.
Wireframes
The original interface was not organized in a hierarchy that supported the user's tasks. Information was difficult to read, and buttons were scattered across the screen.
Important elements are now grouped by task and located in central positions on the page. Secondary information and functionality no longer compete for the user's attention.
One-stop
When an employee checks an item out, they can go straight to "check-out" rather than choosing between "checkout data" and "checkout payment."
What am I doing here?
The main action of the page (checking out a rental item) was prioritized through color and moving to the middle of the screen.
The check-in process deliberately mirrored the check-out process to promote employee familiarity with the process.
Consistent
Pages had different names in various sections. The final step of the project was ensuring that pages, headers, form fields, and button labels were consistent across the entire product. These changes were crucial to ensuring users could navigate the site without confusion.
Interactive Prototype
An interactive prototype demonstrated how the software would behave in real life, which enabled the team to easily review changes and provide feedback. Frequently sharing updated designs ensured changes were approved by the stakeholder and could be implemented without issues.
Working with Amber was a really great experience. She put a lot of effort into understanding our exact use cases and needs and regularly provided updated drafts of the wireframes for us to review and provide feedback on. Amber's focus on identifying the most important issues in our application's design and ensuring those were addressed first resulted in a clear UI design that we're actively implementing.
- Austin, software engineer
Takeaways
Team Communication
One area I improved in was the method of sharing updates with the team, gathering their feedback, and handing off the design at the conclusion of the project. Everyone could conveniently and asynchronously communicate in order to keep the project moving forward.
PROJECT RESULTS
My redesign is currently being implemented and Reaper will launch soon.
Jump on Board
It was a new experience for me to join a project without participating in the user research and workflow creation. I learned how to discover why decisions had been made, which decisions were locked in and which were flexible, and how to support the established workflow with the UI design.
TOOLS USED
Axure
Where are we?
One thing I would do differently is make a site map at the beginning of the project for my own use. The document would help clarify how the pages, terminology, and workflow related.
