Service & UX designer
17.png

Anna+juicen: a web concept for a growing juice business

Period: fall 2017. Context: course project (ITU) and collaboration with the juice shop Anna+Juicen. Activities: user research, content strategy, information architecture, wireframing, responsive UI design, usability testing, front-end development

 

The problem

Anna, a juice bar owner, had found success with her line of seasonal juice cleanses. Yet, to keep up with the demand, she had to go beyond face-to-face interactions for taking orders and informing customers about the product.

Research

Before designing anything, I wanted to understand the vision behind the product and the business. I also had to gain insight into the motivations of people doing juice cleanses. I interviewed the owner, as well as customers.

 
 
Anna's juicebar

Anna's juicebar

Finding visual inspiration in existing materials

Finding visual inspiration in existing materials

Analysing interview data

Analysing interview data

 
 

Design, testing and implementation

I began by sketching the information architecture and outlining the content. From this I could make qualified sketches and wireframes of potential responsive layouts. To establish a visual tone, I worked with mood-boards and style-tiles that I reviewed with the client.

 
 
Sketching site layout

Sketching site layout

Style explorations

Style explorations

Layout and style explorations

Layout and style explorations

 
 
Wireframing the mobile check-out flow

Wireframing the mobile check-out flow

Wireframing the desktop check-out flow

Wireframing the desktop check-out flow

 
 

As the site navigation became fairly simple and standard, the focus of user testing became the making sure that the site communicated what it needed to communicate. I conducted speak-aloud user tests of interactive mockups of both the mobile and desktop layouts. This led to a series of content and layout fixes, before I coded a partially working, responsive prototype site.

Interactive mockup prototype of mobile site

Interactive mockup prototype of mobile site

Interactive mockup prototype of desktop site

Interactive mockup prototype of desktop site

Results

Through this process, I arrived at a design that allowed test participants to easily acquire the information defined by the communication goals and successfully complete a simulated ordering process.

Today, the client has adopted the design concept as the basis for a future site launch.

Partially working implementation coded with HTML, CSS, Bootstrap, and Javascript.

Partially working implementation coded with HTML, CSS, Bootstrap, and Javascript.

Looking back

Coding a partially working web implementation was a course requirement. Had it not been, I would have spend more time in the prototyping and testing phase of the design process. Further, as the research gave insights into varying needs at different points the customer journey, service design tools such as journey maps or service blueprints could have been useful for woking holistically with the business’ service as a whole.

⬅︎ back to portfolio