Embedded Files
Web UI/UX Redesign
Web UI/UX Redesign
by Adib Khoury
by Adib Khoury
Aug 01, 2020
Aug 01, 2020
Summary
Summary
I redesigned my old website after finishing the UX/UI Certificate at SMU. I used user-centered design to diagnose and fix the button design and the organizational layout of the navigation bar. The new design tested much better and I manged to increase my system usability score from C to A percentile rank.
Novelesc.com is...
Novelesc.com is...
A website for writing interactive fiction collaboratively.
Stories are publicly editable and can branch out in different directions.
Rewrite bad endings and change the story as you like.
A public forum for campfire-like story telling with branching narratives.
The UX Process
The UX Process
Empathize with the user
Empathize with the user
Define the problem
Define the problem
Ideate wireframes and sketches
Ideate wireframes and sketches
Prototype Hifi mockups and Interactable Presentable
Prototype Hifi mockups and Interactable Presentable
SUS testing and Interviews.
SUS testing and Interviews.
Empathize: Problem statement
Empathize: Problem statement
I needed to find out what were people saying about the old design so I tested it.
SUS: 65% with 10 users
- Unnecessary complex
- Too much inconsistency
- Various functions were not will integrated
Empathize: User Interviews
Empathize: User Interviews
I Interviewed 6 people of various ages about how they read books.
- Most everyone preferred physical books to digital, with the exception of a college student who preferred not to carry all her heavy text books.
- Nobody has read Interactive fiction or a choose-your-own adventure book before, meaning users needed to adjust the tutorial for newbies.
- Reading times varied greatly from morning commute to bedtime reading, meaning the users needed day and night themes to protect from eye strain.
Empathy Map - College Girl
Empathy Map - College Girl
Thinking & Feeling
Thinking & Feeling
- I hope the online author released a new chapter today.
- I read something amazing and id love to share with my book club; I could call some my friend, but I cant give spoilers!
- I need an adventure.
- I'm sad my favorite book finished.
Hear
Hear
- Fantasy books do not give you any substantial benefits as compared to non-fiction.
- Don’t waste your time reading.
- Physical is better than digital books.
See
See
- People are not reading as much.
- People judging based on wealth and social status.
- My hobby is too niche, I cant connect with others.
Say & Do
Say & Do
- “I would like to put my money toward a good cause.” – maybe tree planting?
- I’m work was tough, I need to write in my journal.
- I wish the story ended differently, I will write a fan-fiction.
Gain
Gain
- Entertainment that I have more control over.
- Gaining a sense of purpose.
Pain
Pain
- Stories don’t go as I would like.
- I want to do good and be good.
Task Analysis
Task Analysis
What I Observed from out users, they...
- had incorrect expectations of site features.
- had trouble identifying buttons.
- used outside software to spell check or did not bother to spell check.
- can use in appropriate language or mature themes.
Workflow changes
Workflow changes
Changed nav-bar language and reorganized for quicker website mastery.
Refined the home page to avoid intimidating new users and took the opportunity to establish the tone.
Combined web pages to clean up navigation clutter.
Old Workflow
Old Workflow
New Workflow
New Workflow
Sketches
Sketches
Four Sketches were created per view.
Critiqued with different users and revised to visually communicate our features before committing to the prototypes.
Prototype V1
Prototype V1
I asked several people to go through the designs and give impressions.
“I’m overwhelmed, there is too much going on.”
“What does that symbol mean?”
Solution: Simplify the design!
Prototype V2
Prototype V2
“It’s still too much, you should add a welcome page.”
“The title is off center”
"I like how the search looks like a bookmark"
Final Version
Final Version
S.U.S. Again
S.U.S. Again
•System Usability Scale Score 85%
•With the same 10 people as previous.
Thank You!
Thank You!
Before and After
Before and After
Page updated
Google Sites
Report abuse