THE
BRIEF
Revel Systems, an online ordering system, occasionally has requests from customers about including customization and branding in the software. Revel suggested Fulton Works create a way to include a custom branding solution that integrates their ordering system without taking the customer out of the carting process and into the Revel system software.
SERVICES PROVIDED
Branding
Web Design
Mobile Design
UX/UI Design
THE APPROACH
Identifying the User: I developed 4 personas that best described the users of the product. Although these 4 users had work and/or personality traits that are specifically related to that person, all users needed an experience that doesn’t jolt them from the carting experience.
Wireframes: I created preliminary wireframes and site maps and held meetings with stakeholders and the design team to review the process After the wires were solidified, I designed a low-fed prototype focusing on structure and experience. The Prototype was implemented through InVision.
High Fidelity Design: The high-fidelity design and components within Sketch were transformed into a usable style guide within Zeplin. There were regularly conducted design reviews with development and the Product Manager to make sure that features were prioritized. Builds were broken into 2-week sprints.
Development: In addition to creating the UX process and design interface, I assisted with developing the interfaces by creating library components using Sass CSS and HTML. I worked with the development team and conducted code reviews before committing my work.
THE SOLUTION
A mockup ordering platform was designed and implemented using Revel’s API. The UX focuses on directing the user through the carting process, which consists of choosing a location, picking takeout/delivery, ordering, and checking out. The mockup design is a fictional restaurant called Portage Fare. The Portage Fare logo is representative of a picnic square, symbolizing take-out or dining al fresco. Programming modules are created using the Agile Methodology integrating Sass CSS and HTML. The layout uses elements from Semantic UI React.
