At Focus Brands I was tasked with re-designing the Auntie Anne’s website using the user-centered design process with a mobile-first approach.
My Role: Conduct user research, create wireframes, conduct usability testing, handoff to visual designer
Tools Used: Sketch, Invision, Validately, OptimalSort
Increase user’s knowledge of brand history.
Provide more information about locations and where to find unique Auntie Anne’s offerings.
Make users more aware of catering and special events offered by Auntie Anne’s.
The research phase of the project consisted of primary and secondary research. Review of materials from the brand was first, followed by internal audits and competitive analysis.
While some personas were already established with the companies market research, during field research we noticed some recurring behaviors unique to the Auntie Anne’s brand. From this research, I created a new Persona to add to the family.
Using the Busy Balancer persona, I put together a journey map that represents Auntie Anne’s largest customer base to identify key points of frustration and delight.
Using the tool OptimalSort I conducted Card Sorting and Tree Jacking studies to confirm the information architecture for the new website.
After meeting with the brand to discuss goals and needs, I began sketching ideas for the site. Below are a few of my sketches.
Below is a sample of some of the wireframes created for the website.
One challenge of the new design was how to include food trucks in the store locator. As food trucks move around to several locations during the week and are not typical locations, I had to make sure to differentiate them from brick and mortar locations. Research revealed that the trucks typically operate on a regular schedule which can be seen in the local landing page, but also participate in special events. This information will be populated through a form that is already submitted by the food truck owners to be able to attend these events.
My final task before handing my wireframes off to the visual designer was to run usability testing on the prototype. Using Validately, I ran 6 remote-moderated sessions with users I recruited from our customer base. From this feedback, I made improvements to the wireframes.