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!
