HumberCraft : an iOS App Design

humber craft cover image
For my academic project, I developed an iOS app tailored for Humber College's industrial students' venture specializing in furniture sales. The app streamlines operations, including product presentation, marketing, customer engagement, and sales management. It empowers students to showcase and market their handcrafted furniture products effectively.
HumberCraft
When I had to design an iOS app for Humber College's fictional industrial student venture, which sells furniture products made by students, I named it "HumberCraft." I included the word "Humber" for easy branding, as people will have a better first impression due to the brand value associated with Humber.  

WHAT was I AIMED IN THE FINAL PROTOTYPE

I have decided to have following things in the final prototype

  1. Browse the catalogue products in the app
  2. Search the products through Camera feature or Text prompt
  1. Sign in/ sign up for membership
  2. Interested products add to favorites
  3. Find product reviews in the product page
  4. Receive notifications

Final Prototype  
Final high fidelity prototype screens designs
Landing Page
humber craft high fidelity screens mobile
  • Detail
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
Location Access
humber craft high fidelity screens mobile
  • Detail
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
Home Page
humber craft high fidelity screens mobile
  • Detail
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
Search by camera
humber craft high fidelity screens mobile
  • Detail
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
Search by text prompt
humber craft high fidelity screens mobile
  • Detail
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
Product Page
humber craft high fidelity screens mobile
  • Detail
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
Reviews Section
humber craft high fidelity screens mobile
  • Detail
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
Cart Page
humber craft high fidelity screens mobile
  • Detail
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
Notifications Page
humber craft high fidelity screens mobile
  • Detail
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
Profile page
humber craft high fidelity screens mobile
  • Detail
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
Student Profile Section
Old Version
Redesigned Version
humber current student profile before
humber current student profile after
  • Issues
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
  • Resolved
  • Added a button to access meeting feature
  • Simplified  card designing
  • Adjusted spacing between cards for pleasing look
Student Profile Section
Old Version
Redesigned Version
humber current student profile before
humber current student profile after
  • Issues
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
  • Resolved
  • Added a button to access meeting feature
  • Simplified  card designing
  • Adjusted spacing between cards for pleasing look
Student Profile Section
Old Version
Redesigned Version
humber current student profile before
humber current student profile after
  • Issues
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
  • Resolved
  • Added a button to access meeting feature
  • Simplified  card designing
  • Adjusted spacing between cards for pleasing look
Student Profile Section
Old Version
Redesigned Version
humber current student profile before
humber current student profile after
  • Issues
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
  • Resolved
  • Added a button to access meeting feature
  • Simplified  card designing
  • Adjusted spacing between cards for pleasing look
Student Profile Section
Old Version
Redesigned Version
humber current student profile before
humber current student profile after
  • Issues
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
  • Resolved
  • Added a button to access meeting feature
  • Simplified  card designing
  • Adjusted spacing between cards for pleasing look

design process

design process steps

Empathize

Navigation
Accessibility
Mobile Experience
Responsiveness
Visual Design
humber current audit navigation
humber current audit accesibility
humber current audit mobile experience
humber current audit responsiveness
humber current audit visual design

Competitive Analysis

I have chosen four existing products for competitive analysis. I have examined various functionalities across all apps.
humber craft competitor analysis

Findings

humber craft competitor analysis findings
humber craft competitor analysis findings
humber craft competitor analysis findings
humber craft competitor analysis findings
humber craft competitor analysis findings
humber craft competitor analysis findings

SWOT Analysis

I have selected two companies for SWOT analysis out of four options, which will be used for competitive analysis. They are:
Joss & Main
humber craft SWOT 1
Etsy
humber craft SWOT 2

Pain Points

After conducting an audit of the existing website, I have identified the following pain points.

Design Challenge

How might we design a more user friendly, consistent visual flow website for this product. How might we establish effective communication between students and graduates?

Possible Solutions

  • Redesign buttons, program and event cards , home page banner, student profile page etc.
  • Change the placement of sections; for example, the copy about Humbercurrent currently located in the footer should be moved to the banner section of the homepage.
  • Change stock photos/graphic designs especially program thumbnails.
  • Adding a meeting session feature so that aspiring students can engage in virtual meetings with current students.
  • Redesign the events section.
  • Adding a gallery page to showcase students' work.

Define

User Persona

I believe my intended audience consists of students and middle-class families all over Canada who appreciate stylish furniture but may not have the budget for high-end brands. In this context, students are open to offering these items at a reduced or discounted price in exchange for valuable user feedback.

Target Audience

Similar apps used

  • Diverse demographic students
  • Ages in between 17-40
  • Mostly tech-savvy people
  • Mostly tech-savvy people
  • Etsy
  • Urban Ladder
  • Ikea
  • Joss & Main and more..
Persona 1
humber craft user persona 2
Persona 2
humber craft user persona

Empathy Map

Based on the target audience and their application usage, I have created two user personas. I assumed that both personas belong to the student category, but from different age groups and educational backgrounds. These user personas are:
humber current empathy map

Ideation

User Flow

Based on the target audience and their application usage, I have created two user personas. I assumed that both personas belong to the student category, but from different age groups and educational backgrounds. These user personas are:
humber craft user flow

Style Guide

Based on the target audience and their application usage, I have created two user personas. I assumed that both personas belong to the student category, but from different age groups and educational backgrounds. These user personas are:
humber craft style guide

UI Kit

humber current UI kit
humber current UI kit
humber current UI kit
humber current UI kit

Low Fidelity Sketches

humber craft low fidelity sketches
humber craft low fidelity sketches
humber craft low fidelity sketches
humber craft low fidelity sketches
humber craft low fidelity sketches
humber craft low fidelity sketches

Prototyping

Mid Fidelity Prototype

humber craft mid  fidelity screens
humber craft mid  fidelity screens
humber craft mid  fidelity screens
humber craft mid  fidelity screens
humber craft mid  fidelity screens
humber craft mid  fidelity screens
humber current  mid fidelity screens
humber current  mid fidelity screens
humber current  mid fidelity screens
humber current  mid fidelity screens
humber current  mid fidelity screens
Figma Prototype

Testing

Usability Testing

I have conducted usability testing with 5 participants for three specified tasks.
  • Participants

  • 5
  • Tasks

  • 4
  • Success Rate

  • 81%
Tasks:
  • Browse catalogue without sign in/ sign up
  • Browse and add to favorites
  • Add to cart and place an order
  • Search through text prompt or camera feature
I have received following feedback from testing
Based on feedback, I fixed the issues and created a high-fidelity prototype.

High Fidelity Prototype

humber craft high  fidelity mock up
humber craft cover image
humber craft high fidelity screens mobilehumber craft high fidelity screens mobilehumber craft high fidelity screens mobile
humber current cover image
humber current  high fidelity screens

Reflection

In this project, I focused on designing an iOS app for a fictional company, which provided me with the opportunity to delve into the realm of design systems. Throughout the process, I familiarized myself with various design systems such as Material Design and Apple's Human Interface Guidelines, ultimately opting to follow the latter for this particular project. This endeavor prompted me to ponder the factors that influence the choice of platform for a project, leading me to a deeper exploration of design systems and their significance.