so far, it’s been a super interesting and challenging journey. it has also brought back the artist/designer viewfinder: i look at the world first as a photographer so i can say that i’m a fairly visual person; next, as a marketing person — i can’t help but analyse everything from that perspective; and now i’ve combined those to view the world as a designer.

it’s not always fun because some days i just wanna go about without noticing the tiny little details but most days, i love it.

The treasure chest is a toy store that has been providing traditional toys for over 30 years. To keep up with the times, they are now offering a full range of hand-picked toys and would like to have a website to showcase their products while staying true to the brand’s roots.

They focus on hand-picked quality over quantity: “the biggest little store online”.

Identifiers:

• “Old school”, tradition, nostalgia
• Specialty store, hand-picked items
• Magic, personal, “little shop” feel
• Fun & Creativity

// solution

The solution I propose is to create a website that is clean and easy to browse/search for toys for all user types. Capitalizing on the fun and creative aspect, the website will be visual without being too childish. The online shop would be easy to navigate through and on top of that, the customers will have an easy way to contact mom & pop for feedback/concerns or to request for a specific toy.

// thought process

I had to first truly understand what the Treasure Chest stands for, the brand identity, personality and the tradition it holds. I then had a competitive analysis for both small toy stores and larger companies to see the structure of their website, particularly the taxonomy, navigation, sitemap.

While I had a comparative analysis for the more specific details of features such as menus, quick view, shopping cart, checkout process, etc.

I then gathered user data from the three different personas to understand how the customers would go about navigating the website and what they want to do and what they want out of the website. The user flows below help understand their process:

1. Jason who is a single dad buying toys for her daughter; wants to be a “cool dad”

2. Jenny is a grandmother buying magic-related toys for her grandson. She is a repeat customer. She likes to be rewarded for her shopping.

3. Daniel is a “hipster” toy collector who likes being able to share his new toys on social media.

Having these three personas have helped in prioritizing the features for the website considering their different needs and reconciling those needs into one seamless experience for ALL users.

All three personas essentially want a smooth and easy way to search and buy toys. The three main approach for that is to provide a “recommended toys” section for repeat customers, which will be based on their past purchases and related products; a search function which will make it easier for customers who know what they want; an easy way to browse for toys without being overwhelming.

// wireframe

• Global Navigation Bar
• Drop Down Menus
• Search Bar, Sign In and Cart
• Ticker for news and promos
• Pop’s Favourites (recommended)
• Physical store address
• Social media
• Contact Form

Product at a glance

• Stepper
• Add to Cart
• Product Description
• Product Details
• Recommendations
• Ratings
• Feedback
• More photos, close-up
• Back button

• Checkout
• Shipping Address
• Shipping Options
• Billing Address
• Payment
• Order Confirmation
• Recommended Products

// prototype

To view the prototype click here.

// reflection

This was my first real attempt in creating a website. The most important part of the process for me was to bridge the business needs and the user needs. There are certain features that the customers want to have and as a designer, I would like to provide that for them seeing it definitely makes for a better experience. However, I also had to assess whether it was realistic for the business to provide that particular feature; from observation and experience, it’s better to hold off on a particular feature than roll it out without ironing out all the details because that usually ends up with the users becoming even more frustrated.

Another aspect that I had to balance was time constraints — this pushed me to prioritize and really make decisions based on data at hand. I had spent a little more time than I would have liked on the user research and figuring out the information architecture and taxonomy which took up time from creating wireframes. Granted, it was also my first time to use Sketch3 and creating wireframes it was indeed a challenge. Being more familiar with the tools, I can now manage my time and also keep in mind how it will be applied on Sketch while visualizing and sketching (on paper).

my user Utsab wants to be more productive and feels like he doesn’t get enough done at the end of the day which leads him to staying up late working on his computer, which leads to him waking up late and thus begins an unhealthy and unproductive cycle.

Utsab feels he sometimes needs a little push or motivation from his friend(s) to follow through.

// solution

my solution was to design an app that would remind him to unplug from the computer at a time he feels would best allow him enough sleep and rest.

along with this, the app will give him motivation to continue a good habit and also provide a social aspects that involves his friends as a support group in case he doesn’t follow through.

// thought process

i first designed an app that serves as an alarm clock of sorts to remind him to unplug at the same time would automatically lock or put his computer to sleep.

i also integrated a task list manager into the app that would allow him to prioritize the top 3 tasks he needs to accomplish that day with optional tasks. this would allow him to focus on the most important tasks at hand; this allows him a little flexibility and a sense of accomplishment at the end of the day.

i designed the “streak” feature to serve as a fun motivational tool that keeps track of the number of days or weeks he has continuously unplugged. this serves as a positive reinforcement to continue the habit.

as per user request to include a social aspect, i integrated a feature should he would notify his friends by posting on his wall on facebook should he fail to unplug. this feature gets his friends involved and provide the necessary encouragement or support.

// prototype

• initial prototype included all the features mentioned above with the clean and simple interface.
• i derived design inspiration from existing apps like uber and lyft with a very minimal approach to design.

// design iteration (feedback)

Utsab did not like the task list feature; he did not feel it was necessary for the purpose of this app and that it was a separate app in itself.

he also did not like the facebook feature that posts on his wall when he fails to unplug. He felt this was spam-y and did not want to annoy his friends with constant posts, etc.

instead, he prefers assigning a referee or two who will be the recipient of an email alert, if he should fail to unplug.

// final output

• setup is simple and familiar with the option to assign labels to different alarms for different requirements.
• integrated is a snooze feature that allows a grace period for unplugging.
• referee only receives an email alert in case user fails to unplug. no spamming on facebook.
• app syncs with computer (installed on computer to track the use and unplugging). home screen displays the current status (whether plugged or unplugged), if the sync is active, which setting is chosen and time of the next unplugging and the streak count.
• hamburger opens up a sidebar that has quick access to different alarm times, the streak feature, setup, and help.
• alert is a prompt/notification on screen that when clicked brings user to the app displaying current streak count.
• a weekly streak report is shown on the app, as a reminder and encouragement.
• a snooze feature allows for a grace period of 5 minutes to unplug before counting it as a failure to unplug. a timer will run on the notification panel.
• failure to unplug notification will open up to app that shows the loss of the streak. an inspirational quote or message is displayed to offer support and encouragement to try again.
• this failure automatically triggers an email to be sent to the referee(s) alerting the referee of user’s failure to unplug. this gives the referee an option to contact the user.

/ after user feedback and iteration, the final output was simplified and re-focused to only cater to user needs and desire. as shown in the design UI above, it’s a clean and easy to use app with a fun and interactive side.

// reflection

after the presentation, i received some important critiques regarding the UI, such as a home or back button. i will re-assess the buttons to facilitate an easier navigation within the app.

i also learned that it is important to keep the user in mind: this means catering to the needs and desires of the user. it is important to interact with the user and gather feedback. there were some design aspects that i initially thought addressed the user’s problem but it turns out, he did not need or want those features.

along with that, i also felt the strong urge to integrate a feature that would make the app stronger (but user declined the feature). include an “unplug now” button that puts the computer to sleep or shuts down the computer. user informed me that if he wasn’t on the computer, it would most likely be asleep or shutdown; this rendered that feature not necessarily useful.

lastly, it gave me a good introduction and practice in learning about the user and truly listening to his needs. this includes asking the right question that will lead to the solution. sometimes, the user does not easily divulge information because researcher doesn’t ask the right questions. i also learned that it helps to map out my thoughts to make designing the app easier.

/