Case Study:
art (e) fact UX/UI Design

Crafting art (e) fact

Overview

art (e) fact lets users find and save art that they love while also recommending other artworks and artists based on their taste. Additionally the app allows the user to purchase a print of the artwork so they can have their favorite art hanging at home, in the office or wherever they like.
The app is a dedicated native app for iOS and Android.

Contents

Click on the keyboard to get to this part of the case study directly.
User StoriesUser FlowsWireframesMood BoardMockupsPrototypeInteraction

Purpose and Context

The project was completed as part of the CareerFoundry UI Design course.

Objectives

The following goals / problems were aimed to meet / solve:

  • To find and save art easily
  • To be able to purchase artworks directly
  • Receive recommendations based on trends and liked artworks and artists
  • Create a native app for both iOS and Android following the respective styling guidelines of both operating systems

Tools

The project was engaged with the help of the following tools:

  • Lucidchart (User Flows)
  • Sketch (Wireframes, Mood Board, Final Designs, Mockups)
  • InVision (High-Fidelity Prototype)
  • Flinto (Interactions)

 

Creative Phase

Before the decision for art (e) fact was ultimately made, other options were brainstormed and considered. For that all ideas were written down and attributed a few core functionalities and characteristics. After careful consideration the idea fell onto what would become
art (e) fact.
Why? Because art (e) fact combines two very interesting app types: databases / wikis & e-commerce. By enabling users to look and save art they like as well as giving them the ability to purchase the artwork as a print to present in their home or office this app offers an usual set of functions.

User Stories & User Flows

User Stories

To determine the first steps to take when designing the app, user stories were created that ultimately resulted in user flows as a first point of orientation. The user stories were enriched by addtional information such as entrypoints, success criteria and a task analysis.

 

User Stories Entry Point & Success Criteria Task Analysis
As a person interested in
art,
I want to be able to easily
find art and artists,
so that I can get more
information on the piece of
art or the artist.
Entry Point: Home Screen
Success Criteria : Opened
page about the piece of art
searched for
1. Click on search
section
2. Type in search
criteria on the home
screen
3. Confirm search
4. Pick search result
As a person who likes to
look at art for inspiration,
I want to be able to like and
save artworks,
so that I can look at them
quickly later on.
Entry Point: Search result /
Artwork page
Success Criteria: Clicked
the like button and looked at
liked artworks
1. Click the like button
2. Return to home
screen
3. Click on liked art
section
As a person who likes to
discover new / unknown art,
I want to be able to find new
art based on my taste,
so that I don’t have to
manually search for new art.
Entry Point: Home Screen
Success Criteria: Clicked a
recommended artwork
1. Click the
recommendation
section
2. Click a
recommended
artwork

 

User Flows & User Flow Diagram

The task analysis already contained a good part of the screens that needed to be designed. However to better understand the users actual journey and the necessary screens user flows were created and consolidated into a user flow diagram.

Mid-fidelity Wireframes

The next step were mid- to high-fidelity wireframes that already followed the styling of both Apple’s Human Interface Guidelines and Google’s Material Design Guidelines for their respective OS. Due to these guidelines the mid-fideliy wireframe already were a bit more precise than usual although still mostly without color, copy and other elements high-fidelity wireframes would include.

Mood Board

The wireframes for both operating systems already stick quite close to UI elements from Apple’s and Google’s repositories. To better explore the visual possibilities of the app a mood board was created.

The app draws inspiration from modern art galeries and features a lot white space and a very toned done color palette. While the Apple variant of the app would not feature any coloring of the navigation elements to not interfere with Apples guidelines, the Android variant would feature a primary color that is still maintaining the overall modern and elegant feeling of the app.

High-Fidelity Wireframes

The app was completely styled for both operating systems respectively. In the case of the Android app, elevation and other guidelines from the Material Design Guidelines were taken into the design in this stage.

Mockups

Prototype & Interaction

To test the app with real users a prototype for each app was created with InVision. A good amount of feedback was gathered and incorporated into the very final design for handoff. Additionally some parts of the app feature advanced interactions. To better highlight these interactions, short animations were made with Flinto and Protopie.

Loading Animation

Like Animation

Scrolling Animation

Thank you for your interest!
Do you like what you just saw?
Then let's talk!